Membuat Popular Post Grid Style dengan Thumbnail di Blog

Assalmualaikum Wr,Wb Salam Blogger Kali ini CrepictDGZ dan PazBlogyang masih dibawah satu bendera Admin ingin berbagi tutorial Cara Modifikasi Popular Post Blogger menjadi GRID style ( seperti pada gambar ). Widget Popular Post ini menampilkan postingan yang banyak dilihat (view oleh pengunjung ). Ukuran popularitas sebuah post ditentukan oleh seberapa sering post itu dibaca oleh pengunjung blog Sobat.

Popular Post adalah widget yang disediakan oleh Blogspot atau Blogger dengan kondisi default ( bawaan ), terkadang kita jenuh dengan tampilan yang itu itu saja dan bagi seorang NEWBIE tak ada yang bisa dilakukan  dengan tampilan tersebut selain menerima apa adanya.

Kita bisa memodifikasi tampilan Popular Post menjadi efek grid thumbnail, yaitu thumbnail dari post tersebut dibuat berjejer, seperti galeri gambar atau foto. Intinya widget modifikasi  ini bisa memberikan nuansa berbeda pada pembaca blog, untuk melihat post-post yang populer di blog kita.

Cara Modifikasi Widget Popular Post GRID style di Blog :

1. Silahkan masuk LAYOUT/Tata Letak >> Popularpost

2. Setelah muncul popup dari Widget Popularpost silahkan setting seperti gambar dibawah ini

3. Kemudian tekan SAVE/Simpan

Nah… sampai disini langkah editing untuk Widget Popularpost sudah selesai, sekarang kita akan menerapkan kode CSS kedalam Edit HTML Blog agar tampilan Widget Popularpost berubah menjadi GRID style.

Membuat Popular Post Grid Style dengan Thumbnail di Blog

1. Silahkan masuk ke Blogger >> Theme/Tema >> Edit HTML

2. Cari kode CSS dari Widget Popularpost yang sebelumnya terpasang pada template Sobat. Biasanya seperti ini #Popularpost atau .Popularpost atau #Popularpost1 gunakan Ctrl+F untuk mempercepat pencarian kodenya. Biasanya tampilannya kode CSS nya akan tampak atau umumnya seperti dibawah ini

3. Jika sudah ketemu hapus seluruh kode CSS tersebut. Lalu ganti dengan kode CSS dibawah ini

/*CSS Popular Posts */
.sidebar .popular-posts ul {counter-reset: popcount;margin: 0;padding: 0;}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {font-family:'Roboto','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;height: 130px;list-style: none !important;overflow: hidden;padding: 0 !important;position: relative;margin: 2px;border: 0;width: 48%;float: left;}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts .item-thumbnail :after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:135px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUpOun1B1t4Wjt-vMslAS1i2_uTh-20QyT2NewRvWVht0Y58y_tS6EOOQvkuHPQXN5A354GDsNRm_vxQK9uj384-AhtCY8z5HWeiGbhTcR-BO51G16JLE4WoTGYcIDx0YVOsLHB8J6THY/s1600-r/metabg.png) repeat-x;opacity:.8;background-size:100% 100%;overflow:hidden}
.sidebar .PopularPosts ul li img {display: block;float: left;padding: 0;width: 100%;height:135px;-webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/-moz-transition-duration: 1.0s; /*Mozilla Animation duration*/-o-transition-duration: 1.0s; /*Opera Animation duration*/transition:1.0s;}}   
.sidebar .PopularPosts ul li img:hover {-webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/-moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/-o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/transform:scale(1.06);overflow: hidden;}
.sidebar .PopularPosts .item-title {bottom:0;left: 0;right: 0;padding-bottom: 0;position: absolute;z-index: 999;}
.sidebar .PopularPosts .item-title a {background:none;color: #FFFFFF;display: block;font-size: 12px;text-align:center;line-height: normal;padding:5px 5px 10px 5px;text-transform: capitalize;transition: all .4s ease-in-out;}
.sidebar .popular-posts ul li:hover .item-title a {color: rgba(255, 255, 255, 1);background:none;text-decoration: none;}
.sidebar .popular-posts ul li:before {background: rgba(255, 252, 8, 1);color: #000;content: counter(popcount, decimal);counter-increment: popcount;font-size: 14px;line-height: 20px;list-style-type: none;padding: 3px 8px;position: absolute;top: 10px;left:110px;z-index: 4;}

4. Jika sudah selesai SIMPAN/SAVE. Dan lihat hasilnya…

Terkadang ada sedikit masalah terkait penggantian CSS Widget Popular Post diatas karena beberapa template ada perbedaan pada tag kodisional, namun jangan patah semangat semua bisa diatasi…

Bagaimana jika Gambar thumbnail Widget Popularpost Blog Buram atau Blur ?

Wah ….bisa puanjang nich tutorial, tapi jangan kuatir Admin sudah menyiapkan solusi dan tutorial jika terjadi BLUR atau BURAM pada gambar Widget Popularpost .

Silahkan baca : Cara Atasi GambarBuram/Blur pada Widget Popularpost

Demikian Tutorial Membuat Popular Post Grid Style dengan Thumbnail di Blog. Jika terjadi masalah atau kendala Sobat bisa menghubungi Admin lewat Contact Form yang sudah disediakan.

Terima Kasih semoga bermanfaat….