Berbicara Populer Post, banyak sekali desain yang menawarkan tampilan yang menarik, tetapi semua itu tergantung dari selera kamu, apakah dengan tampilan yang sederhana tanpa gambar atau dengan gambar.
Jika harus memilih, saya selaku admin aak-share.com memilih popular post dengan tampilan gambar karena dengan adanya gambar bisa menambah nilai seni dan keindahan pada tampilan template kamu. Mungkin ada dari kamu yang bertanya-tanya, di aakshare sendiri kok nggak menggunakan widget popular post? kembali lagi pada ulasan diatas, semua itu kan tergantung dari selera kita hehehe...
Untuk kamu yang sedang mencari Popular post dengan tampilan menarik dan elegan, disini saya akan berbagi dua populer post super duper keren. Dalam hal pemasangan kamu bisa ikuti panduannya langkah demi langkah dibawah ini.
2 widget Popular Post Gambar Keren dan Elegan
Langkah 1
1. Login ke akun Blogger
2. Pilih Layout/Tata letak
3. Klik tambah gadget
4. Lalu pilih Entri populer
5. Simpan
Stelah widget populer pos terpasang, langkah selanjutnya kita memasang kode di dalam editor template.
Note : Apabila sebelumnya sudah ada kode populer post terpasang, sebaiknya kamu hilangkan karena kode bisa bentrok.
Langkah 2
Style Popular Post #1
1. Masih dalam posisi login di akun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Kemudian kamu cari kode </body> dan copy kode dibawah ini dan pastekan diatasnya.
<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>
4. Selanjutnya, kamu cari kode ]]></b:skin>, lalu copy kode di bawah ini dan pastekan diatasnya.
/*** Popular Post1 ***/
.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: #d8d5d5;
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;}
5. Simpan template
Screnshoot Populer Post Kode diatas
Style Popular Post #2
1. Login ke akun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Kemudian kamu cari kode </body> dan copy kode dibawah ini dan pastekan diatasnya.
<script type='text/javascript'>
// Thumbnail Popular Post
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>
4. Langkah berikutnya, kamu cari kode ]]></b:skin>, lalu copy kode di bawah ini dan pastekan diatasnya.
/***Popular Post2 ***/
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:10;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255, 255, 255, 0.88);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:11;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
5. Simpan Template
Screnshoot Populer Post Kode diatas
Style Popular Post #3
1. Login ke akun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Kemudian kamu cari kode </body> dan copy kode dibawah ini dan pastekan diatasnya.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
4. Langkah berikutnya, kamu cari kode ]]></b:skin>, lalu copy kode di bawah ini dan pastekan diatasnya.
/***Popular Post3***/
.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:" " ; 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 " Times New Roman" ,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 ' Oswald' ,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 " Times New Roman" ,Times,FreeSerif,serif; text-align:center; }
5. Simpan Template
Screnshoot Populer Post Kode diatas
1. Login ke akun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Kemudian kamu cari kode </body> dan copy kode dibawah ini dan pastekan diatasnya.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
4. Langkah berikutnya, kamu cari kode ]]></b:skin>, lalu copy kode di bawah ini dan pastekan diatasnya.
/***Popular Post4 ***/
.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 ' Oswald' ,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 " Times New Roman" ,Times,FreeSerif,serif; text-align:center; top:35px; width:60%; z-index:1; }
.sidebar .PopularPosts .item-content { position:relative; }
5. Simpan Template
Screnshoot Populer Post Kode diatas
Style Popular Post #5
1. Login ke akun Blogger
2. Pilih Template, lalu klik Edit HTML
3. Kemudian kamu cari kode </body> dan copy kode dibawah ini dan pastekan diatasnya.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
4. Langkah berikutnya, kamu cari kode ]]></b:skin>, lalu copy kode di bawah ini dan pastekan diatasnya.
/***Popular Post5 ***/
.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 ' Oswald' ,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:" " ; 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 ' Oswald' ,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 " Times New Roman" ,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; }
5. Simpan Template
Screnshoot Populer Post Kode diatas
Dari ke-5 populer post diatas, mana pilihan kamu? Silahkan tentukan pilihan yang kamu suka. Untuk informasi, silahkan beri tahu kami melalui kotak komentar.
No comments:
Post a Comment