Dalam tutorial kali ini saya akan menjelaskan ke anda bagaimana cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Widget ini berfungsi dengan baik disetiap browser yang anda gunakan. Widget ini menggunakan CSS3 untuk memberikan efek sudut bundar pada setiap postingan populer blog anda. Silahkan ikuti langkah-langkahnya dibawah ini untuk menambahkannya di blog anda, berharap anda menyukainya...:)
Demonya bisa anda lihat pada gambar diatas..
Demonya bisa anda lihat pada gambar diatas..
Bagaimana cara menambahkannya di blog?
- Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
- Kemudian pilih-> Template -> Edit HTML
- Kemudian cari tag/kode ]]></b:skin>
- Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin>
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
- Simpan template...
- Selanjutnya masuk lagi ke akun blogger anda
- Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post
- Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:
Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri
- Simpan gadget, selesai..
salam, script-script nya bagus-bagus, blog ini bisa jadi referensi buat bongkar-bongkar template blog saya nantinya.
BalasHapusterima kasih sdh berbagi, ijin share ya boss. Salam.
Terima kasih banyak mas TCC sampit udah berkenan berkunjung lagi, silahkan sobat dengan senang hati..
Hapusmantap tampilan popular postnya, jadi ijin copas buat utak-atik template. makasih yah..... (h)
Hapusok..mas kurnia silahkan, sama-sama.. :)
HapusKreatif gan..biasanya komentar dudut siku yah,,
BalasHapusAdRewa, Solusi Alternatif Mendapatkan Uang dari Blog
http://jematik.blogspot.com/2013/07/adrewa-solusi-alternatif-mendapatkan.html
:p
Iya, umumnya spt itu...terima kasih mas atas kunjungannya.
Hapusmaaf om saya baru bisa mampir lagi alasannya kemaren2 masih ujian...lama tak berkunjung banyak yang baru disini trimakasih widgednya keren om... :)
HapusTerima kasih banyak mas imron atas kunjungannya, semoga ujiannya sukses. Aamiin..
Hapusamin... terimakasih banyak om..
Hapussama-sama mas imron..
Hapusmantap gan
BalasHapusmampir ya ardiyaajicandra.blogspot.com
terima kasih mas..ok segera ke TKP. :)
Hapusmakasih kaka infonya btw ini templatenya keren abis kalo boleh tau apa ya nama templatenya :d
BalasHapusvisit juga ya : http://bolaries.blogspot.com/
sama-sama mas aries, template ini adlh kreasi seorang master blogger profesional mas kholis nama templatenya johny ribet..silahkan googling aja. ok..segera ke TKP
Hapusmakasih infonya.
BalasHapussama-sama..
Hapuswidget seperti ini memang sangat menarik sekali, terutama untuk para blogger yang memang menyukai desain tampilan blog yang menawan dan tentu saja membuat pengunjung betah berlama2,,,,
BalasHapuswah mantap surantap kang tutorialna,,,,,,,,,,
BalasHapusminal aidzin walfaidzin. punten telat, hehhhee
wah keren om ijin sedot ilmunya om heheheh
BalasHapussalam kenal dari aq ya om :)
http://emhan-sul-teng-palu.blogspot.com/
Silahkan mas, dengan senang hati..alaikassalaam dan salam kenal kembali.
Hapuslama tidak main-main kesini..
BalasHapusbtw yang punyablog kemana ajha mas,,?
alaikassalaam mas imron, mhn maaf akhir2 saya banyak kesibukan sehingga blm bisa update postingan..terima kasih mas udah berkenan berkunjung lagi..salam
HapusBerkunjung nih Sob..
BalasHapusjangan Lupa Kunjungi balik ya Blog saya di http://semuaberita.net
terima kasih mas atas kunjungannya, insya allah segera meluncur ke TKP
Hapusterima kasih kang tutorialnya...
BalasHapussudah saya coba terapkan di blog saya...hatur nuhun
sami sami kang, hatur nuhun oge tos mampir..punten nembe di waler.
Hapus