Blogger Css ile Özelleştirilmiş Hover Yazar Hakkında Eklentisi

Blogger Css ile Özelleştirilmiş Hover Yazar Hakkında Eklentisi

Wordpress ve bazı blogger temalarında sık kullanılan eklentilerinden biri her yayın altında yazar hakkında kısa bilgiler içeren kutucuklardır Blogger temalarına da kolayca uygulanabilen bu kutucuklar ö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.

Ayrıca yazar hakkında eklentisinde siteniz ile ilgili anahtar kelimelere yer vermeniz anahtar kelime yoğunluğunu yakalamanıza yardımcı olacak şık bir eklentidir. Eklentide ayrıca sosyal medya butonların da yer almasından dolayı sosyal medya hesaplarınıza ziyaretçilerinizi çekebilirsiniz.



Eklentiyi eklemek için şablonda   ]]></b:skin> kodunu bularak hemen üzerine aşağıdaki kodları ekleyiniz.

 .about-author{margin-top:40px;width:100%}  
 .authorbox{background:none repeat scroll 0 0 #333;color:#fff;overflow:hidden;padding:0}  
 .authorbox .authorinfo{color:#ccc}  
 .authorbox .authorsocial{float:left}  
 .authorbox .authorsocial li{list-style:none;margin:0;position:relative}  
 .authorbox .authorsocial li a{background:url(http://softglad.at.ua/images/social-logo32.png);display:block;height:32px;margin:0;width:32px}  
 .authorbox .authorinfo img{background:#fff;border-radius:100%;float:left;margin:4px 10px 4px 5px;padding:5px;width:17%}  
 .authorbox .authorinfo p{font:15px open sans;font-size:18px;line-height:25px!important;margin:0;padding:0 5px;text-align:left}  
 .authorinfo p a{color:#fff;text-decoration:none}  
 .authorbox h3{background:#333;color:#fff;display:inline-block;font:bold 20px Arial;margin:0;padding:5px 10px}  
 h5.boxtitle{background:none repeat scroll 0 0 #333;color:#fff;font:normal 16px 'Bree Serif', serif;margin:0 auto;padding:2px 10px;width:25%}  
 .authorbox .authorsocial li .fb{background-position:0 0}  
 .authorbox .authorsocial li .twitter{background-position:0 -32px}  
 .authorbox .authorsocial li .google{background-position:0 -64px}  
 .authorbox .authorsocial li .in{background-position:0 -96px}  
 .authorbox .authorsocial li .in:hover{background-position:-32px -96px}  
 .authorbox .authorsocial li .google:hover{background-position:-32px -64px}  
 .authorbox .authorsocial li .twitter:hover{background-position:-32px -32px}  
 .authorbox .authorsocial li .fb:hover{background-position:-32px 0}  
 .authorbox:hover img{background:#1BC3F8}  
 .authorbox .authorinfo img, .authorbox .authorsocial li a {-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;}  

Daha Sonra <data:post.body/> kodunu buluyoruz ve altında aşağıdaki kodları ekliyoruz ve şablonu kaydediyoruz..
 <div class='about-author'>  
 <h5 class='boxtitle'>Yazar</h5>  
 <div class='authorbox'>  
 <div class='authorsocial'>  
 <li><a class='fb' href='http://facebook.com/Kullanıcıadı' rel='nofollow'></a></li>  
 <li><a class='twitter' href='http://twitter.com/Kullanıcıadı' rel='nofollow'></a></li>  
 <li><a class='google' href='https://plus.google.com/Kullanıcıadı' rel='author'></a></li>  
 <li><a class='in' href='http://in.linkedin.com/in/Kullanıcıadı' rel='nofollow'></a></li>  
 </div>  
 <div class='authorinfo'>  
 <img src='http://i.hizliresim.com/XW1pB3.png'/>  
 <p>Wepblogger.com <a href='www.Wepblogger.com'>Devamı</a></p>  
 </div>  
 </div>  
 </div>  

                                      Kırmızı ile gösterilen yerleri özelleştiriniz.



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. Genelde <data:post.body/> 2.kod işinize yarayan kod oluyor en azında test blogumuzda 2.nci kod işe yaramıştı.



Daha Fazlası: RSS Feed | Email Aboneliği Yayın Sayısı :

2 yorum

Bloğumda Gözükmedi Nasıl Düzeltebilirim?

Mavi gösterilen son satırda belirtildiği gibi yaparsanız hal olacaktır.