Assalmualaikum Wr,Wb Salam
Blogger Kali ini CrepictDGZ dan PazBlog
yang 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/AVvXsEi49wOBmFcSB9Kx69Aaq_I5FqXDl8hpIhEqtUD5w6-iUzn2Sm4CnoKNgKzD-YVpfw7z2Z3WdY56ALbl4xl3kcBccOqlHo-N7BVW5MHEoWkH7DWmGnbqy3waQ9X_wVHyygl5cnzWOPFJgps/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….