Cara Membuat Popular Post Warna-Warni

Popular Post adalah sebuah widget blog yang berfungsi untuk menampilkan daftar posting yang paling sering dikunjungi oleh visitor, widget ini sudah disediakan oleh blogger di menu tata letak. Selain itu widget ini juga dapat memperbanyak visitor yang berkunjung ke blog kita, dengan memasang widget ini dan memperindah tampilan widget ini.

Dengan memasang widget ini dengan menarik akan membuat pengunjung mengklik posting kita dan akan membuat pengunjung lebih betah berada di blog kita. dengan begitu blog kita akan lebih mudah untuk terlihat di Search Engine.

Tapi, widget popular post bawaan dari blogger tampilannya kurang menarik, dengan pengaturan yang rumit jadi para blogger akan ragu saat mengganti pengaturannya, jadi saya akan membahas tentang cara merubah tampilan widget popular post, tanpa harus berurusan dengan HTML.

Berikut ini adalah contoh popular post yang akan kita buat

Tapi sebelum membuatnya anda harus mengaktifkan widget popular post di dasbor blogger terlebih dahulu, berikut caranya:

• Pertama masuk ke menu tata letak, lalu pili tambahkan gadget dan cari entri populer
• Jangan lupa untuk mencentang Thumbnail gambar.

Jika widget telah diaktifkan sekarang tinggal memasukan CSS agar popular post terlihat lebih menarik, berikut caranya:

• Copykan code CSS berikut

/* 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;

}

.PopularPosts ul {

margin:.5em 0;

list-style:none;

color:black;

counter-reset:num;

}

.PopularPosts ul li img {

display:block;

margin:0 .5em 0 0;

width:50px;

height:50px;

float:left;

}

.PopularPosts ul li {

background-color:#eee;

margin:0 10% .4em 0 !important;

padding:.5em 1.5em .5em .5em !important;

counter-increment:num;

position:relative;

}

.PopularPosts ul li:before,

.PopularPosts ul li .item-title a, .PopularPosts ul li a {

font-weight:normal;

color:#000 !important;

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;

top:0px;

right:0px;

padding-right:0px !important;

}

• Pastekan code di atas tepat di bawah tag <style>
• Lalu simpan dan lihat hasilnya.

 Sekarang popular post anda akan berwarna-warni dan lebih menarik untuk dilihat, jika kalian memiliki pertanyaan silahkan untuk menanyakannya di kotak komentar.

Happy Blogging..........(Cara-Blogger)

Tweet