Blogunuz için Sade ve Şık Tasarımlı Popüler Yayınlar Eklentisi

Çoğu blog yazarı sade ve kullanışlı bir tasarım istiyor. Fakat Popüler Yayınlar gibi önemli bir eklentiyi es geçmek iyi olmaz. Popüler Yayınlar eklentisi doğru kullanırsanız blogunuzda şık, kullanışlı bir görüntü ortaya çıkartır ve blogunuzu ziyaret eden kişiler popüler yayınlar eklentisindeki yayınlarınıza da göz atar. Bu da ziyaretçilerin kullanıcı deneyimini arttırır ve blogunuzda daha fazla zaman geçirmelerini sağlar. Bu içerikte sade ve şık tasarımlı bir Popüler Yayınlar eklentisini nasıl ekleyebileceğinizi anlatacağım. Daha önceden paylaşmış olduğum Blogger için Son Konular Eklentileri ve Blogger için Instagram Widget/Eklentisi içeriklerine de göz atabilirsiniz.

Blogunuz için Sade ve Şık Popüler Yayınlar Eklentisi

1. Adım

İlk olarak blogunuza Popüler Yayınlar eklentisini eklemelisiniz. Bunu Yerleşim > Gadget Ekle > Popüler Yayınlar yolunu takip ederek yapabilirsiniz.

2. Adım

Bu adımda mevcut Popüler Yayınlar eklentisinin CSS kodlarını bulacağız ve onları değiştireceğiz. Blogger > Tema > HTML'yi düzenle yolunu izleyin ve CTRL + F komutu aracılığı ile popularposts kelimesini arayın. Bulduğunuz kodlar aşağıdaki gibi görünecektir. Bunun gibi kod bulursanız size vereceğim kodu bu kodların yerine yapıştırın. Eğer yoksa size vereceğim kodları ]]> kodunun hemen üzerine ekleyin.

CSS
.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:70px;float:left;overflow:hidden}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{padding:0;width:90px;height:70px}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px dotted #f5f5f5}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{color:$(main.text.color);font-weight:500;font-size:14px;line-height:1.5em}
.PopularPosts ul li a:hover{color:$(main.color)}
.PopularPosts .item-title{margin:0;padding:0;line-height:0}

3. Adım
Aşağıdaki kodları 2. Adımı takip ederek kullanın.

CSS
.popular-posts ul{margin:0;padding:0}
.popular-posts ul li{border-bottom:1px solid #eee;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:5px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 0;font-size:12px;font-weight:bold;color:#949494;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #eee}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#444;display:table;font-size:13px}
.PopularPosts li:hover{background-color:#f0f0f0}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important;text-transform:none}

Popüler Yayınlar eklentisi kullanılmaya hazır.

Daha iyi bloglar için...