Senin, 01 Februari 2016

Cara Memasang Rainbow Popular Posts With Image di Blog

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..

Baca juga: Cara Mudah Memasang Headline Breaking News di Blog

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.



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

    Tags

    Tinggalkan komentar meski hanya sepatah kata
    EmoticonEmoticon