Tampilan Popular Post Gambar & Judul Keren untuk Blogger
March 25, 2016
Tampilan Popular Post Gambar & Judul Keren untuk Blogger.
BANYAK jenis atau gaya popular post, posting terpopuler, artikel terpopuler, atau entry populer untuk dipasang di sidebar blogger.
Blog foto, video, atau toko online baiknya menampilkan popular post berupa gambar plus judul, seperti gambar berikut ini:
Berikut ini kode dan cara pemasangannya sebagaimana dishare TechOra. Lakukan dengan teliti dan tampilan masih bisa dimodifikasi di bagian kode CSS.
1. Template > Edit HTML
2. Simpan kode berikut ini di atas kode </body>
3. Copas kode berikut ini di atas kode ]]></b:skin> atau </style>
4. Save template!
Setelah terpasang, tambahkan widget populer post dan CENTANG hanya bagian IMAGE. Bagian SNIPPET jangan dicentang.
BANYAK jenis atau gaya popular post, posting terpopuler, artikel terpopuler, atau entry populer untuk dipasang di sidebar blogger.
Blog foto, video, atau toko online baiknya menampilkan popular post berupa gambar plus judul, seperti gambar berikut ini:
Berikut ini kode dan cara pemasangannya sebagaimana dishare TechOra. Lakukan dengan teliti dan tampilan masih bisa dimodifikasi di bagian kode CSS.
Cara Memasang Widget Popular Posts Gambar Thumbnail Besar & Judul
Hapus dulu kode popular post sebelumnya (jika ada). Cari saja (Ctrl+F) Popular Post di bagian kode CSS dan hapus jika ditemukan.1. Template > Edit HTML
2. Simpan kode berikut ini di atas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$('#PopularPosts1').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});
image.attr('width',tbn);
image.attr('height',tbn);
});
});
//]]></script>
/***** Sidebar Popular Posts *****/
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;
height: 130px;
list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 100%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla Animation duration*/
-o-transition-duration: 1.0s; /*Opera Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;}
4. Save template!
Setelah terpasang, tambahkan widget populer post dan CENTANG hanya bagian IMAGE. Bagian SNIPPET jangan dicentang.
Gaya popular post di atas mirip dengan widget posting terpopuler keren lainnya. Good Luck! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
kalau untuk widget yg lain, misal; recent post, per label bisa gak gan? adakah caranya?
ReplyDeletedan cara hilangkan nomor urutnya?
ReplyDeletePake aja kode yang ada, jangan dibikin susah :)
DeleteKalau membuat gambar popular postnya jadi bulat gimana min?
ReplyDeleteTerima kasih.
Pake aja kode yang ada, jangan dibikin susah :)
Delete