Membuat Widget Entri Populer Cantik

Membuat widget entri populer cantik. Bagi sobat bloger yang suka memperhatikan penampilan blog, kali ini saya ingin share cara membuat widget entri populer yang tampil cantik dan menarik, seperti ini penampilannya;

Dengan tampilan widget artikel terpopuler seperti di Makhasin's Blog ini mudah-mudahan dapat menambah cantik blog Anda.
Bagi anda yang berminat silahkan ikuti langkah-langkahnya yang cukup mudah berikut ini.
1. Login ke blog anda
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>
 #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

7. Klik simpan, jika anda ragu lihat preview dulu dengan cara klik pratinjau, nah jika sudah oke cantik klik simpan. Tralalaaa... bagus coy....

Ok semoga artikel membuat widget entri populer cantik ini berguna bagi sobat bloger.

Menarik untuk Dibaca:

Trik Blog

• Akibat Jarang Update Blog
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Segera Nonaktifkan Arsip Blog Anda
• Cara Mengatasi Kredensial OpenID
• Mendulang Trafik dan dollar dari Easyhits4u
• Survey Dibayar Dollar dan Triffic
• Menimbang Penting Tidaknya Buku Tamu
• Melihat Posisi Artikel di Google
• Membuat Background pada Judul Sidebar
• Mengatur Gerak Teks Menggunakan Mouse
• 2 Langkah Pasti Mendatangkan 1 Juta Pengunjung
• Cara Mempertahankan Alexarank
• Membuat Artikel Tampil di Halaman Pertama Google
• Cara Membuat Video Dalam Posting
• Cara Membuat 3 Kolom Tambah Gadget
• Ping Spesial Agar Googel Langsung Mengindeks Artikel
• Trik Jitu Mempercepat Loading Blog dengan Compres CSS
• Trik Mengaktifkan Fitur Simpan dan Keluar pada Mozilla Firefox 4

Tutorial

• Akibat Jarang Update Blog
• Cara Membuat Email Khusus PNS
• Menampilkan Data Dengan Memasukkan PIN
• Memproteksi dan Menyembunyikan Formula Excel
• Membuat Background pada Excel
• Membuat Tombol Menu Pada Excel
• Menyembunyikan Tab Sheet pada Excel
• Memberi Warna Angka Otomatis di Excel
• Memberi Warna Otomatis pada Cell
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Tutorial Melakukan Disput Payza
• Segera Nonaktifkan Arsip Blog Anda
• Cara Ampuh Melindungi Acoount Gmail
• Menambahkan Rekening Bank ke Payza
• Transfer Saldo Egopay ke Payza
• Menambahkan Kartu Debet Payza ke Akun Paypal
• Cara Membuat Akun Egopay
• Cara Aktivasi Kartu Debit Payza