Popular Post Widget Gambar Thumbnail Besar untuk Blog Toko Online
October 30, 2015
Cara membuat, menampilkan, atau memasang widget Popular Posts (Entri Terpopuler) plus Gambar Thumbnail Besar. Cocok untuk Blog Toko Online.
KITA bisa menemukan berbagai gaya atau model widget popular post keren, unik, dan menarik. Salah satunya widget popular posts yang CB kira sangat cocok buat blog toko online yang "wajib" menampilkan gambar produk.
Gaya populer posts yang di-share Help Blogger ini juga cocok banget buat blog foto (phlog), blog video (vlog), blog kecantikan, fashion, dan niche blog lain yang bergambar menarik dan layak ditonjolkan.
Ini penampakan Popular Post Widget Gambar Thumbnail Besar. Keren 'kan?
Cara memasangnya sangat mudah. Namun, pastikan dulu Anda setting widget popular postsnya seperti gambar berikut ini, yaitu mencentang (cek lis) bagian "image thumbnail" dan "snippet". Jumlahnya antara 1 s.d. 10, sebaiknya 5 saja biar gak terlalu ngaruh ke loading blog.
2. Masukkan kode CSS Popular Post berikut ini di atas kode </head>
3. Jika Anda ingin tampilan yang persis sama dengan gambar screen-shot di atas, yaitu menggunakan font Oswald, maka tambahkan kode berikut ini di bawah kode <head>
4. Tambahkan kode berikut ini di atas kode </body>
Catatan: kode warna merah gak usah disertakan jika template Anda sudah ada kode jQuery.
5. Save Template!
Kini widget Popular Post Widget dengan Gambar Thumbnail Besar sudah terpasang di sidebar blog Anda.
Anda bisa memilih tampilan widget Popular Post keren lainnya di Macam-Macam Tampilan Popular Posts untuk Blogger. Good Luck! (http://www.contohblog.com).*
KITA bisa menemukan berbagai gaya atau model widget popular post keren, unik, dan menarik. Salah satunya widget popular posts yang CB kira sangat cocok buat blog toko online yang "wajib" menampilkan gambar produk.
Gaya populer posts yang di-share Help Blogger ini juga cocok banget buat blog foto (phlog), blog video (vlog), blog kecantikan, fashion, dan niche blog lain yang bergambar menarik dan layak ditonjolkan.
Ini penampakan Popular Post Widget Gambar Thumbnail Besar. Keren 'kan?
Cara memasangnya sangat mudah. Namun, pastikan dulu Anda setting widget popular postsnya seperti gambar berikut ini, yaitu mencentang (cek lis) bagian "image thumbnail" dan "snippet". Jumlahnya antara 1 s.d. 10, sebaiknya 5 saja biar gak terlalu ngaruh ke loading blog.
Cara Pasang Popular Post Widget Gambar Thumbnail Besar
1. Template > Edit HTML2. Masukkan kode CSS Popular Post berikut ini di atas kode </head>
<style type='text/css'>
.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: 0px;
content: "";
height: 0;
width: 0px;
left: 0px;
right: 0px;
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: 0px auto;
left: 0px;
right: 0px;
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: 0px 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;
}
</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: 0px;
content: "";
height: 0;
width: 0px;
left: 0px;
right: 0px;
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: 0px auto;
left: 0px;
right: 0px;
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: 0px 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;
}
</style>
3. Jika Anda ingin tampilan yang persis sama dengan gambar screen-shot di atas, yaitu menggunakan font Oswald, maka tambahkan kode berikut ini di bawah kode <head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
4. Tambahkan kode berikut ini di atas kode </body>
<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>
<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>
Catatan: kode warna merah gak usah disertakan jika template Anda sudah ada kode jQuery.
5. Save Template!
Kini widget Popular Post Widget dengan Gambar Thumbnail Besar sudah terpasang di sidebar blog Anda.
Anda bisa memilih tampilan widget Popular Post keren lainnya di Macam-Macam Tampilan Popular Posts untuk Blogger. Good Luck! (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Popular Post Widget Gambar Thumbnail Besar untuk Blog Toko Online
Post a Comment