Popular Post For Blogger (Style 7)

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 ketujuh setelah sebelumnya telah membagikan popular post yang keenam.

Popular Post For Blogger (Style 7)
Popular Post For Blogger (Style 7)


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",sans-serif; height:130px; font-weight:bold; 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:16px; font-weight:bold; line-height:normal; font-family:"Oswald",sans-serif; padding:10px 0 5px 10px; 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.


Popular Post For Blogger (Style 6)

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.


Popular Post For Blogger (Style 5)

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 kelima setelah sebelumnya telah membagikan popular post yang keempat.

Popular Post For Blogger (Style 5)
Popular Post For Blogger (Style 5)

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 popular post

2. Letakan script dibawah ini diatas </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
3. Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; }
.sidebar .PopularPosts ul li { float:left; max-height:130px; min-width:250px; position:relative; }
.sidebar .PopularPosts .item-thumbnail::after { color:rgba(255,255,255,0.63); content:counter(popularcount,decimal); counter-increment:popularcount; font:70px &#39; Oswald&#39; ,sans-serif; list-style-type:none; position:absolute; left:5px; top:-5px; z-index:4; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0.3); bottom:0; content:&quot; &quot; ; height:100px; width:100px; left:0; right:0; margin:0 auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }
.sidebar .PopularPosts .item-thumbnail { width:100px; height:100px; margin:0 10px 0 0 !important; position:relative; }
.sidebar .PopularPosts .item-thumbnail:hover:before { display:none; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; padding-right:0 !important; height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:0 5px 10px; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
.sidebar .PopularPosts .item-content { padding:5px 0; border-bottom:1px dotted #dedede; overflow:hidden; height:100px; position:relative; }
4. Save template dan selesai.


Popular Post For Blogger (Style 4)

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 keempat setelah sebelumnya telah membagikan popular post yang ketiga.

Popular Post For Blogger (Style 4)
Popular Post For Blogger (Style 4)


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 popular post

2. Letakan script dibawah ini diatas </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
3. Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { padding:0; }
.sidebar .PopularPosts ul li:first-child { width:100%; max-height:100%; opacity:0.9; }
.sidebar .PopularPosts ul li:nth-child(even) { margin-right:2%; }
.sidebar .PopularPosts ul li { box-sizing:border-box; position:relative; padding:0 !important; width:49%; max-height:120px; opacity:0.4; overflow:hidden; float:left; margin-bottom:2%; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -ms-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.sidebar .PopularPosts ul li:hover { opacity:1; }
.sidebar .PopularPosts .item-thumbnail { margin:0; width:100%; }
.sidebar .PopularPosts ul li img { box-sizing:border-box; width:100%; height:100%; object-fit:cover; padding:0; }
.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a { visibility:visible; opacity:1; }
.sidebar .PopularPosts .item-title a { color:#fff; background:rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.93) 100%,rgba(0,0,0,0.85) 100%); text-decoration:none; position:absolute; text-align:center; font:13px &#39; Oswald&#39; ,sans-serif; left:0; right:0; bottom:0%; padding:100px 10px 10px; opacity:0; visibility:hidden; }
.sidebar .PopularPosts .item-snippet { display:none; }
4. Save template dan selesai.


Popular Post For Blogger (Style 3)

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 ketiga setelah sebelumnya telah membagikan popular post yang kedua.
Popular Post For Blogger (Style 3)
Popular Post For Blogger (Style 3)

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 popular post

2. Letakan script dibawah ini diatas </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
3. Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { padding:0; margin:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }
.sidebar .PopularPosts .item-thumbnail { width:130px; height:130px; border-right:5px solid #fff; margin:0 10px 0 0 !important; position:relative; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts ul li { float:left; margin-bottom:5px; max-height:130px; min-width:250px; overflow:hidden; }
.sidebar .PopularPosts ul li:first-child { background:#D9EDF7; }
.sidebar .PopularPosts ul li:first-child + li { background:#F2DEDE; }
.sidebar .PopularPosts ul li:first-child + li + li { background:#DFF0D8; }
.sidebar .PopularPosts ul li:first-child + li + li + li { background:#FFEEBC; }
.sidebar .PopularPosts ul li:first-child + li + li + li + li { background:#E0E0E0; }
.sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:10px 5px 10px; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; padding-right:5px; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
4. Save template dan selesai.


Popular Post For Blogger (Style 2)

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 kedua setelah sebelumnya telah membagikan popular post yang pertama.

Popular Post For Blogger (Style 2)
Popular Post For Blogger (Style 2)

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 popular post

2. Letakan script dibawah ini diatas </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
3. Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; }
.sidebar .PopularPosts ul li { width:100%; list-style:none !important; padding:0 !important; margin-bottom:20px; position:relative; border:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; height:120px; }
.sidebar .PopularPosts .item-thumbnail { width:100%; position:relative; margin-bottom:15px; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0) none repeat scroll 0 0; border-bottom:29px solid #fff; border-left:29px solid transparent; border-right:29px solid transparent; bottom:0; content:&quot; &quot; ; height:0; width:0; left:0; right:0; margin-left:auto; margin-right:auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail:after { color:#000; content:counter(popularcount,decimal); counter-increment:popularcount; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; list-style-type:none; position:absolute; bottom:0; text-align:center; margin:0 auto; left:0; right:0; z-index:4; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; width:100%; height:120px; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:15px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; text-align:center; margin:0 auto; padding-bottom:10px; border-bottom:1px solid #000; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { padding:10px 15px; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; text-align:center; }
4. Save template dan selesai.


Popular Post For Blogger (Style 1)

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 pertama.

Popular Post Blogger Style 1
Popular Post Blogger (Style 1)

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 popular post

2. Letakan script dibawah ini diatas </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
3. Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { margin:0; padding:0; }
.sidebar .PopularPosts ul li { list-style:none !important; padding:0 !important; margin-bottom:10px; }
.sidebar .PopularPosts .item-thumbnail { height:190px; margin:0; overflow:hidden; width:100%; }
.sidebar .PopularPosts .item-title { position:relative; }
.sidebar .PopularPosts img { height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts .item-title a { color:#FFFFFF; font:15px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; font-size:20px; padding:10px; position:absolute; right:0; left:0; margin:0 auto; text-align:center; text-decoration:none; top:40px; width:60%; height:26px; overflow:hidden; z-index:2; }
.sidebar .PopularPosts .item-snippet { background:rgba(0,0,0,0.35); border-top:6px solid rgba(0,0,0,0.1); border-bottom:6px solid rgba(0,0,0,0.1); color:#FFFFFF; left:0; right:0; margin:0 auto; padding:65px 10px 10px; position:absolute; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; text-align:center; top:35px; width:60%; z-index:1; }
.sidebar .PopularPosts .item-content { position:relative; }
4. Save template dan selesai.