Yeni Popüler Yayınlar Gadgetimiz

Blogger popüler yayınlar düzenlemesi. Bu eklentiyi bloğunuza kurduğunuz zaman popüler yayınlar listenizde ilk sırada olan yayının resmi sidebarınızın genişliğinde büyük oluyor ve üzerine fare imlecini getirince o yayın hakkında kısa bir bilgi kutucuğu beliriyor. Popüler yayınlarda iki, üç ve diğer sırada yer alan yayınlar ise alt alta küçük resim ve yazı başlığıyla birlikte sıralanıyor. Popüler yayınlar modifiyemizin önizlemesi yukarıdaki resimde olduğu gibidir.

Daha önce popüler yayınlar modifiyesiyle ilgili bir güzel eklenti daha paylaşmıştım ona da buradan ulaşabilirsin.

Popüler Yayınlar Widgeti Eklemek İçin Ne Yapmalıyım?

1. Blogger giriş.

2. Şablon

3. HTML'yi Düzenle

4. Kodlar üzerinde bir yere tıkla CTRL ve F tuşlarına aynı anda basarak arama kutusunu aç ve ]]></b:skin> kodunu bul.

5. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştır.

/* Popülar Yayınlar Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}

6. Şimdi </body> kodunu bul ve yine üst satırına aşağıdaki Jquery kodlarını yapıştır.

<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

7. Şablonu kaydet ve tebrikler yeni popüler yayınlar eklentin hazır :)

Bloger için popüler yayınları yeni ve farklı tarzda nasıl dizayn edeceğinizi anlattım. Takıldığınız yerler varsa yorumla sormaktan çekinmeyin.

Umarım faydalı olmuşumdur. Destek için bloğumu izlemeniz ve arada bir yazılarıma yorumunuzla güzellik katmanız yeterli. Teşekkürler. İyi bloglamalar.