Blogger popüler yazılar eklentisini özelleştiriyoruz...Popüler yazılar/yayınlar eklentisi, blog sitelerin çok okunan yazılarını öne çıkarmasını sağlayan ve kullanıcıların sitede kalma sürelerini arttıran olmazsa eklentilerden biri. Ben de kendi sitemde bu eklentiyi kullanıyorum. Birçok ayarı da bulunan eklenti haftanın, ayın veya yılın en çok okunan 10 yazısını listelemenizi sağlıyor.
Peki bu eklentiyi nasıl özelleştirip daha güzel bir görünüme kavuşturabileceğinizi biliyor musunuz? Ben oldukça güzel bir popüler yayınlar görünümü elde ettim ve bunu sizlerle paylaşmak istiyorum. Bloğunuzda hali hazırda bir popüler yazılar eklentisi varsa onu çok daha kullanışlı hale getireceğiz.
Blogger Popüler Yazılar Eklentisini Düzenleyelim
Blogger paneli > Tema > Html'yi Düzenle bölümüne ulaşıp CTRL+F komutu ile aşağıdaki kodu bulun.
[</head>]
Yukarıdaki kodu hemen üzerine aşağıdaki kodu ekleyin.
[<style>
/* Popular Posts */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,
.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;
background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color:#333;}
.PopularPosts ul li img {display:block;width:100%;height:180px;float:left;transition:all 0.3s ease-out;max-width: none;}
.PopularPosts ul li {background-color:#fff;margin:2px;margin-bottom: 30px;padding:0;padding-bottom:5px;position:relative;transition:all 0.3s ease-out;}
.PopularPosts ul li:last-child {padding-bottom:0;}
.PopularPosts .item-title a { font:600 14px 'Playfair Display';color: #555; font-size: 16px; padding: 10px; position: absolute; right: 0; left: 0px; margin: 0px auto; text-align: center; text-decoration: none; top: 120px; overflow: hidden; z-index: 2; line-height: 1.2; background: rgb(255, 255, 255); width: 70%; border-top: 3px solid #FEC606; }
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {}
.PopularPosts ul li:before {display:none;list-style:none;}
.PopularPosts .item-thumbnail {margin:0 0 0 0;background: #333;overflow: hidden;}
.PopularPosts .item-snippet {font-size:11px;color:#333;font-weight:400;}
.PopularPosts .item-title {padding-bottom:.2em;line-height: 0.9;}
.PopularPosts .item-thumbnail::after {color: #f8f8f8; list-style-type: none; position: absolute; z-index: 4;font-size: 22px; background: rgb(31, 118, 158); padding: 10px; font-weight: 700; left: 0;}
/* Popular Posts */
</style>]
Daha sonra yine aynı sayfada aşağıdaki kodu bulun. Bu kodu "PopularPosts1" olarak aratabilirsiniz yada Widget'a Atla butonuna basarak PopularPost1'i seçebilirsiniz.
[<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>…</b:widget>]
Yukarıdaki kodu silip yerine aşağıdaki kodu ekleyin ve temanızı kaydedin.
[<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>7</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail Ayudadeblogger.com -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>]
 |
| popüler yayınlar eklentisine ait kodlar |
Popüler yayınlar eklentisi artık çok daha modern bir görünüme sahip oldu. Eklentinin resimleri büyüdü ve başlıklar resmin ortasında konumlandı. Eğer eklentinin görünümünde sorunlar varsa temanızda daha önce eklenmiş ve popüler yayınları etkileyen başka kodlar olabilir, onları silerek sorunu çözebilirsiniz.
İyi bloglamalar!
Kaynak:
https://www.ayudadeblogger.com/2017/12/entradas-populares-para-blogger-like-style.html
YORUMLAR