Modifikasi Widget Populer Post di Blogger

Daftar isi [Tampil]

Memodifikasi Widget Populer Post di Blogger adalah tutorial sangat mudah yang bisa dilakukan oleh pemula. Setidaknya mengerti mengenai CSS dan HTML karena kalau tidak paham tentu kan tidak akan paham meletakkan kode tersebut. 


Widget Populer Post adalah sebuah element dari Blogger dimana kamu bisa melihat tanding artikel yang berdasarkan Mingguan, Bulanan, dan Tahun. 


Populer yang di modifikasi ini seperti template dipakai Sudar Blogger, atau ala Inverpro punya arlinacode. 

Agar memodifikasi populer Post widgett ini supaya berhasil maka harus perhatikan langkah - langkah nya, yuk mulai. 


Memodifikasi Widget Populer Post di Blogger


Langkah pertama kamu harus ubah dulu template yang versi lama dengan yang baru caranya dengan mengubah kode berikut tepat di atas <head>

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Maka otomatis template kamu akan update dengan widget versi ke dua. 

Lalu salin kode HTML dibawah iki karena kode akan berbeda pada sebelumnya pada tampilan widget versi 2

<b:defaultmarkups> <b:defaultmarkup type='Common'> <b:includable id='widget-title'> <b:if cond='data:defaultTitle or data:title'> <div class='widget-title'> <h4 class='title'> <data:title/> </h4> </div> </b:if> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='PopularPosts'> <b:includable id='main' var='this'> <b:include name='widget-title'/> <div class='widget-content'> <b:loop values='data:posts' var='post'> <b:include data='post' name='postContent'/> </b:loop> </div> </b:includable> <b:includable id='postContent' var='post'> <div class='post'> <div class='post-content'> <a class='post-image-link' expr:href='data:post.url'> <img class='post-thumb lazy' expr:alt='data:post.title' expr:data-src='data:post.featuredImage resizeImage 100' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/> </a> <div class='post-info'> <h3 class='post-title'> <a expr:href='data:post.url'><data:post.title/></a> </h3> <div class='post-meta'> <span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span> </div> </div> </div> </div> </b:includable> </b:defaultmarkup> </b:defaultmarkups>

Setelah itu masukkan CSS berikut ini di atas </head>

<style>/* Popular Post Index */ #PopularPosts ul{list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}#PopularPosts1 li,#PopularPosts1 li img,#PopularPosts1 li a,#PopularPosts1 li a img{margin:0;padding:0;list-style:none;background:none;outline:none}#PopularPosts1 ul li{margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em;list-style:none;padding:10px 0}#PopularPosts1 ul li a:hover{color:#999}#PopularPosts li a{color:#222;font-weight:500;font-size:14px;list-style:none;line-height:1.3em;display:block;overflow:hidden}#PopularPosts1 ul li img{position:relative;z-index:2;width:102px;height:auto;object-fit:cover;float:left;display:inline-block;transition:all .3s}#PopularPosts .item-thumbnail{background:#f1a7a7;display:flex;align-items:center;justify-content:center;width:102px;max-height:68px;border-radius:8px;overflow:hidden;float:left;margin:-10px 13px 0 0;position:relative}#PopularPosts ul li:nth-child(even) .item-thumbnail{background:#c3bcec}#PopularPosts1 ul li:nth-child(3n+3) .item-thumbnail{background:#eeda92}#PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}#Popular Posts .item-title{padding:0;margin:0;text-align:left}.Night #PopularPosts .item-thumbnail,.Night #PopularPosts ul li:nth-child(even) .item-thumbnail,.Night #PopularPosts ul li:nth-child(3n+3) .item-thumbnail{background:#1c2733}</style>

Setelah itu klik Tombol Simpan Tema. 

Nah itulah Cara Memodifikasi Widget Populer Post di Blogger, selamat mencoba wassalam. 


Sudar