Sebelum membahas cara membuat "entri pupoler lebih keren" sebaiknya sobat masuk dulu ke Dasbor Blogger sobat, Pilih Tata Letak, Klik Widget HTML Entri Populer yang sobat udah pernah pasang, pilih jumlah entri yang akan dimunculkan sesuai keinginan sobat, setelah itu klik SIMPAN.
Cara Membuat Entri Populer Lebih Keren :
1.Pertama pasti masuk dulu ke akun blogger sobat
2.Klik Rancangan -> Edit HTML
3.Jangan lupa centang Expand Widget Template atau backup dulu templatenya
4.Cari kode ]]></b:skin> untuk mempermudah pencarian tekan CTRL+F
5.Setelah ketemu Letakkan kode berikut di bawah kode ]]></b:skin>.
2.Klik Rancangan -> Edit HTML
3.Jangan lupa centang Expand Widget Template atau backup dulu templatenya
4.Cari kode ]]></b:skin> untuk mempermudah pencarian tekan CTRL+F
5.Setelah ketemu 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>
.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.Setelah selesai mengedit klik SIMPAN
Selamat Mencoba.
mantap tipsnya gan. salam sukses selalu.
BalasHapuswow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.
BalasHapusterimakasih banyak gan, sangat bermanfaat sekali artikelnya..
BalasHapus