Header Ads

Membuat Widget Entri Populer Tampil Lebih Menarik

Membuat Widget Entri Populer Tampil Lebih Menarik

Entri Populer Cantik
Pada kesempatan kali ini saya mau berbagi tentang cara membuat widget entri populer yang seperti terpasang di sidebar blog saat ini. Sebenarnya widget ini merupakan widget kepunyaan Blogger sendiri yang ditambahkan kode css tertentu agar tampak lebih menarik dan lain dari pada yang lain.

Bagaimana cara membuatnya? Silakan disimak langkah-langkahnya di bawah ini. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau-kalau nanti terjadi kesalahan dalam pengeditan.

4. Silakan cari kode ]]></b:skin>.

5. Letakkan kode berikut di bawah kode ]]></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>

6. Klik tombol SIMPAN TEMPLATE.

7. Pasang widget Entri Populer Anda dan konfigurasikan sesuai keinginan.

12 comments:

  1. hadir lagi gan, mantabss tutorialnya. Di bookmark dulu ah..
    trimakasih

    ReplyDelete
  2. nahhh ini dia yg sya cari gan.. hehe :D, mkasih ya gan dah di share..
    sangat bermanpaat..

    ReplyDelete
  3. @Putupunyablog sama-sama Gan, semoga bermanfaat..

    ReplyDelete
  4. klo entrinya ditambah jadi 15 bisa gak gan... gak 10...

    ReplyDelete
  5. om keren banget ini.. ini aku coba pake di blog aku
    http://berbagi.id-fb.com/ mampir ya kak

    oh mau tanya lagi kak
    tolong di share donk, caranya biar comment bisa skin nya macam punya kakak ini
    keren bget lohh :)

    ReplyDelete
  6. @cakmansays coba mampir ke sini Gan, klikmunadi.blogspot.com/2012/03/komentar-bertingkat-dengan-warna.html

    ReplyDelete
  7. Nice info kk :D, visit back yaw :)

    ReplyDelete
  8. trimakasih atas infonya mas.... saya tunggu kunjungan di blog saya http://anomali-dunia.blogspot.com/

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.