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/AVvXsEjAygS87QrXkM6UQu6odMJ9Wosgh3nyBFTlYlEQ-DWQO44XmWwZe4VyKWEVeliOqgwQoJkQAzwX2bYoNGPx8jlW4iGmxaVDVZjw5lCYron5gIjTRLY8eWSdXigw8BOQsxoUA5Qgk3amrjY/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 .
