Cara Membuat Gadget Popular Post Berwarna Warni

TutorialBlog46 - Cara Membuat Gadget Popular Post Berwarna Warni - Sebelum kita tahu bagaimana membuat tampilan gadget popular post tampak lebih menarik maka ada baiknya jika baca tulisan mengenai bagaimana cara menambah gadget atau widget kedalam blog terlebih dahulu.

Nah, jika sudah baca tulisan tersebut maka kita bisa langsung membahas mengenai tampilan popular post. Seperti kita ketahui bahwa dengan menampilkan gadget ini kedalam blog berarti kita telah mempermudah pengunjung untuk mengetahui topik tulisan yang paling sering dibaca oleh pengunjung lain [ya semacam navigasi blog lah plus dibumbui dengan tampilan yang luar biasa cantiknya dibanding dengan default-nya :) ]

Untuk membuat tampilan gadget popular post nampak seperti gadget popular post media blog ini maka kita perlu melakukan beberapa langkah saja. Yang pertama adalah memasang terlebih dahulu gadget popular post kedalam blog dan kedua adalah memasang kode CSS kedalam template blog.

Untuk lebih jelasnya bagaimana membuat gadget popular post berwarna warni maka silahkan disimak dan diikuti beberapa langkah berikut ini [dengan sabar ya bro :) jangan buru-buru karena cara ini sudah dipraktekkan dan berhasil :) lihat contoh di sidebar kanan ini ya!]

Cara Membuat Gadget Popular Post Berwarna Warni

Cara Memasang Gadget Popular Post

1. Log in kedalam akun blogger
2. Pilih menu [Tata Letak]
3. Pilih letak sidebar (tempat gadget popular post diletakkan) >> klik Tambah Gadget
4. Pilih Popular Post >> lakukan pengaturan

5. Simpan

Cara Memasang Kode CSS Kedalam Template Blog

1. Log in kedalam akun blog
2. Pilih menu [Template] >> Edit HTML
3. Letakkan kode berikut dibawah ini diatas kode ]]></b:skin>

#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:88%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:86%}
#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:82%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:80%}
#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:78%}
#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:76%}
#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:74%}
#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:72%}
#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:20px;height:20px;text-align:center;font-size:14px;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:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 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;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

4. Simpan Template >> Selesai

Perlu disampaikan bahwa kode CSS diatas hanya mengatur popular post sebanyak 9 buah dan jika ingin menambahkan atau mengurangi silahkan untuk memodifikasinya begitu juga dengan ukuran dan warnanya [ya memang harus sedikit tahu mengenai CSS (Cascading Style Sheet) sieh bro :) kalau Saya pasang 5 popular post sudah cukup :)]

Jika kita ikuti langkah-langkah cara membuat gadget popular post berwarna warni dengan teliti dan sabar maka dapat dikatakan bahwa cara tersebut mudah untuk dilakukan dan dimodifikasi :) untuk itu silahkan dicoba dan semoga sukses [Selesai/]