Elegant Popular Post Widget Blogger Keren Abis

Elegant Popular Post Widget Blogger Keren Abis - Halo sobat blogger, apa kabar hari ini? senang rasanya pada kesempatan kali ini saya masih berkesempatan menulis artikel kemabli diblog saya ini. Berhubungan dengan hal itu, pada artikel saya kali ini akan membahas tentang widget popular post untuk blogger yang keren abis deh, untuk tutorialnya bisa dilihat dibawah ini.

Sekilas Tentang Popular Post's
Popular Post merupakan sebuah widget yang terdapat disebuah website/blog, dimana widget ini berisi artikel/tulisan dari website tersebut yang paling sering dibuka dan dibaca oleh pengunjung website tersebut.

Jadi, menurut saya widget popular post ini sangat wajib hukumnya untuk ditampilkan di blog yang kita miliki, dengan adanya widget popular post dapat memudahkan pengunjung untuk melihat apa yang sedang trend/popular diblog kita.

live demo

Baiklah, bagi sobat yang ingin memasang Elegant Popular Post Widget Blogger ini, sobat bisa ikuti langkah-langkah sederhananya dibawah ini:

1. Menambah widget popular post blog
Jika sobat telah memasang widget popular post, abaikan langkah ini.

Namun jika belum, sobat bisa menambahkan widget popular post dengan cara: klik tata letak > add gadget > popular post's. tempatkan widget popular post di area yang tepat, usahakan biasanya dibagian sidebar blog sobat dan jangan lupa untuk memberi tanda centang pada bagian Item Snippet dan Thumbnail Gambar.

2. Menambah script CSS untuk popular post
Langkah selanjutnya yaitu menambah script css untuk mempercantik tampilan widget popular post, bisa dilakukan dengan klik tab template > edit HTML > lalu cari kode ]]></b:skin> dan paste kode berikut tepat diatas kode ]]></b:skin>

/* Popular Posts Widget customized */
.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; }

Note: pastikan sobat telah menghapus semua kode css popular post (jika ada) sebelum menambah kode css diatas pada template sobat.

3. Menambah kode Javascript
Kode javascript ini digunakan untuk me-resize gambar pada widget popular posts dan memotong summary artikel.

Untuk menambah kode javascript, sobat harus menemukan kode </body> dan pastekan kode berikut tepat diatasnya.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</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>

Note: jika template sobat telah terdapat kode jQuery, maka hapus kode jQuery pada kode diatas.

Selesai, sekarang sobat bisa menyimpan template blog dan dapat langsung melihat hasilnya. Sekarang sobat telah bisa memasang Elegant Popular Post Widget Blogger yang keren abis. Semoga bermanfaat..

script by: http://allbloggertricks.com