Sudah lama sekali rasanya saya tidak menulis di blog kesayangan ini , ya semua itu karena begitu banyak hal-hal yang harus saya selesaikan dalam beberapa bulan terakhir sampai sampai sama sekali tidak sempat untuk menulis tutorial untuk para blogger semua .
Tapi tenang saja , karena sekarang saya kembali untuk memberikan tutorial keren untuk mempercantik dan mempercanggih blog anda dengan sedikit sentuhan pada widget popular post bawaan Blogger .
Ya , widget Popular Post adalah widget yang biasanya harus ada di dalam sebuah blog , selain untuk menampilkan artikel apa saja yang paling diminati para pembaca , widget ini ternyata punya manfaat besar juga untuk page view blog . Karena pada umumnya , artikel yang paling banyak atau sering dibaca akan memancing para pengunjung baru untuk membacanya juga .
Dan yang kali ini akan kita bahas adalah tentang bagaimana membuat popular post ini menjadi semkain keren dan atraktif dan tidak kaku seperti pada widget bawaan blogger .
Dan oke , mari kita langsung saja masuk ke metode penerapannya ke blog .
Oh iya , untuk sebelumnya silahkan lihat dulu Demo previewnya jika penasaran dengan hasil akhirnya .
Untuk menerapkan ke blog anda , silahkan ikuti langkah sederhananya dibawah ini .
Pertama silahkan pastikan widget popular post sudah anda tambahkan di blog dengan cara :
1. Masuk ke menu Layout > Add a New Gadget > Popular Post > Save .
Kemudian kita masuk ke menu template .
1. Cari kode
]]></bskin>
dan letakkan kode Css dibawah ini tepat diatasnya
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }
2. Setelah itu cari kode
</body>
dan tambahkan kode Js dibawah ini tepat diatasnya
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
<script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,120);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
3. Simpan dan lihat hasilnya di blog anda .
Kira kira seperti itu saja , dan tentu saja anda masih bisa mengedit style nya dengan merubah Css diatas .
Ada pertanyaan ? Silahkan tanyakan di komentar .
2 comments
thank you so mush :D
You're welcome :)
Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih