Wednesday 9 January 2013

Membuat Popular Post dengan Efek Hover menggunakan CSS

Postingan kali ini membahas tentang tutorial membuat Popular Post dengan menggunakan efek hover menggunakan kode CSS, hasil tampilannya seperti terlihat pada blog ini (sebelah side bar), elegan bukan hehehe.

Caranya sebagai berikut.
  • buka akun blogger anda
  • Masuk ke menu Layout >> Add Gadget >> Popular Post (itu jika anda belum menggunakan widget artikel populer, kalau sebelumnya dah ada abaikan step ini) lalu buat dengan pilihan seperti pada gambar dibawah ini:


  • lalu save
  • terus masuk ke menu edit HTML, jangan lupa centang Expand Template Widget 
  • Cari kode ]]></b:skin>
  • Copy kode dibawah ini lalu paste di atas kode  ]]></b:skin> tadi
.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDB_K1Z6AMTwxYNAC2rQRD1qV00A2UwWz0ukMJX93aBg2U3IC35eZlibZeRCv14QauDnvsBMrl0ZV31erbegIWs9sKHcUwZYolyj5SdOIgzmRyCcBISXE6wbQ-9FmEoRyEMxqoFuHWbB4/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px; list-style-type: none; margin: 0 0 5px 0px; padding: 5px 5px 5px 33px !important; border: 1px dashed #dddddd; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .popular-posts ul li:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3wVPjWylYRozFzH2lRZVVEkAFTMbRVp9i86xVD3VmB19wKxbHwvFOh0JLAV3VNNvoM6laHMTKZYj9oV97wX9yhm2mgfMdQp7Vp6r6E2PIw5eMB3suvrD2emGUTVUH2MUrkVgF5c43Lc/s1600/rb+mark+icon...jpg) no-repeat 2px; border: 2px solid #b60000; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .popular-posts ul li a:hover { text-decoration:none; }
  • Selesai 


WAJIB BACA!
Sebuah Penghasilan Online paling realistis dan anti SCAM, bukan bisnis online tapi kerja online. Kerja Online cuma dengan mengetik kode captcha, anda digaji dollar. Silahkan baca postingan kerja online ketik captcha klik disini

Share artikel ini :
Labels:

Artikel Terkait

Silakan Berkomentar Melalui Akun Facebook atau Akun Blogger Anda



0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Jika menggunakan akun blogger, silakan isi komentar di bawah. Jika ingin menampilkan emoticon, cukup copas kodenya yang tertampil di sebelah kanan emoticonnya. Please No Spam, No Porn, No Junk!

CATATAN. Tampilan komentar di blog ini menggunakan sistem scroll, jika ada postingan yang sudah banyak komentarnya, maka untuk melihat komentar terakhir dari sobat perlu ditarik scrollnya sampai ke bawah, atau jika masih belum muncul berarti ada page berikutnya maka klik "newest" terlebih dahulu baru kemudian tarik scroll-nya ke bawah.

zonatyper tutorial kerja ngetik captcha
Langganan Artikel via Email