Widget Popular Posts Dengan Efek Hover Border Dan Background Color -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Widget Popular Posts Dengan Efek Hover Border Dan Background Color, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Popular Posts, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Widget Popular Posts Dengan Efek Hover Border Dan Background Color
link : Widget Popular Posts Dengan Efek Hover Border Dan Background Color
Gambar dibawah ini

Widget Popular Posts Dengan Efek Hover Border Dan Background Color

Sebelumnya 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgargDTpOT7PmU63gXy7SxCQHzF1jghGwqhauRfh1q15aovpTYzbrevvnBHQDdTn6PvFbtdr5uf1TVomZvpO_6OmWFNusSFIZfAeHFeL1DDcBA7DNvYsC_GNU9t4-iJmILVlWy9m_MxIFU/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:

• Widget Popular Posts Dengan Efek Marquee
• Widget Popular Posts Dengan Efek Spinning dan Zooming
• Widget Popular Posts Dengan Efek Animasi Spy

Selamat berkreasi!

Demikianlah Artikel Widget Popular Posts Dengan Efek Hover Border Dan Background Color

Sekianlah artikel Widget Popular Posts Dengan Efek Hover Border Dan Background Color kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Widget Popular Posts Dengan Efek Hover Border Dan Background Color dengan alamat link https://trikmitos.blogspot.com/2012/10/widget-popular-posts-dengan-efek-hover.html