yazar hakkında

29 Aralık 2012 Cumartesi MUHACERAT 1 yorum

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.



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 altına 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='Blogkerim' 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.blogkerim.com/'> Blog Kerim  </a>
</div>
</b:if>
</center>
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.