Selamat siang kwn bloger semua... setelah kemaren saya membahas ENTRY POPULER KEREN GAMBAR BERPUTAR sekarang masih tentang entry populer juga dengan tampilan yang beda dan keren tentunya.. silahkan lihat gambar di atas ....
oke sedikit penjelasan semoga cukup paham ea :) sekrang kita ke cara mebuta entry populer keren ini
setelah itu masuk ke edit html cari kode ]]></b:skin> lalu ambil kode di bawah ini paste 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>
silahkan dilihat gimana hasilnya.. semoga bermanfaat okey jangan lupa likenya juga follow yaaa
oke sedikit penjelasan semoga cukup paham ea :) sekrang kita ke cara mebuta entry populer keren ini
- pertama masuk ke akun Blogger
- kedua klik Rancangan
- lalu tambahkan gadget entri populer (pada "rincian post" jangan di centang)
- lalu klik simpan
setelah itu masuk ke edit html cari kode ]]></b:skin> lalu ambil kode di bawah ini paste 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>
***
silahkan dilihat gimana hasilnya.. semoga bermanfaat okey jangan lupa likenya juga follow yaaa
3 komentar:
Keren tuh kang css'nya... :) Pengaruh sama kecepatan loading juga gak ya?
salam,
@Guru Pantura setiap data yang masuk pasti akan ada pengaruhnya mas guru tapi sudah saya coba pada
http://cemeses.blobspot.com
silahkan nilai sendiri gimana menurut anda :)
thanks sob
Posting Komentar
Terima kasih atas pesan dan saran agan bloger semuanya, mohon tidak membuat komentar yang bersifat sara, pornografi,kotor dan kata-kata yang tidak sopan ...
(\(\
(='_')
|><|