Cara Memasang Rainbow Popular Posts With Image di Blog

Prodeku - Dalam sebuah blog biasanya terdapat widget popular post yang berada di bagian sidebar. Pada popular post biasanya terdapat thumbnail image bahkan ada juga yang terdapat cuplikan artikel. Namun, kebanyakan para sobat blogging tidak pernah menggunakan cuplikan artikel. kata mereka sih buat penuh sidebar. hehe..

Fungsi dari popular posts itu sendiri untuk memudahkan pengunjung atau pembaca mencari trend topic yang ada di blog tersebut. Tetapi, kalo tampilan popular postnya gitu-gitu aja pasti kurang menarik perhatian pengunjung untuk membaca post yang lagi trend.

Agar popular post terlihat menarik, mari kita membuatnya lebih berwarna. Tidak hanya itu, thumbnail yang biasanya terlihat kecil disini akan kita buat menjadi background dari postingan nya. Penasaran seperti apa? yuk ikuti tutorial mudahnya di bawah ini.

Widget Rainbow Popular Posts With Image

1. Buka akun blogger
2. Pilih menu Template > Edit HTML
3. Cari kode ]]></b:skin>, tambahkan kode berikut ini tepat diatas kode ]]></b:skin>
   
   

   /* Rainbow Popular Posts With Thumbnail Prodeku*/
   .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);
   }

4. Cari kode </body>, kemudian letakkan kode berikut ini tepat diatas kode </body>
   
   

   <script type='text/javascript'>
   //<![CDATA[
   // Popular Posts Thumbnail
   $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
   // Custom Popular Posts
   $(".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>

5. Simpan Template

Perlu di ingat: Apabila tampilan popular posts tidak berubah, berarti pada css sudah terdapat kode untuk popular posts (terjadi duplikat css). Sebaiknya hapus css ".PopularPosts" yang sebelumnya.

Result

Bagaimana, mudah kan? Demikian tutorial tentang Cara Memasang Rainbow Popular Posts With Image di Blog kesayangan anda dengan mudah. Selamat mencoba ...

Bayu Adji

Kuli Online, Web Designer, SEO Prodeku

Bagikan Artikel ini