Membuat Widget Popular Post Efek Snippet Sliding

Discussion in 'Blogger' started by Virlyz82, Feb 9, 2014.

  1. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    [​IMG]

    Popular Post Efek Snippet Sliding - Seperti halnya widget metro drop down sliding untuk blog gaya metro style kali ini saya akan memberikan sedikit tips sederhana memodifikasi widget popular post. Mungkin bagi kalian semua sudah tidak asing lagi dengan widget yang satu ini, setiap blog pasti mempunyai widget popular post. Widget unik ini berfungsi untuk menampilkan artikel yang sering di buka atau dibaca oleh pengunjung blog, lebih tepatnya adalah artikel populer blog. Blogger menyediakan widget ini secara default, namun untuk tampilan disetiap blog bisa saja berbeda - beda. Sebenarnya untuk costumisasi widget ini kita hanya memerlukan kode CSS untuk merubah bentuk, warna dan efeknya.

    Dibawah ini adalah contoh sederhana untuk kode CSSnya :

    .popularposts .widget-content ul li{padding:0;position:relative}
    .item-snippet {
    font-size: 90%;
    line-height: 1.2em;
    position: absolute;
    width: 200px;
    background-color: #27ae60;color:#fff;
    padding: 7px;
    border: 1px solid #27ae60;
    z-index: 2;
    left: 300px;
    top: 50%;
    height: auto!important;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
    .popularposts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
    .popularposts img{width:50px;height:50px}
    .popularposts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}


    Kita hanya perlu menambahkan kode CSS ini sebelum kode ]]>

    Untuk demonya bisa anda lihat pada Responsive Simple Metro Mini template.

    Widget unik ini akan lebih pas dan cocok dengan template blog metro style.
    Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
    Salam Blogger
     
  2. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    cocok banget nih mas, untuk

    cocok banget nih mas, untuk flat template *bagus*
     
  3. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Siip

    sesuai konsep flat metro ui mas
     
  4. egelz

    egelz Member

    Joined:
    Jan 5, 2014
    Messages:
    44
    Likes Received:
    1
    Trophy Points:
    8
    bagus tuh

    wah bagus tuh gan. Jadi lebih menarik blog kita
     
Loading...

Share This Page