Tampilan Popular Post Gambar & Judul Keren untuk Blogger

Oleh admin

Jumat, 25 Maret 2016

Bagikan :

Tweet

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.

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>

3. Copas kode berikut ini di atas kode ]]></b:skin> atau </style>

/***** 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! (goglazculture.blogspot.com).*

Tag : Desain Blog, Panduan Blogging