Membuat Entri Populer Tampil Lebih Menarik

Setelah kemarin Blog Oto Website membahas tentang Cara Membuat Entri Populer Dengan Fungsi Scroll, dan sekarang Blog ini akan membahasa tentang . . . masih tentang Entri Populer sih. Tapi beda postingan beda tema ya . . .
Dan kali ini blog ini mencoba share tentang Membuat Entri Populer Tampil Lebih Menarik, maksudnya pasti udah pada tau kan, intinya kali ini kita mencobat membuat atau memodifikasi Entri Populer di blog sobat agar semakin lebih menarik!
Lihat gambar berikut:

Entri Populer Tampil Lebih Menarik

Nah cotohnya seperti pada gambar di atas, jadi kita akan membuat Entri Populer di blog sobat menjadi sepertti itu, gambarnya menjadi bundar-bundar, hehehe . . .
Oke mari sekarang kita bahas cara memasangnya di blogger sobat :

1.Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Tambah Gadget(di bagian mana saja sobat ingin widget Entri Populer muncul)

3. Pilih Entri Populer, lalu simpan.

4. Selanjutnya pada menu Klick Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget.

5. Lalu Backup dulu templatenya untuk berjaga-jaga ➨ Dalam Edit template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

6. Jika sudah ketemu sekarang sobat copy kode CSS berikut dan paste atau letakkan di atas kode tadi.

<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>

7. Klick pertinjauan terlebih dahulu, Jika sudah muncul klick simpan.

Nah sekian dulu untuk kali ini, semoga bisa bermanfaat untuk sobat semua.

Bagaimana, apakah sobat berhasil menerapkannya ke blogger sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!