Dalam walkblogging saya beberapa waktu yang lalu, saya menemukan sebuah artikel yang membahas tentang bagaimana cara membuat Widgwt Popular Post yang menurut saya cukup inovatif dan smart. Yang menarik dari Widget Popular Post ini, lain daripada yang lain, tampilannya cukup ellegan dan menurut saya cukup bagus untuk mempercantik tampilan blog yang biasanya menggunakan Popular Post “jadul” yang gitu-gitu aja. Popular post model ini kelihatannya juga keren untuk digunakan untuk memajang produk bagi Anda yang memiliki toko online.
Namun sayang tutorial aslinya menggunakan bahasa Inggris, dan parahnya lagi tidak bisa dicopy sehingga bagi Anda yang bahasa Inggrisnya pas-pasan akan mengalami kesulitan jika harus menterjemahkannya ke Google Translate karena tidak bisa dicopy paste ke penterjemahnya Google ini. Tapi don’t worry, saya akan membuat tutorialnya untuk Anda dengan bahasa kita tercinta, dan semoga Anda bisa dengan mudah memahaminya.
Cara pasang widget popular post
Oiya, untuk memastikan widget ini bejerja dengan baik, saya telah mencobanya dan Alhamdulillah… berfungsi sebagaimana mestinya. Anda bisa melihat screenshootnya dalam salah satu Blog saya dibawah ini:
Bagaimana sedulur…? Apa Anda tertarik untuk memasangnya juga?
Caranya tidak terlalu sulit kok, hanya dibutuhkan ketelitian saja dan yang lebih penting Anda harus punya kuota (hehehe… bercanda). Oke deh teman… Mari kita mulai tutorialnya:
Sebelum memulai melakukan editing terhadap HTML template, pastikan sudah terpasang widget Popualar Post dalam Blog Anda dan sudah disetting seperti gambar dibawah ini. Pada pilihan tampilkan silahkan centang pada thumbail gambar dan cuplikan.
1. Langkah pertama, buka template HTML Anda dan temukan tag </head>, untuk mempermudahnya silahkan gunakan shortcut dengan tekan Ctrl+F dan ketikan </head> pada kotak search pada bagian kanan atas, seperti gambar dibawah ini. Setelah itu ENTER
2. Setelah ketemu pastekan CSS dibawah ini tepat diatas tag </head> sepertigambar diatas
<style type='text/css'>
.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: 0px;
margin: 0px 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: 0px;
right: 0px;
margin: 0px 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;
}
</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 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px 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: 0px;
right: 0px;
margin: 0px 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;
}
</style>
3. Cari tag <head> dan pastekan kode dibawah ini tepat dibawahnya
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
4. Cari tag </body> dengan cara yang sama seperti diatas dengan menggunakan Ctrl+F, seperti dibawah ini:
5. Setelah ketemu silahkan pastekan Script dibawah ini tepat 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>
<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: Jika dalam template Anda sudah terdapat JQuery silahkan Anda hapus kode berwarna diatas.
Baca juga: Cara Meningkatkan Pengunjung Blog Dengan Tema Mobile Friendly
6. Terakhir SAVE template Anda.
Popular Post yang Anda pasang pada Blog akan membuat pengunjung mengetahui artikel mana yang banyak dibaca oleh pengunjung lainnya, disamping itu Widget popular post ini juga akan membuat Blog Anda tampil menawan dan ellegan, Selamat mencoba
إرسال تعليق