Blogger Yazar Hakkında Kutucuğu Eklentisi

Blogger Yazar Hakkında Kutucuğu Oluşturmak

Wordpress temalarında sık kullanılan eklentilerinden biri her yayın altında yazar hakkında kısa bilgiler içeren kutucuklar Blogger temalarına da kolayca uygulanabilir. Özellik Google algoritmasının her geçen gün blog kullanıcılarına güveni azalırken, kendi kimliğinizi Google ve kullanıcılara sunmak blogunuz için olumlu bir etki yaratacaktır.

Yazar tanıtım penceresinde siteniz ile ilgili anahtar kelimelere yer vermeniz anahtar kelime yoğunluğunu yakalamanıza ve blogunuzun hangi konuda yayın yaptığını Google arama motoruna tanıtmada yardımcı olacaktır.

Blogger Yazar Hakkında Kutucuğu Demo

Demo temamızın her konusunun altında yazar hakkında bilgilendirme kutucuğunu görebilirsiniz.

Blogger Yazar Hakkında Kutucuğu Eklentisi

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen üzerine aşağıda ki Blogger yazar hakkında kutucuğu eklentisi kodlarını ekliyoruz.

  .authbio{
color: #555;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 3px solid #09f;
width: 570px;
padding: 10px 0px 30px 0px;
margin: 10px 0 10px 0;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
.authbio img {
    height: 100px;
    width: 100px;  
float:left;
border:3px solid #cccccc;
-moz-border-radius:60px;
-webkit-border-radius:60px;
-o-border-radius:60px
padding: 0px;
margin-left:5px;
margin-top:0px;
margin-bottom:25px;
margin-right:12px;
}
.authbio h3{ font-family:Verdana, Geneva, sans-serif;
background-color:#09F;
color: #FFF;
padding: 5px 0 5px 0;
margin: 10px 0px 5px 133px ;
}
.authbio a{
text-decoration:none;
font-style:oblique;

}

3 ) Tekrar CTRL+F yardımı ile <data:post.body/> kodunu bularak hemen altına aşağıda ki Blogger yazar hakkında kutucuğu eklentisi kodlarını ekliyoruz. Blogunuzda <data:post.body/> kodu fazlaca bulunabilir. Genelde ikinci sıradaki doğru olan olsa da temalarda farklılık gösterebiliyor. teker teker denemeniz gerekebilir.

<center>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authbio'>
<div style='float: left;'>
<img alt='Blogger Dersleri' src='https://twimg0-a.akamaihd.net/profile_images/2497048776/i7scuv2jxridm7yyi58x.png'/></div>
<h3><strong>Yazar Hakkında:</strong></h3>
Blogger Dersleri Demo , Blogger Dersleri , Blogger Eklentileri , Blogger Seo , Blogger İle Para Kazanmak , Blogger Terimleri
<a href='http://www.bloggerdersleri.com/'> Blogger Dersleri  </a>
</div>
</b:if>
</center>

Blogger Yazar Hakkında Kutucuğu Üzerinde Yapmanız Gereken Değişiklikler

Demo örneğinde gördüğünüz resim ve alt etiketi kodlar içerisinde kırmızı ile yazılmıştır.
Eklentinin üst kısmında yer alan başlık kısmı mavi olarak eklenti kodları içerisinde belirlenmiştir.
Pembe ile yazılmış alan ise kendinizden bahsetmeniz gereken alan . </h3> kodu ardından html kodu eklemesi yaparak kullanabilirsiniz. Ben sizin bir adet link oluşturma kodu ekledim ve yeşil tonlarında işaretledim.