Cara Membuat Widget Populer Rainbow Keren

Cara Membuat Widget Populer Rainbow Keren - Hai apa kabar?, tips mudah ngeblog kemarin memeberikan tips cara membuat widget popuelr warna warni. Sekarang saya akan memberikan versi lain namun tetap dengan widget populer menjadi warna warni tapi beda sytle (bentuknya), sehingga menjadikan template kamu lebih menarik.

Pekerjaan pemasangan widget populer post yang keren dan warna warni ini sangat mudah diterapkan di blog kamu. Untuk memasang widget populer post ini,kamu harus mempunyai (memasang) widget post populer dari bawaan template blogger. Nah kode yang akan kita pasang di template ini bertujuan memodifikasi (mengubah) bentuk populer post menjadi warna warni dan menarik.

Berikut ini langkah langkah menjadikan populer post kita berwarna warni dan menarik perhatina pengunjung di blog kita.

Pastikan kamu sudah memasang widget populer bawaan dari Blogger.

1. Login ke akun Blogger kamu.
2. Dari Dasboard klik blog kamu yang akan dipasang widged populer
3. Setelah itu klik menu Tata Letak atau Layout
4. Kemudian klik Tambah Gadget atau Add a Gadget
5. Pilih Widget Entri Populer atau Populer Post
6. Klik simpan

Langkah selanjutnya adalah menaruh kode yang akan membuat widget populer kamu menjadi pelangi (rainbow).

1. Diasumsikan widget populer kamu telah terpasang di blog yang akan diubah tampilan widget pelangi (caranya seperti diatas).
2. Dari dasboard  blog kamu pilih menu Template
3. Untuk mengantisipasi terjadi kesalahan ataupun kamu tidak cocok dengan tampilan widget populer pelangi (rainbow), save dulu template utama kamu.
4. Untuk menyimpan template utama, saat di pilihan template, pilih cadangkan/pulihkan pada pojok kanan atas.
5. Kemudian unduh template lengkap dan save atau simpan. (file ini untuk mengembalikan setingan awal)
6. Kini melanjutkan merubah menjadi widget populer rainbow. masuk kedalam menu edit HTML
7. Pada area HTML cari kode ]]></b:skin> . Agar pencarian cepat ketemu, gunakan Ctrl + F atau F3 dari keyboard kemudian ketikkan kode diatas yang dicari.
8. Setelah ketemu Copykan kode untuk mengubah widget populer menjadi Rainbow seperti di bawah ini.
9. Copykan kode diatas  kode ]]></b:skin>

/* Rainbow Popular Post Style Start */
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#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:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular Post Style End */

       10. Pekerjaan kita telah selesai dan selamat menikmati widget populer yang keren ini.

Related Post :

Posted in: Blog