Widget Popular Post Keren

Ilmu Informatika : Widget Popular Post Keren. Pada kesempatan kali ini saya akan membagikan tips untuk memperindah tampilan blog pada bagian Popular post. Fungsi dari populer post sendiri adalah memberi tahu kepada pengunjung mengenai postingan apa saja yang paling sering dikunjungi, bisa dibilang sebagai tranding topic.
Oke, berikut adalah tampilannya.

Gimana? keren kan?

Membuat widget popular post keren

bagi yang berminat ikuti langkah-langkah berikut ini.
  1. Buka blogger sobat. www.blogger.com
    Untuk mencegah hal-hal yang tidak diinginkan sobat bisa membackup template terlebih dahulu. See cara membackup template.
  2. Pilih Template -> Edit HTML
  3. Cari kode ]]></b:skin> untuk mempermudah bisa gunakan Ctrl+F kemudian ketikkan kode tersebut.
  4. Selanjutnya sobat copy kode berikut.
    
    /*Custom Popular Post*/
    .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;text-align:justify}
    .PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
    .PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
    .PopularPosts ul li a{color:#fff!important}
    .PopularPosts ul li a:hover{color:#2c3e50!important}
    .PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
    .PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
    /* Pengaturan Warna */
    .PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
    .PopularPosts ul li:nth-child(2){background-color:#f39c12;}
    .PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
    .PopularPosts ul li:nth-child(4){background-color:#27ae60;}
    .PopularPosts ul li:nth-child(5){background-color:#e67e22;}
    .PopularPosts ul li:nth-child(6){background-color:#d35400;}
    .PopularPosts ul li:nth-child(7){background-color:#3498db;}
    .PopularPosts ul li:nth-child(8){background-color:#2980b9;}
    .PopularPosts ul li:nth-child(9){background-color:#ea6153;}
    .PopularPosts ul li:nth-child(10){background-color:#c0392b;}
    .PopularPosts .item-thumbnail{margin:0 0 0 0}
    .PopularPosts .item-snippet{font-size:11px}
    
  5. Pastekan kode yang sudah di copy tadi tepat di atas kode ]]></b:skin>
  6. Kemudian save template
Nah itu merupakan langkah-langkah untuk menghiasi popular post.
Selanjutnya adalah customize atau pengaturan pilihan yang dipilih untuk memperindah. Baik popular post tersebut ada berapa postingan yang ditampilkan, di kasih gambar atau tidak, dan ada cuplikan atau tidak.
    Untuk langkah-langkah tersebut tentunya sobat semua sudah pada tau kan.
  1. Buka blog sobat
  2. Pilih Layout -> pilih bagian popular post
  3. Lihat gambar berikut.

    Image thumbnail : Centang untuk menampilkan beserta gambarnya, jika tidak ingin tidak usah dicentang
    Snippet : Centang untuk menampilkan cuplikannya, jika tidak ingin tidak usah dicentang
  4. Display up to: Tentukan jumlah postingan yang akan ditampilkan (sebaiknya tampilkan sepuluh)
Oke, silahkan dilihat hasilnya :)
Demikian artikel mengenai Widget Popular Post Keren. Semoga bermanfaat untuk sobat semua.
Nikmati Jasa & Layanan yang ada di www.isrul.com, diantaranya:
1. Jasa Pembuatan dan Verifikasi Akun Paypal dengan VCC (Valid 2 atau 3 Tahun)
2. Jual Akun Adsense Non Hosted Indonesia (0899-5832-699)
3. Penulis Tamu di Isrul.com

0 Response to "Widget Popular Post Keren"

Post a Comment

Jika anda bertanya, jangan lupa mencentang "Notify Me" di bagian kanan bawah, agar mendapat pemberitahuan jika pertanyaan anda telah kami jawab.
Terimakasih telah menyempatkan waktu berkomentar...