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 ]]> 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 kodunu buluyoruz ve altında aşağıdaki kodları ekliyoruz ve şablonu kaydediyoruz..

Genelde kodundan iki adet bulunabiliyor ve işimize yarayan kod ikinci oluyor en azından test blogumuza eklerken ikinci kodun altına ekledik

Yazar











    • Wepblogger.com
    >Devamı

    Kaynak : http://www.wepblogger.com/2014/06/blogger-css-ile-ozellestirilmis-hover.html