MERUBAH TAMPILAN WIDGET POPULAR POSTS PADA BLOG

Meruah dan memodifikasi widget blog,saya rasa juga sudah sewajarnya dilakukan para blogger,tidak lain tujuanya ya untuk memperindah tampilan blognya,membuat jadi senyaman mungkin dan membuat betah bila ada pengunjung di blog kita,Nah pada postingan saya kali ini,saya akan maembahas tentang cara merubah tampilan widget popular posts atau entri populer pada blog. .lebih jelasnya lihat screenshotnya sob,kurang lebih tampilanya akan jadi seperti itu. .Penasaran tentang cara merubah tampilan popular post pada blog?. 

langsung saja sob ke cara membuatnya,sangat simple dan mudah juga ga ribet. . hhe

1. Pastikan anda sebelumnya sudah memasang Popular posts/Entri populer pada blog anda.
2. Kalau sudah ada,sekarang saatnya mengedit pada tempelate anda
3. Backup dulu tempelate anda sob,untuk berjaga jaga,kalau terjadi kesalahan
4. Selanjutnya cari kode ]]></b:skin> pada tempelate anda
5. Jika sudah ketemu Copy CSS di bawah ini dan pastekan tepat di atas ]]></b:skin>

<style type='text/css'>

.PopularPosts .item-title{display:yes}

.PopularPosts ul li {

border-radius:50px 0px 0px 50px;

float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;

border: 1px solid #444;

overflow: hidden;

box-shadow: 0px 0px 1px #333;

font-style: normal;

font-weight:bold;

width: 100%;

height:60px;

border-radius:35px 5px 5px 35px;

}

.PopularPosts ul li:hover{

background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);

overflow: hidden;

color: #414141;

width: 100%;

height:60px;

border: 1px solid #ffffff;

box-shadow: 0px 0px 2px #ffffff;

}

.PopularPosts ul li img {

padding:1px  ;

margin:1px;

margin-top:3px;

border-radius:35px 35px 35px 35px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

border: 1px solid #333;

height: 50px;width:50px;

overflow: hidden;

}

.PopularPosts ul li img:hover {

border:1px solid #ffffff;

border-radius:25px 25px 25px 25px;

background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);

box-shadow: 0px 0px 10px #ffffff;

}

</style> 

Kalau sudah,preview dulu dan kalau tidak ada yang error save tempelate anda. .
Selaesai dan lihat hasilnya. . :)
Selamat mencoba dan berkreasi. .