7 Juli 2013

Cara membuat widget populer post dengan sudut bundar menggunakan CSS3

Posted at  13.30  |  in  widget


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.. 

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..
Semoga bermanfa'at...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 13.30
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

26 komentar:

  1. salam, script-script nya bagus-bagus, blog ini bisa jadi referensi buat bongkar-bongkar template blog saya nantinya.
    terima kasih sdh berbagi, ijin share ya boss. Salam.

    BalasHapus
    Balasan
    1. Terima kasih banyak mas TCC sampit udah berkenan berkunjung lagi, silahkan sobat dengan senang hati..

      Hapus
    2. mantap tampilan popular postnya, jadi ijin copas buat utak-atik template. makasih yah..... (h)

      Hapus
    3. ok..mas kurnia silahkan, sama-sama.. :)

      Hapus
  2. Kreatif gan..biasanya komentar dudut siku yah,,



    AdRewa, Solusi Alternatif Mendapatkan Uang dari Blog
    http://jematik.blogspot.com/2013/07/adrewa-solusi-alternatif-mendapatkan.html

    :p

    BalasHapus
    Balasan
    1. Iya, umumnya spt itu...terima kasih mas atas kunjungannya.

      Hapus
    2. maaf om saya baru bisa mampir lagi alasannya kemaren2 masih ujian...lama tak berkunjung banyak yang baru disini trimakasih widgednya keren om... :)

      Hapus
    3. Terima kasih banyak mas imron atas kunjungannya, semoga ujiannya sukses. Aamiin..

      Hapus
    4. amin... terimakasih banyak om..

      Hapus
  3. mantap gan
    mampir ya ardiyaajicandra.blogspot.com

    BalasHapus
  4. makasih kaka infonya btw ini templatenya keren abis kalo boleh tau apa ya nama templatenya :d

    visit juga ya : http://bolaries.blogspot.com/

    BalasHapus
    Balasan
    1. 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

      Hapus
  5. widget 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,,,,

    BalasHapus
  6. wah mantap surantap kang tutorialna,,,,,,,,,,
    minal aidzin walfaidzin. punten telat, hehhhee

    BalasHapus
  7. wah keren om ijin sedot ilmunya om heheheh
    salam kenal dari aq ya om :)
    http://emhan-sul-teng-palu.blogspot.com/

    BalasHapus
    Balasan
    1. Silahkan mas, dengan senang hati..alaikassalaam dan salam kenal kembali.

      Hapus
  8. lama tidak main-main kesini..
    btw yang punyablog kemana ajha mas,,?

    BalasHapus
    Balasan
    1. alaikassalaam mas imron, mhn maaf akhir2 saya banyak kesibukan sehingga blm bisa update postingan..terima kasih mas udah berkenan berkunjung lagi..salam

      Hapus
  9. Berkunjung nih Sob..

    jangan Lupa Kunjungi balik ya Blog saya di http://semuaberita.net

    BalasHapus
    Balasan
    1. terima kasih mas atas kunjungannya, insya allah segera meluncur ke TKP

      Hapus
  10. terima kasih kang tutorialnya...
    sudah saya coba terapkan di blog saya...hatur nuhun

    BalasHapus
    Balasan
    1. sami sami kang, hatur nuhun oge tos mampir..punten nembe di waler.

      Hapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top