5 Popular Post Gambar Keren dan Elegan - Populer post merupakan sebuah widget yang menampilkan artikel yang banyak di kunjungi baik itu per harian, per ahad atau per bulan. Widget ini berfungsi menampilkan artikel-terbaik kamu.
Berbicara Populer Post, berbagai desain yang mengatakan 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 menentukan popular post dengan tampilan gambar alasannya ialah dengan adanya gambar dapat menambah nilai seni dan keindahan pada tampilan template kamu. Mungkin ada dari kau yang bertanya-tanya, di aakshare sendiri kok nggak memakai widget popular post? kembali lagi pada ulasan diatas, semua itu kan tergantung dari selera kita hehehe...
Untuk kau yang sedang mencari Popular post dengan tampilan menarik dan elegan, disini saya akan menyebarkan dua terkenal post super duper keren. Dalam hal pemasangan kau dapat ikuti panduannya langkah demi langkah dibawah ini.
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 terkenal pos terpasang, langkah selanjutnya kita memasang instruksi di dalam editor template.
Note : Apabila sebelumnya sudah ada instruksi terkenal post terpasang, sebaiknya kau hilangkan alasannya ialah instruksi dapat bentrok.
Langkah 2
Style Popular Post #1
1. Masih dalam posisi login di akun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi dibawah ini dan pastekan diatasnya.
4. Selanjutnya, kau cari kode ]]></b:skin>, kemudian copy instruksi di bawah ini dan pastekan diatasnya.
5. Simpan template
Screnshoot Populer Post Kode diatas
Style Popular Post #2
1. Login ke akun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi dibawah ini dan pastekan diatasnya.
4. Langkah berikutnya, kau cari kode ]]></b:skin>, kemudian copy instruksi di bawah ini dan pastekan diatasnya.
5. Simpan Template
Screnshoot Populer Post Kode diatas
Style Popular Post #3
1. Login ke akun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi dibawah ini dan pastekan diatasnya.
4. Langkah berikutnya, kau cari kode ]]></b:skin>, kemudian copy instruksi di bawah ini dan pastekan diatasnya.
5. Simpan Template
Screnshoot Populer Post Kode diatas
Style Popular Post #4
1. Login ke akun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi dibawah ini dan pastekan diatasnya.
4. Langkah berikutnya, kau cari kode ]]></b:skin>, kemudian copy instruksi di bawah ini dan pastekan diatasnya.
5. Simpan Template
Screnshoot Populer Post Kode diatas
Style Popular Post #5
1. Login ke akun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi dibawah ini dan pastekan diatasnya.
4. Langkah berikutnya, kau cari kode ]]></b:skin>, kemudian copy instruksi di bawah ini dan pastekan diatasnya.
5. Simpan Template
Screnshoot Populer Post Kode diatas
Dari ke-5 terkenal post diatas, mana pilihan kamu? Silahkan tentukan pilihan yang kau suka. Untuk informasi, silahkan beri tahu kami melalui kotak komentar.
Sumber http://www.websiteedukasi.com/
Berbicara Populer Post, berbagai desain yang mengatakan 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 menentukan popular post dengan tampilan gambar alasannya ialah dengan adanya gambar dapat menambah nilai seni dan keindahan pada tampilan template kamu. Mungkin ada dari kau yang bertanya-tanya, di aakshare sendiri kok nggak memakai widget popular post? kembali lagi pada ulasan diatas, semua itu kan tergantung dari selera kita hehehe...
Untuk kau yang sedang mencari Popular post dengan tampilan menarik dan elegan, disini saya akan menyebarkan dua terkenal post super duper keren. Dalam hal pemasangan kau dapat 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 terkenal pos terpasang, langkah selanjutnya kita memasang instruksi di dalam editor template.
Note : Apabila sebelumnya sudah ada instruksi terkenal post terpasang, sebaiknya kau hilangkan alasannya ialah instruksi dapat bentrok.
Langkah 2
Style Popular Post #1
1. Masih dalam posisi login di akun Blogger
2. Pilih Template, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi 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, kau cari kode ]]></b:skin>, kemudian copy instruksi 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, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi 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, kau cari kode ]]></b:skin>, kemudian copy instruksi 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, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi 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, kau cari kode ]]></b:skin>, kemudian copy instruksi 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, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi 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, kau cari kode ]]></b:skin>, kemudian copy instruksi 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, kemudian klik Edit HTML
3. Kemudian kau cari instruksi </body> dan copy instruksi 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, kau cari kode ]]></b:skin>, kemudian copy instruksi 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 terkenal post diatas, mana pilihan kamu? Silahkan tentukan pilihan yang kau suka. Untuk informasi, silahkan beri tahu kami melalui kotak komentar.
Sumber http://www.websiteedukasi.com/
