skip to main | skip to sidebar

INFOIKI

tutorial untuk mengedit, mempercantik,membuat, dan memperindah blog template seo gratis

  • Home
  • Template
  • Ebook
  • Kata Mutiara
  • Tips Blog
  • Video
  • Umum
 

Dapatkan Update!

Dapatkan artikel terbaru dari INFOIKI yang akan dikirim ke email anda secara gratis!
Browse » Home » Ngeblog » Membuat Popular Post dengan efek Hover [Baru!]

Membuat Popular Post dengan efek Hover [Baru!]

                                           Membuat popular post dengan efek hover di blog
Aplikasi & Fitur 
1. Dengan Favicon
2. Efek Hover
3. Jika mouse diarahkan ke suatu link dalam widget tersebut, otomatis garis abu-abu akan berubah sesuai dengan warna link blog anda.
4. Anda bisa memodifikasi widget ini sesuka hati.
5. Dengan CSS.

Cara Membuat
1. Klik Tata Letak, lalu klik Add gadget.

2. Pilih Widget Popular Post/Entri Populer.

3. Isikan judul Popular Post blog anda, lalu tentukan jumblah post yang tampil. Jangan lupa untuk tidak mencentang kolom thumbnail gambar/Image Thumbnail &  Cuplikan/Summary.
4. Lalu, klik Simpan/Save.

  Eeeit, Tunggu Dulu Gan!! Tampilan Popular Post dengan cara diatas, masih manual (Standard), tanpa efek hover. Nah, untuk memberikan efek hover pada popular post, letakkan kode dibawah ini, diatas kode ]]></b:skin>.


<style> /*--- Www.infoiki.blogspot.coM Popular Posts --- */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRn4zVII7VlBx9ZN4BeyjPN8-wJ1JxXaYgs1qlPB7rKNPPEhpYybFSfNwLLO_OKfxIdH0C6vYBD1YeY_vBh78vmSGAe4WxBb-b4P37AJQ9iAzIhUwUQva5QcX0DplIWHXon0nCbUbc_w/s1600/helperblogger-list-style-icon.png) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:8px 5px 7px 22px !important; border-bottom: 2px dotted #dddddd; } .popular-posts ul li:hover { border-bottom: 2px solid #6BB5FF; } .popular-posts ul li a:hover { text-decoration:none; } </style>

  Kode diatas adalah kode css Popular Post. Silahkan agan modifikasi sendiri. Setelah berkreasi, jangan lupa klik Save template. Dan Selesai!

                                                            Selamat Berkreasi! :)

Posted By Efendy bloggers | -

Comments :

1
Blogger Klaten mengatakan... on 
19 April 2013 pukul 17.24

sip gan keren,, dah tak praktekin.
klau ukuran huruf di perkecil gmna sob??

http://sibloggerklaten.blogspot.com

Posting Komentar

Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D

←  Posting Lebih Baru Posting Lama  → Beranda
Langganan: Posting Komentar ( Atom )

Statistik

Statistic Blog:
PageRank Checking Icon
SEO Reports for infoiki.blogspot.com

Pencarian

Kategori

  • Advertiser
  • Diet
  • Ebook gratis
  • Facebook
  • Handphone
  • Jasa Like
  • Kata Kata
  • Komputer
  • Kontes SEO
  • Ngeblog
  • Review‎
  • Software
  • Template
  • tips trik ngeblog
  • Umum
  • Video

Terpopuler

  • Software Hack Wifi GRATIS [WzCook.exe]
  • Kumpulan template blog Imut dan cantik (Blogspot)
  • Download template blog Anime keren
  • Cara paling ampuh membuka situs yang diblokir telkom
  • 3 langkah mudah membuat banner sendiri
  • Software SMS gratis lewat pc/komput [free download]
  • Cara menghapus virus dengan cara manual menggunakan CMD
  • 7 Cara mudah menghafal script tanpa hafalan
  • tips Cara merawat ayam serama
  • Trik mudah membuat header blog bergerak (Gif)

Pengikut

Diberdayakan oleh Blogger.
.

Send Quick Massage

Nama

Email *

Pesan *

 
INFOIKI
Template by Infoiki | Powered by Blogger