Cara Membuat Widget Popular Post Dengan Gambar Round Corner

Cara Membuat Widget Popular Post Dengan Gambar Round Corner - Sobat tahu tidak? Ternyata,Widget Popular Post ini sangat banyak digemari di dunia blogger ini karena banyak sekali para blogger yang memasang Widget Popular Post ini untuk mempercantik blog. Nah,apalagi di dalam Tutorial Blog para blogger banyak yang membahas tentang Cara memodifikasi widget Popular Post ini dengan style yang berbeda-beda.

Sobat blogger tahu tidak kelebihan yang dimiliki Widget Popular Post yang menggunakan gambar Round Corner ini jika sobat menggunakannya? Kelebihan Widget Popular Post ini adalah sebagai berikut :

1. Widget ini menggunakan Efek Hover pada tampilannya.

2. Thumbnail gambar tidak kotak,karena menggunakan gambar Round Corner.

3. Background terpisah di setiap judul posting.

4. Dan widget ini menggunakan efek Round Corner (Sudut Bulat).

Nah,Cara Termudah Menerapkan kode Widget Popular Post ini dengan cara sebagai berikut :

1. Sign-in ke blogger.com terlebih dahulu.

2. Pada menu drop-down, sobat pilih template dan klik " Edit HTML "

3. Carilah kode ]]></b:skin> 

4. Lalu tempatkan kode berikut sebelum kode ]]></b:skin>

/* Kode CSS tutorialblogspot.com */
.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
.popular-posts ul li a{font-style:italic}
.popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
.popular-posts ul
li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}

5. Simpanlah template tersebut dan tinggal di konfigurasi.

Cara konfigurasi Widget Popular Post sangatlah mudah, caranya ada di bawah :

1. Setelah sobat menerapkan kode diatas tadi,sobat klik Layout ( Tata Letak )

2. Klik add a gadget.

3. Lalu tambahkan Widget Popular Post

4. Setelah itu hilangkan tanda centang pada " Snippet " atau " Cuplikan "

5. Dan sobat tinggal Klik Save ( Simpan ).

Nah,sangatlah mudahkan membuat Widget Popular Post dengan gambar Round Corner ini ? Jadi,sobat bisa mempercantik blog dengan memasang Widget Popular Post Round Corner ini dengan mudah dan cepat. Selamat mencoba !!!