Cara Membuat Widget Popular Post Keren Warna Warni Model 3

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

Cara Membuat Popular Post Keren Warna Warni Model 3. beberapa hari ini secara berturut turut saya telah berbagi artikel tentang Cara membuat Widget Popular Post. kalau kita obok obok mbah google, memang ada banyak model widget popular Post yang bisa kita terapkan untuk mempercantik penampilan blog / web sobat blogger.

Untuk Widget Popular Post Model yang ke 3 (tiga) ini sobat bisa lihat Contoh gambarnya di samping tulisan ini. dan seperti widget yang lainya, pemasangannyapun sama dengan yang lain, cuma yang membedakan adalah  script Html nya. Oke Sob, langsung kita simak tutorialnya di bawah ini :

Cara Membuat Widget Popular Post Keren Warna Warni Model 3 (tiga).

LANGKAH PERTAMA.

Pastikan sobat blogger sudah menambahkan widget popular post di blog sobat, kalau belum silahkan ikuti Tips nya di bawah ini:

1. Masuk Ke Account Blogger sobat.
2. Pilih LayOut / Tata letak.
3. Pilih Add Gadget / Tambahkan Gadget.
4. Klik "ENTRY POPULER".

5. Pastikan setting pengaturan sudah sesuai keinginan sobat. (lihat gambar di bawah ini)
Centang Thumnail Jika Popular Post nanti disertai gambar, atau
Centang Cuplikan Jika Popular Post nanti di sertai deskripsi/Penjelasan Artikelnya.

6. Selesai Save/Simpan.

LANGKAH KEDUA

1. Silahkan sobat masuk ke Template dan Klik Edit Html
2. Silahkan Sobat cari kode seperti ini ]]></b:skin> atau </style>
(Gunakan Ctrl+f untuk memudahkan Pencarian).
3. Copy kode Html di bawah ini dan Pastekan tepat di atas kode  ]]></b:skin> atau </style>

Html Code.

<style type='text/css'>
/*----- popular post warna warni by farhanshare.blogspot.com-----*/
#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}
</style>

4. Selesai Save / Simpan.

Baca Juga :
Cara membuat Widget Popular Post Keren Warna Warni Model 1 (Satu).
Cara Membuat Widget Popular Post Keren Warna Warni Model 2 (Dua)

Demikian Tutorial tentang Cara Mudah membuat Widget Keren Popular Post/ Entry Popular Warna warni Model 3 (Tiga). semoga bermanfaat bagi sobat blogger semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Artikel Terkait