Membuat Widget Popular Posts Menarik

Posted by Muhammad Fiqih on 0

 

Kang Fiqih | Assalamu'alaikum wr.wb., bertemu lagi dengan saya Fiqih. Setelah kemarin saya memberikan tips untuk Membuat Blog Dengan benar, sekarang pada kesempatan kedua ini saya ingin memberikan tutorial mengenai cara membuat sebuah popular posts yang bagus dan menarik tentunya.

Biasanya popular posts yang diberikan otomatis oleh blogger.com hanya menampilkan sebuah judul, gambar dan tambahannya berupa cuplikan, namun dengan itu semua kadang kita merasa masih kurang menarik untuk dipandang. Nah, untuk itu saya disini akan membantu Anda sedikit mengenai hal tersebut.

Beranjak dari pengalaman yang saya alami, bahwa cara membuat widget popular posts itu banyak sekali caranya dan juga sangat banyak varian yang dapat kita pilih sesuai dengan keinginan kita masih-masing. Di sini saya mengambih salah satu contoh widget tersebut yang menurut saya sangat menarik karena membuat popular posts tersebut menjadi berwarna-warni serasa melihat sebuah pelangi... hehe

Langsung saja ke cara-cara pembuatannya:

1. Login ke blogger terebih dahulu.

2. Pilih Tata Letak --> Tambah Gadget --> Entri Populer/Popular Posts. Dipengaturan entri populer tersebut, Anda hanya dianjurkan untuk memilih judulnya saja, tidak perlu menggunakan gambar dan cuplikan. Andapun dapat memilih berapa postingan yang akan di tampilkan di popular posts nantinya, bisa satu, dua, tiga, dan sampai maksimal 10.

3. Klik Simpan

4. Sekarang Anda masuk ke Template. Klik Template --> Back Up terlebih dahulu template kamu.

5. Tetap di bagian Template, klik Edit HTML --> Lanjutkan --> Cari kode ]]></b:skin>. Salinlah kode dibawah ini dan letakkan tepat di atas kode ]]></b:skin> .

/* Rainbow Popular Post by http://kangfiqih.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}
/* Rainbow Popular Post by http://kangfiqih.blogspot.com*/

6. Pratinjau terlebih dahulu sebelum menyimpannya. Hal ini bertujuan supaya jika terjadi kegagalan, kita tidak perlu mengulang dari awal.

7. Jika sudah benar, maka Klik Simpan Template.

8. Nikmati dan rasakan hasilnya di blog Anda. :)

Selamat beraktivitas dan sampai jumpa ...