Membuat Widget Populer Post Keren di Blog |
Ghiyats Blogs - Hai, Sob... Pada Artikel kali ini Ghiyats Blogs ingin berbagi widget Populer post, berbeda pada umumnya kalau Populer post hanya terdiri dengan gambar dan cuplikan artikel tersebut, kalau yang ini beda karena menggunakan
CSS, Dan Tampilannya lebih keren dan menarik.
Cara membuatnya sangat simpel sekali sob, karena hanya memasukan sedikit kode di dalam
template, seperti tutorial dan cara pemasangan
widgetnya seperti dibawah ini :
Cara Membuat Widget Populer Post Keren di Blog
---------------------------------------------------------------------------------------
- Masuk Ke Blogger, Dengan akun Anda
- Pergi ke Menu ''Template'' >>> Edit HTML
- Cari kode ]]></b:skin> Setelah ketemu taruhlah kode css di bawah ini Sebelum kode tersebut
/* The CSS Code */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
- Setelah selesai, Simpan Templatenya
CARA PEMASANGANYA :
- Pergi ke Menu ''Tata Letak''
- Klik ''Tambah Gadget'' >> Pilih Gadget ''ENTRI POPULER''
- Atur Pengaturannya pada ''Tampilan'' Centang ''Thumbnail gambar'' Dan Jangan Centang ''Cuplikan''
- Sekarang Simpan Gadgetnya
Demikianlah artikel ini ''
Membuat Widget Populer Post Keren di Blog'' maaf kalau artikel di atas terlalu sikat dan semoga artikel ini bermanfaat dan bisa dipratekan dengan mudah, Silakan berkomentar tentang artikel di atas di kolom komentar di bawah ini.
Keep Blogging
