Kostumisasi Widget Popular Post Keren di Blogspot
Membuat widget popular post keren di blogspot | Popular post merupakan salah satu diantara widget penting yang harus ada di blog. Tujuan dari popular post sendiri adalah supaya pengunjung dapat dengan mudah mengetahui apa yang sedang populer di blog kita saat ini. Biasanya popular post di sandingkan dengan recent post atau random post.Selain itu popular post bisa juga meningkatkan SEO kita dengan mengandalkan strategi page view internal dalam blog. Namun dengan catatan, popular post harus dibuat semenarik mungkin sehingga bisa menarik perhatian daripada pengunjung blog yang kita kelola. Makanya banyak sekali kostumisasi popular post yang beredar diinternet terutama pada website tutorial tentang blogspot.
Cara membuat Widget Popular Post Keren di Blogspot
Kami akan cantumkan beberapa kostumisasi popular post hasil dari blogwalking saya di situs helplogger.blogspot.com dan menyalinnya dengan tutorial bahasa Indonesia agar anda bisa menerapkannya dengan benar (terutama bagi yang tidak bisa bahasa inggris, walaupun saya juga litle-litle understand, wkwkwkwkkwk,, :D )Langkahnya adalah sebagai berikut :
Memasang Widget
Jika anda belum mempunyai Entri Populer silakan buat dengan langkah dibawah ini.1. Buka "Tata Letak".
3. Kemudian pilih "Entri Populer"
4. Pada Jendela baru silakan atur seperti pada gambar.
5. Simpan
Memasukkan Javacript
Selanjutnya adalah memasukkan javascript-nya.Silakan buka "Template" klik edit HTML cari </body> dengan cara pencet tombol Ctrl+F pada munculan dipojok kanan atas bidang edit HTML silakan tulis </body> lalu tekan enter.
Silakan copy-paste kode dibawah dan taruh diatasnya.
<script type='text/javascript'>
$(document).ready(function(){$(".sidebar-wrapper li .item-thumbnail a img",$(this)).each(function(){var t=$(this).attr("src").replace("/s72-c/","/s0-c/");$(this).attr("src",t)})}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,20),s=t.lastIndexOf(" ");s>6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,50),s=t.lastIndexOf(" ");s>42&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
</script>
Nb : pastikan anda sudah mempunyai jQuery library di template andaMemasang CSS
Untuk mendesain tampilan kita memerlukan CSS yang bisa membuat tampilan widget popular post kita menjadi semakin menarik. Silakan pilih salah satu CSS dibawah ini sesuai dengan selera dan maching-kan dengan tema blog anda.Taruh diatas ]]</b:skin>
Style #1
.sidebar .PopularPosts ul {margin: 0;padding: 0;}
.sidebar .PopularPosts ul li {list-style: none !important;padding: 0 !important;margin-bottom: 10px;}
.sidebar .PopularPosts .item-thumbnail {height: 190px;margin: 0;overflow: hidden;width: 100%;}
.sidebar .PopularPosts img {height: 100%;width: 100%;object-fit: cover;}
.sidebar .PopularPosts .item-title a {color: #FFFFFF;text-transform: uppercase;font-size: 20px;
padding: 10px;position: absolute;right: 0;left: 0px;margin: 0px auto;text-align: center;text-decoration: none;top: 40px;width: 80%;
height: 40px;overflow: hidden;z-index: 2;}
.sidebar .PopularPosts .item-snippet {background: rgba(0, 0, 0, 0.35);border-top: 6px solid rgba(0, 0, 0, 0.1);border-bottom: 6px solid rgba(0, 0, 0, 0.1);color: #FFFFFF;left: 0px;right: 0px;margin: 0px auto;padding: 65px 60px 10px;position: absolute;font:italic 12px/1.5em "Georgia",Times,FreeSerif,serif;text-align: center;top: 35px;width: 60%;z-index: 1;}
.sidebar .PopularPosts .item-content {position: relative;}
Style #2
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0}
.sidebar .PopularPosts ul li{width:100%;list-style:none!important;padding:0!important;margin-bottom:20px;position:relative;border:0}
.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;height:120px}
.sidebar .PopularPosts .item-thumbnail{width:100%;position:relative;margin-bottom:5px}
.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0,0,0,0) none repeat scroll 0 0;border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0;content:"";height:0;width:0;left:0;right:0;margin-left:auto;margin-right:auto;position:absolute;z-index:3}
.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:italic 15px georgia,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;text-align:center;margin:0 auto;left:0;right:0;z-index:4}
.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:120px;object-fit:cover}
.sidebar .PopularPosts .item-title{font-size:17px;font-weight:700;text-transform:uppercase;text-align:center;margin:0 auto;border-bottom:1px solid #000}
.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none}
.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:italic 12px/1.5em Georgia,Times,FreeSerif,serif;text-align:center}
Style #3
.sidebar .PopularPosts ul{padding:0;margin:0;display: inline-block;}
.sidebar .PopularPosts .item-thumbnail a{clip:auto;height:auto;overflow:hidden}
.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0 10px 0 0 !important;position:relative;float:left}
.sidebar .PopularPosts .item-thumbnail img{position:relative;height:100%;width:100%;object-fit:cover}
.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden}
.sidebar .PopularPosts ul li:first-child{background:#D9EDF7}
.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE}
.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8}
.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0}
.sidebar .PopularPosts .item-title{font-size:15px;font-weight:700;line-height:1em;text-transform:uppercase;padding:10px 5px}
.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none}
.sidebar .PopularPosts .item-snippet{font:italic 12px/1.5em georgia,Times,FreeSerif,serif;padding-right:5px}
.sidebar .PopularPosts .widget-content ul li{padding:0 5px 0 0 !important}
Style #4
.sidebar .PopularPosts ul{padding:0;display:inline-block}
.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:.9}
.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%}
.sidebar .PopularPosts ul li{box-sizing:border-box;position:relative;padding:0!important;width:49%;max-height:120px;opacity:.4;overflow:hidden;float:left;-webkit-transition:all .5s ease 0;-moz-transition:all .5s ease 0;-ms-transition:all .5s ease 0;-o-transition:all .5s ease 0;transition:all .5s ease 0}
.sidebar .PopularPosts ul li:hover{opacity:1}
.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%}
.sidebar .PopularPosts ul li img{box-sizing:border-box;width:100%;height:100%;object-fit:cover;padding:0}
.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1}
.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.93) 100%,rgba(0,0,0,0.85) 100%);text-decoration:none;position:absolute;text-align:center;font-size:13px;text-transform:uppercase;line-height:1.2em;font-weight:700;left:0;right:0;bottom:5%;padding:100px 10px 9px;opacity:0;visibility:hidden}
.sidebar .PopularPosts .item-snippet{display:none}
Style #5
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;display:inline-block}
.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative}
.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255,0.63);content:counter(popularcount, decimal);counter-increment:popularcount;font-size:70px;list-style-type:none;position:absolute;left:10px;top:25px;z-index:4}
.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0,0,0,0.3);bottom:0;content:"";height:100px;width:100px;left:0;right:0;margin:0 auto;position:absolute;z-index:3}
.sidebar .PopularPosts .item-thumbnail a{clip:auto;height:auto;overflow:hidden}
.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0 10px 0 0 !important;position:relative;float:left}
.sidebar .PopularPosts .item-thumbnail:hover:before{display:none}
.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0!important;height:100%;width:100%;object-fit:cover}
.sidebar .PopularPosts .item-title{font-size:16px;font-weight:700;line-height:1em;text-transform:uppercase;padding:8px 5px}
.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none}
.sidebar .PopularPosts .item-snippet{font:italic 12px/1.5em georgia,Times,FreeSerif,serif}
.sidebar .PopularPosts .widget-content ul li{padding:0 5px 0 0 !important}
.sidebar .PopularPosts .item-content{padding:5px 0;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative}
Silakan edit sendiri css diatas jika belum sesuai dengan keinginan anda. Suatu contoh misalnya warna huruf atau jenis huruf bisa diganti dengan yang anda maksudkan.
Demikian tutorial tentang membuat widget popular post di blogspot. Semoga bermanfaat. Terima kasih telah membaca artikel ini. Wassalam!!
