Berikut ini adalah salah satu dari style-style widget popular post yang dibagikan. Memasang widget Popular Post yang menarik tentu akan menarik perhatian pengunjung untuk mengklik dan membaca artikel lain di blog kita, nah langsung saja berikut adalah style popular post yang keenam setelah sebelumnya telah membagikan popular post yang kelima.

Popular Post For Blogger (Style 6)
Popular Post For Blogger (Style 6)

1. Pasang widget popular post di blog kamu caranya masuk pada blog Blogger kamu, pilih "Tata Letak" selanjutnya pilih tempat dimana kamu akan menambahkan widget ini "Tambahkan Gadget" selanjutnya pilih "Entri Populer" dan setting seperti ini:
Konfigurasi entri populer

2. Letakan script dibawah ini diatas </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. Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.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:48%; 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 0 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:0 8px 1px 1px; border-radius:0 0 10px 0; position:absolute; top:0; z-index:4; border:solid #FFF; border-width:0 2px 2px 0; }
4. Save template dan selesai.


Bagikan ke

0 Komentar