Cara Membuat Popular Pos Warna Warni - CSS Rainbow Popular Post

Cara Membuat Popular Pos Warna Warni - CSS Rainbow Popular Post sengaja saya upload disini agar tidak terlupakan, itung-itung bisa berbagi kepada Mas Bos yang nyasar ke blog ini ya... Xixixixiii...

Sebenarnya Script berbasis CSS ini sudah banyak digunakan olh para Master di situs-situs sejenis untuk mengikuti jejak tampilan OS Windows 8  di bagian menu dan background yang berbentuk kotak-kotak dan warna-warni sepeti Pelangi di angkasa.
Cukup ramai dan membuat lebih hidup memang...seperti blog ini kali ya...(kembali ngaco ngomongnya  )

Orkess deesss... Langsung saja menuju ke kode nya ya... :

• Sebelumnya seperti biasa login ke blogger.com » pilih template » edit html.
• Untuk mempercepat  pencarian dengan mengetik "Popular Post", klik Edit Template untuk melihat caranya.
• Jika sudah ketemu di Template Mas Bos, sekarang hapus kode tersebut dan ganti dengan kode di bawah ini :
  
  /* -- POPULAR POST -- */<br />.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;}<br />.PopularPosts .widget-content ul li{position:relative;padding:10px !important;}<br />.PopularPosts .widget-content ul li:first-child {background:#815540;width:93%}<br />.PopularPosts .widget-content ul li:first-child:after{content:"01";}<br />.PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%}<br />.PopularPosts .widget-content ul li:first-child + li:after{content:"02";}<br />.PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%}<br />.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;}<br />.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}<br />.PopularPosts .widget-content ul li:first-child:after,<br />.PopularPosts .widget-content ul li:first-child + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after<br />{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold}<br />.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px}<br />.PopularPosts .widget-content ul li a{color:white;text-decoration:none}

Hasilnya akan seperti di sidebar blog ini (kalau belum saya ganti ya...) atau gambar dibawah ini :

 

Cukup mudah bukan... oh iya pada warna setelah "background..." bisa dirubah sendiri sesuai selera dengan klik warna html untuk pilihanya.

 

Semoga tidak Mubadzir... (",)

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Rumah Helper. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Rumah Helper dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Senin, 10 Februari 2014