Blogger popüler konular eklentisi 2016

Bloger Eklentileri , Bu gün çok hoşuma giden animasyonlu bir popüler yayınlar kodu paylaşıyorum. Bloğunuzun hoş bir görünüme sahip olmasını istiyorsanız tam da size göre bir Popüler konular eklentisi.
Gelelim Kodları eklemeye; İlk olarak Bloğunuzu yedeğe almaya unutmayın yapacanız bir hatada bloğunuz bozula bilir. Blogger giriş yapıp şablonlar kısmını tıklıyoruz. HTML' i Düzenle kısmından açılan penceremize eklicez kodları. Blogger eklentileri.

Blogger popüler konular eklentisi 2016
Blogger popüler konular eklentisi 2016
Blogger popüler konular widget 1. kod: ]]></b:skin>
Öncelikle Ctrl+F yaparak kodumuzu aratırıyoruz.

Ardından aşağıdaki vereceğim kodları ]]></b:skin>  Üst satırına gelecek şekilde ekliyoruz.
/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Blogger popüler konular widget 2. kod: Yine Ctrl+F yardımıyla arıcamız kod: </body>
Aratıktan sonra önceki işlemde yapmış olduğumuz gibi yine </body> kodunun üst satırına ekliyoruz aşağıda vermiş oldumuz kodu.


Son kodu ekledikten sonra kaydet diyip blogu görüntüle dedinizde sag tarafta animasyonlu çok hoş bir eklenti çıkıcak karşınıza.

Demo

Blogger eklentileri 2016
Google+'da Paylaş

Yazar Unknown

Yazar Hakkında bilgi yazılacak
    Blogger Yorumları

0 yorum:

Yorum Gönder

Argo içerilikli yorum attığınız taktirde hakkınızda dava açılır, site adresinizi yoruma attığınız taktirde ise bloğunuz google sıralamasından düşer.