March 25, 2016

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:

Popular Post Gambar & Judul

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! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Tampilan Popular Post Gambar & Judul Keren untuk Blogger

  1. kalau untuk widget yg lain, misal; recent post, per label bisa gak gan? adakah caranya?

    ReplyDelete
  2. dan cara hilangkan nomor urutnya?

    ReplyDelete
    Replies
    1. Pake aja kode yang ada, jangan dibikin susah :)

      Delete
  3. Kalau membuat gambar popular postnya jadi bulat gimana min?

    Terima kasih.

    ReplyDelete
    Replies
    1. Pake aja kode yang ada, jangan dibikin susah :)

      Delete

Contact Form

Name

Email *

Message *