Loading...

Cara Memasang Widget Popular Post Dengan Automatic Numbering

Apakah bisa menambah widget popular post dengan penomoran otomatis? keren,kan?.Seperti yang kalian tahu,Widget populer post/entri popular merupakan hal yang sangat berpengaruh bagi blog kalian,karena berguna mempercantik tampilan maupun memperbanyak pengunjung blog kalian.

Cara Menambahkan Entri Popular
  • Blogger > Tata Letak
  • Klik "Tambahkan Gadget"  
  • Pilih "Entri Populer"
  • Kalian harus mengatur terlebih dahulu tampilannya,jangan centang/uncheck "Thumnail Gambar" dan juga "Cuplikan" agar tampilan menjadi lebih rapi. 
  • Simpan!!!
Cara Mengatur Plugin Entri Popular

  • Blogger > Template
  • Backup Template dahulu
  • Klik "Edit HTML" 
  • Cari code  </b:skin>. Klik panah hitam yang berada disamping kiri code tersebut
  •  Copy code dibawah ini dan letakkan tepat diatas </b:skin>
    /*--- MBT Popular Posts --- */
    .popular-posts ul {
    padding-left: 0px;
    counter-reset: popcount;
    }
    .popular-posts ul li:before {
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    counter-increment: popcount;
    content: counter(popcount);
    font-size: 16px;
    background: #292D30;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    font-family: georgia;
    float: left;
    border: 2px solid #dddddd;
    box-shadow: 1px 2px 9px #666666; }
    .popular-posts ul li {
    border-bottom: 1px dashed #dddddd;
    }
    .popular-posts ul li:hover {
    border-bottom: 1px dashed #696969;
    }
    .popular-posts ul li a {
    text-decoration:none; color:#5A5F63;
    }

    .popular-posts ul li a:hover {
    text-decoration:none;
    }

Pengaturan:
  1. Untuk mengganti warna background ,tinggal edit #292D30
  2. Untuk mengganti warna teks,tinggal edit #ffffff
  3. Untuk mengganti ikon persegi menjadi lingkaran,tinggal tempelkan code dibawah ini sesudah code box-shadow: 1px 2px 9px #666666
border-radius:15px;
  • Simpan dan lihat hasilnya!! 


Sumber : http://sukeae.blogspot.com/2013/06/cara-memasang-widget-popular-post.html

0 comments:

Post a Comment

*Sebelum pergi, Harap Tinggalkan Link dan Komentar Anda*

 
TOP