atlisensi-0

Blogger için özel profil sayfası

Blogger sitesi nasıl silinir? Blogger sitesi nasıl silinir?

Hakkında sayfalarının günümüzde basit paragraflardan oluşan sıkıcı içerikler olması bu sayfaların ziyaret sayısını bir hayli düşürüyor. Blogger siteniz için farklı renk varyasyonları da içeren minimal bir profil kartı oluşturduk. Önizlemede inceleyin ve kurulumu için Kurulum başlığındaki adımları takip edin.

Kurulum

  • Adım #1 — İlk olarak oluşturmadıysanız profil kartını yerleştirmek istediğiniz sayfayı oluşturun. Oluşturduğunuz sayfa üzerinde düzenleme modu olarak "HTML görünümü"nü seçin.
  • Adım #2 — Aşağıdaki kodu kopyalayıp HTML alanına yapıştırın:
    <script>/*<![CDATA[*/function webStats(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t, 10))} /*]]>*/</script>
    
    <div class="hakAlan bgMavi">
      <div class="baslikAlan">
        <h2>Lorem Ipsum</h2>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
      </div>
      <div class="resimAlan">
        <a class="baglantiSol" href="#"><svg class="c-1" viewBox="0 0 32 32">
            <path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z"></path>
          </svg></a>
        <img class="yazarResim" src="https://lh4.googleusercontent.com/-cOHxiVPtJ6o/Yiu6lZupv3I/AAAAAAAArCY/qkDTHPoYZ6Y6FF8VKSXZ0kM5fYtZ7TYDACK4BGAYYCw/s113-pf/se.png" />
        <a class="baglantiSag" href="#"><svg class="c-1" viewBox="0 0 32 32">
            <path d="M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z"></path>
          </svg></a>
      </div>
      <div class="istatistikaAlan webSts">
        <span class="bolmeAlan">
          <b>Yazılar</b><br />
          <script src="https://www.esenturkdesign.com/feeds/posts/default?alt=json-in-script&amp;callback=webStats"></script>
        </span>
        <span class="bolmeAlan">
          <b>Yorumlar</b><br />
          <script src="https://www.esenturkdesign.com/feeds/comments/default?alt=json-in-script&amp;callback=webStats"></script>
        </span>
        <span class="bolmeAlan">
          <b>Yazarlar</b><br />
          10
        </span>
      </div>
      <div class="aciklamaAlan">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <a class="dahaButon" href="#" rel="author nofollow">
          Lorem ipsum
          <svg class="line" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)">
              <path d="M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0"></path>
            </g>
          </svg>
        </a>
      </div>
    </div>

    Yapıştrdığınız HTML kodu üzerindeki kalın olarak belirtilen alanları kendi sitenize göre uyarlamayı unutmayın.

  • Adım #3 — Sonraki adımda tasarım kodunu yerleştirelim. Bunun için aşağıdaki CSS kodunu sayfanın sonuna <style> etiketi içine alarak ekleyin:
    .hakAlan {
      display: block;
      width: 400px;
      max-width: 100%;
      margin: 20px auto;
      border: 1px solid #edebed;
      box-shadow: 0px 5px 5px #00000020;
      border-radius: 15px;
      overflow: hidden;
      background: #ffffff;
      font-size: 16px;
      color: #555;
      line-height: normal;
    }
    
    .hakAlan .baslikAlan {
      display: block;
      padding: 20px 20px 80px;
      text-align: center;
    }
    
    .hakAlan .baslikAlan h2 {
      margin: 15px 0;
      font-size: 22px;
    }
    
    .hakAlan .baslikAlan p {
      margin: 0;
    }
    
    .hakAlan .resimAlan {
      position: relative;
      display: block;
      width: 100%;
    }
    
    .hakAlan .resimAlan .baglantiSol svg,
    .hakAlan .resimAlan .baglantiSag svg,
    .dahaButon svg {
      height: 20px;
      width: 20px;
      vertical-align: middle;
    }
    
    .hakAlan .resimAlan .baglantiSol,
    .hakAlan .resimAlan .baglantiSag {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      padding: 6px 0;
      width: 34px;
      height: 22px;
      text-align: center;
      margin-top: -17px;
      box-shadow: 0px 5px 5px #00000020;
      transform: scale(1);
      transition: all 0.1s ease-in-out;
    }
    
    .hakAlan .resimAlan .baglantiSol:hover,
    .hakAlan .resimAlan .baglantiSag:hover {
      transform: scale(1.05);
    }
    
    .hakAlan .resimAlan .baglantiSol {
      left: 50%;
      margin-left: -120px;
    }
    
    .hakAlan .resimAlan .baglantiSag {
      right: 50%;
      margin-right: -120px;
    }
    
    .hakAlan .resimAlan .yazarResim {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
      border-radius: 50%;
      box-shadow: 0px 5px 5px #00000020;
    }
    
    .hakAlan .istatistikaAlan {
      display: flex;
      padding: 80px 20px 20px;
      background: #f5f5f5;
    }
    
    .hakAlan .istatistikaAlan .bolmeAlan {
      width: calc(100% / 3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .hakAlan .aciklamaAlan {
      padding: 30px;
    }
    
    .hakAlan .aciklamaAlan p {
      margin: 0;
    }
    
    .dahaButon {
      display: block;
      margin-top: 20px;
      text-decoration: none;
    }
    
    .dahaButon svg {
      fill: none !important;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.5;
    }
    
    /* Renkler */
    .bgTuruncu .baslikAlan {background: linear-gradient(90deg, #d53369 0%, #daae51 100%);color: #fff;}
    .bgTuruncu .baglantiSol svg,.bgTuruncu .baglantiSag svg {fill: #d53369;}
    .bgTuruncu .bolmeAlan b,.bgTuruncu .dahaButon {color: #d53369 !important;}
    .bgTuruncu .dahaButon svg {stroke: #d53369;}
    .bgYumurta .baslikAlan {background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);color: #fff;}
    .bgYumurta .baglantiSol svg,.bgYumurta .baglantiSag svg {fill: #FDBB2D;}
    .bgYumurta .bolmeAlan b,.bgYumurta .dahaButon {color: #FDBB2D !important;}
    .bgYumurta .dahaButon svg {stroke: #FDBB2D;}
    .bgYesil .baslikAlan {background: linear-gradient(90deg, #9ebd13 0%, #008552 100%);color: #fff;}
    .bgYesil .baglantiSol svg,.bgYesil .baglantiSag svg {fill: #9ebd13;}
    .bgYesil .bolmeAlan b,.bgYesil .dahaButon {color: #9ebd13 !important;}
    .bgYesil .dahaButon svg {stroke: #9ebd13;}
    .bgMavi .baslikAlan {background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);color: #fff;}
    .bgMavi .baglantiSol svg,.bgMavi .baglantiSag svg {fill: #4b6cb7;}
    .bgMavi .bolmeAlan b,.bgMavi .dahaButon {color: #4b6cb7 !important;}
    .bgMavi .dahaButon svg {stroke: #4b6cb7;}
    

    CSS kodunda yer alan işaretli alanları kendi tercihinize göre değiştirebilirsiniz. CSS kodunun sonunda yer alan /* Renkler */ başlığı altında 4 farklı renk kombinasyonu hazırladık. Bunlardan dilediğinizi HTML kodundaki <div class="hakAlan bgMavi"> kalın olarak işaretlenen yer ile değiştirebilirsiniz.

    Örnek kullanımları şöyle:
    <div class="hakAlan bgTuruncu">
    <div class="hakAlan bgYumurta">
    <div class="hakAlan bgYesil">
    <div class="hakAlan bgMavi">

  • Adım #4 — Blogger düzenleyicisinin "Önizle" butonunu kullanarak görünümün son haline göz atabilir, kurulumu tamamladığınızda "Kaydet" butonuyla yayına alabilirsiniz.
  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Yazılar
    Yorumlar
    Görüntüleme
    2467

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum

2 yorum

Yorum Gönder