5 Widget Popular Posts Dengan Efek Hover Border Dan Background Color

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Popular Posts Dengan Efek Hover Border dan Background ColorSebelumnya saya pernah mengetengahkan cara menambahkan widget popular posts pada blog, widget bawaan blogger tersebut merupakan widget popular posts berdasarkan page view yang tampilannya standart, pada kesempatan kali ini insyaAllah saya ingin berbagi cara memodifikasi widget popular posts dengan menambahkan efek hover border dan background color.

 

Contohnya seperti screen shoot disamping atau silahkan lihat dulu live demo dengan mengklik button berikut:

View Demo
 

Tertarik untuk mencobanya? Silahkan Ikuti langkah-langkah berikut:

1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan tidak mencenteng kotak kecil thumbnail dan snippet. Kemudian simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini

2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>

3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>

Kode untuk efek hover border bottom color:

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(http://2.bp.blogspot.com/-mHasN2HnXao/T13V551gSDI/AAAAAAAABG4/2QusUUv6maY/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;
}

Kode untuk efek hover border rounded color

.popular-posts ul{padding-left:0px;} 

.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px; 

list-style-type: none; 

margin:0 0 5px 0px; 

padding:5px 5px 5px 20px !important; 

border: 1px solid #dddddd

border-radius:10px; 

-moz-border-radius:10px; 

-webkit-border-radius:10px;

}

.popular-posts ul li:hover { 

border:1px solid #6BB5FF

}

.popular-posts ul li a:hover { 

text-decoration:none; 

}

Kode untuk efek hover border rounded dan background color

Seperti kode diatas, hanya anda tambahkan saja pada kode berikut kode background color seperti berikut:

.popular-posts ul li:hover { background: #CCE9FD;border:1px solid #6BB5FF; }

Perhatikan kode berwarna biru diatas adalah kode warna yang digunakan untuk hover border dan backgroundnya, anda bisa mengganti warnanya sesuai keinginan anda, untuk referensi kode warna bisa lihat tool kode warna disini

Demikian tutorial membuat widget popular posts dengan efek hover border dan background color, semoga bermanfaat.

Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

Selamat berkreasi!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

5 komentar :

  1. Kayaknya bagus widget ini untuk blog kedua saya nih. Ijin coba dulu ya, sis.
    Makasih sharingnya :)

    BalasHapus
    Balasan
    1. Silahkan dicoba. Terimakasih juga tuk apresiasinya.

      Hapus
  2. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  3. saya bingung dengan positngan ini, bisa sobat jelaskan cara membuat popular post simple seperti punya sobat

    BalasHapus
    Balasan
    1. Kok bingung padahal khn tinggal copy kode CSS :-? Coba dibaca dengan baik uraian diatas ya! Ini widget popular posts bawaan blogger sob, tambahkan dulu widgetx, kemudian masukkan code CSS yang anda pilih diatas kedalam template anda! Ups :-s

      Hapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!