Entry Populer merupakan widget blog penting untuk di pasang dan mempercantik tampilan blog kita, yang berfungsi sebagai salah satu widget untuk mengetahui Artikel mana yang sedang BOOOming atau sedang di cari banyak orang, Sobat lihat tampilan Entri populer punya saya, begitu menarik dan memanjakan pengunjung, supaya berlama-lama dan membaca semua artikel di blog ini, sebelumnya kami telah memposting yaitu bagaimana Cara Membuat recent Post Bergaya Slider dan sekarang kami coba untuk posting Cara membuat Entri Populer style... Suka dengan gambar di samping, Mauuu di pasang... Mari kita pandu step by step.. dan mudah sekali.. he..he...
1. Masuk Dasbor
2. Klik Rancangan
3. Edit HTML
4. Exspand Templat Widget (Centang)
5. Cari kode ]]></b:skin> lalu masukkan kode berikut dibawah kode ]]></b:skin>
<style type='text/css'>
.PopularPosts .item-title{display:yes}
.PopularPosts ul li {
border-radius:60px 60px 60px 60px;
float: left;list-style: none outside none;margin: 2px !important;padding: 10px !important;
border: 2px solid #444;
overflow: hidden;
box-shadow: 0px 0px 2px #333;
font-style: normal;
font-weight:bold;
width: 100%;
height:60px;
border-radius:5px 5px 5px 5px;
}
.PopularPosts ul li:hover{
background: -moz-linear-gradient(top, #000000 1%, #202020 50%);
overflow: hidden;
color: #ffffff;
width: 100%;
height:65px;
border: 3px solid #0dc3ff;
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: 4px solid #0dc3ff;
height: 60px;width:60px;
overflow: hidden;
}
.PopularPosts ul li img:hover {
border:2px solid #ffffff;
border-radius:25px 25px 25px 25px;
background: -moz-linear-gradient(top, #0dc3ff 1%, #5c5c5c 50%);
box-shadow: 0px 0px 10px #ffffff;
}
</style>
6. Klik Simpan, Lihat Hasilnya...
Selamat Mencoba dan Salam Sukses !!!
Happy Bloging... Mas ko di blog saya ga muncul gambarnya dan bagaimana agar bisa di tempatkan di tab view seperti di blog ini?...
ReplyDeleteTerimakasih
Thanks.. Coba kamu pakai kode berikut..
Delete<style type='text/css'>
.PopularPosts .item-title{display:yes}
.PopularPosts ul li {
border-radius:60px 60px 60px 60px;
float: left;list-style: none outside none;margin: 2px !important;padding: 5px !important;
border: 2px solid #444;
overflow: hidden;
box-shadow: 0px 0px 2px #333;
font-style: normal;
font-weight:bold;
width: 280px;
height:60px;
border-radius:5px 5px 5px 5px;
}
.PopularPosts ul li:hover{
background: -moz-linear-gradient(top, #CC0000 1%, #5c5c5c 50%);
overflow: hidden;
color: #414141;
width: 100%;
height:65px;
border: 3px solid #0dc3ff;
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: 4px solid #0dc3ff;
height: 60px;width:60px;
overflow: hidden;
}
.PopularPosts ul li img:hover {
border:2px solid #ffffff;
border-radius:25px 25px 25px 25px;
background: -moz-linear-gradient(top, #0dc3ff 1%, #5c5c5c 50%);
box-shadow: 0px 0px 10px #ffffff;
}
Letakkan kode di atas di bawah kode ]]></b:skin>
coba cari lagi <b:if cond='data:title'><h2><data:title/></h2></b:if>
lalu nanti akan ketemu kode <div class='widget-content popular-posts
Nah hapus kode <div class='widget-content popular-posts
dan ganti dengan kode berikut
<div class='widget-content popular-posts' style='overflow:auto;border:4px inset #ffffff;padding:0px;text-align:left;-moz-border-radius-topleft:5px;-moz-border-radius-topright:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-bottomright:0px;width:300;height:300px'>
Lalu kamu tambahkan enrti populer pada tab tersebut... Okey..
Post a Comment