Cara Membuat Widget Populer Post Warna-Warni (Rainbow)

Sabtu, Januari 26, 2013

Sesuai dengan judul kali ini Master Chef akan mengajak sobat blogger Dapur Tutorial Blogspot dan Seo untuk memodifikasi tampilan Widget Populer Post Warna-Warni (Ranbow). Berhubungan dengan Tutorial Blogspot kali ini, Masih ingatkah sobat dengan Tutorial Blog yang sudah master Chef bahas sebelumnya Soal  Cara Membuat Image Thumbnail Popoler Post Berputar Saat Di Sorot Mouse. Tips dan Trik Blogspot ini merupakan sebagian dari banyak cara yang digunakan blogger untuk membuat blog yang tampil unik dan menarik.

Kembali ke topik bahasan kali ini  mengenai Cara Membuat Widget Populer Post Warna-Warni (Rainbow) akan kita lakukan dengan memberikan sentuhan CSS3 untuk memodifikasi tampilannya menjadi multi color. Penasaran seperti apa jadinya jika Widget Populer Post sudah diberi sentuhan CSS3, bisa sobat Lihat Pada Gambar dibawah ini :

Nah bagiama, apakah sobat tertarik untuk menerapkan Tampilan Populer Post diatas kehalaman blog sobat?, jika sibat suka langsung saja kita bahas resepnya sebagai berikut :

Step 1. Menambahkan Widget Populer Post Kehalaman Blog.

1. Pastikan anda sudah login ke akun blogger
2. Dari Dashbord blog sobat klik menu Tata Letak Atau Layout
3. Klik Tambah Gadget atau Add a Gadget
4. Pilih Widget Populer Post/Entri Populer
5. Klik Simpan

Step 2. Menerapkan Kode CSS3 ke Template Blog

1. Silahkan masuk kehalaman Edit HTML ( Baca : Cara Mengakses Halaman Edit HTML Blogger )
2. Sebelum Melakukan Edit HTML Jangan Lupa untuk Back-Up Template blog Lengkap terlebih dahulu ( Baca : Cara Upload dan Back-Up Template Blogspot)
3. Pada Area Edit HTML cari kode seperti ini "]]></b:skin>" Agar kamu lebih mudah menemukan kode, gunakan tombol CTRL + F dan F3 untuk mencari kode.
4. Jika sudah menemukan kode tersebut, kemudian copy kode dibawah ini dan letakan diatas kode "]]></b:skin>"


#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}


5. Klik Simpan Template
6. Selesai

Nah itu dia Tips dan Trik Mempercantik Tampilan Blog dengan Membuat Widget Populer Post Warna-Warni (Rainbow). Semoga Tutorial Blog kali ini bisa membantu dan bermanfaat buat sobat blogger semuanya.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.