"Merah, kuning, hijau dilangit yang biru" seperti itulah salah satu bait lagu yang sering saya nyanyikan sewaktu masih duduk di bangku taman kanak-kanak. Lagu tersebut berjudul pelangi. Yups warna pelangi yang terdiri dari berbagai warna ada merah, kuning, hijau dan biru terasa sejuk dan enak untuk dipandang mata. Begitupula dengan hal-hal disekeliling kita atau di blog kita, tentu dengan perpaduan warna yang pas maka blog kita akan semakin berwarna dan tentunya kita akan semakin semangat dalam memposting artikel-artikel baru, dan pembaca juga betah lama-lama untuk menelusuri setiap artikel di blog kita.
Seperti warna pelangi yang ada merah, kuning, hijau dan biru. Maka kesempatan kali ini Amirs ID akan membagikan tutorial Membuat Widget Popular Post Warna Warni layaknya sebuah pelangi, tentunya akan semakin mempercantik tampilan blog kalian semuanya dan berbeda dari tampilan popular post yang lainnya. Tutorial ini diperoleh dari salah satu blogger yang cukup populer terutama para pencari template premium yaitu Arlina Fitriyani.
Saya rasa kalian semua sudah tahu bukan, fungsi dari widget popular post? Yaitu sebuah widget yang berfungsi untuk menampilkan beberapa artikel terpopuler atau yang sering dilihat dari keseluruhan artikel yang ada di blog kalian berdasarkan konfigurasi waktu yang telah ditentukan, baik itu setiap saat, 30 hari terakhir atau 7 hari terakhir. Baik langsung saja, biar tidak terlalu banyak ceramah, ikuti langkah-langkah dibawah ini dalam membuat sebuah widget popular post warna warni.
Cara Membuat Widget Popular Post Warna Warni
1. Silahkan masuk terlebih dahulu kedalam akun blogger kalian di www.blogger.com
2. Lakukanlah sedikit konfigurasi terlebih dahulu di Tata Letak > Gadget Popular Post seperti yang terlihat pada gambar dibawah ini
 |
| Konfigurasi Popular Post |
Jika blog kalian sudah terpasang sebuah CSS untuk popular post silahkan dihapus terlebih dahulu, agar tidak terjadi hal yang tidak diinginkan3. Setelah itu, pilih menu Template > Edit HTML > Kemudian carilah kode ]]></b:skin> atau </style>
4. Masukkan kode CSS dibawah ini, tepat berada di atas kode ]]></b:skin> atau </style>
/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);} Hapus kode yang berwarna kuning jika kalian memilih widget tidak berwarna-warni
5. Kemudian tambahkan kode jQuery dibawah ini tepat berada di atas kode </body>
<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!.-:;]*$/,"..."))});
//]]>
</script> 6. Simpan Template dan lihat hasilnya di halaman blog kalian
Seperti itulah tadi tutorial bagaimana cara membuat sebuat Widget Popular Post Warna-Warni layaknya sebuah pelangi. Cukup sekian dan terimakasih.
