Membuat Widget Recent Posts Thumbnail memiliki banyak ragam dan tampilan, tergantung modifikasi dan lay out serta keinginan dari pengguna atau pemilik blog.
Beberapa waktu yang lalu blog Dinamika telah mengulas beberapa widget yang sebaiknya di pasang di blog, antara lain widget blog popular posts dan recent posts. Masing-masing widget sebenarnya memiliki beragam tampilan. Twitter widget atau youtube widget saja bisa dimodifikasi baik dengan menggunakan iframe atau hanya menggunakan kode script tanpa iframe.
Sebelumnya juga telah dikupas tentang cara membuat blog tampilan menarik dengan menambahkan widget blog. Termasuk juga dengan widget recent posts. Ada recent posts yang menggunakan slider gambar, ada yang menggunakan thumbnail (ikon gambar kecil dari artikel), ada yang hanya berupa snippet (cuplikan), dan masih banyak lagi.
Kali ini blog Dinamika akan mengulas tentang membuat widget Recent Posts dengan thumbnail yang diciptakan (dalam konteks blog berarti dimodifikasi) oleh Maskolis, seorang template creator atau template designer lokal (asli Indonesia) yang karya-karya desain templatenya telah diulas oleh sejumlah web designer dunia.
Salah satu kelebihan dari widget blog recent posts dengan thumbnail hasil modifikasi Maskolis ini adalah menampilkan gambar icon/thumbnail postingan artikel, bisa diatur jumlah postingan yang akan ditampilkan, dan terdapat tombol/button previous - home - next sebagai navigasi postingan artikel berdasarkan urutan waktu posting terbaru.
Ingin tahu cara membuat atau memasangnya di blog sobat blogger sekalian ? Ini cara nya :
- Masuk ke dashboard blogger (blogspot) sobat
- Pilih template
- Masuk ke Edit Template/template editor (halaman edit template), namun sebelum memodifikasi sebaiknya disimpan dulu tampilan template blog sobat yang sekarang dengan klik Cadangkan/Pulihkan, lalu klik Unduh Template Lengkap.
- Centang tanda Expand Template Widget
- Untuk kode CSS, cari kode ]]></b:skin> (dapat dilakukan dengan menekan tombol F3 pada PC / laptop sobat untuk memudahkan pencarian)
- Di atas kode tersebut, masukkan kode CSS berikut ini :
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_yfQi514k_4tCJCz-ar6sGKvBCcWNMTbvrBGYhA8HlsMGKdIe6_jg_rP_rpU0REnnRxPUuoZ1C-FUUXruURm3odkPJuwhQGTdSR0r_Mn9tyJvFq6Ehax4tsw0onTnc-fgl6VGYO0x9fA/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
>>> Perhatikan warna biru height : 70px dan width:70px adalah ukuran gambar/thumbnail
- Selanjutnya, cari kode </head>
- Diatas kode tersebut masukkan/copy paste kode berikut :
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://portaldinamis.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTy9XLZjJfGlnc7hpePoy8ORtO-XJtitUQprV9eN-Qgp_my4YqopFQXbnTlTunQyvVXdKAfr-W3GXQ5IUlvcorjeL7IteHiAYcisuMGy2aULq7jp5kTn_isfdqqHwIEdv5rXqKzj7F-Q/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
>>> Perhatikan kode warna merah, ganti http://portaldinamis.blogspot.com/ dengan alamat blog sobat.
>>> Perhatikan kode warna biru, var numfeed = 5 adalah jumlah artikel, ganti sesuai keinginan.
>>> Perhatikan kode warna pink, var charac = 100 adalah jumlah karakter cuplikan, ganti sesuai keinginan.
Setelah itu simpan dengan klik save template,
- Setelah klik save template, sobat blogger masuk ke halaman lay out pada opsi sebelah kiri dashboard blogspot sobat.
- Setelah di halaman lay out, pada halaman elemen (silakan mau di elemen mana, apakah sidebar, atau footer) klik Add Gadget > HTML/Javascript
- Pada window/jendela dari widget HTML/Javascript tersebut, masukkan kode berikut :
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
Setelah itu klik save dan lihat hasilnya. Tentunya lebar dan tinggi widget recent posts dengan thumbnail dari Maskolis ini harus disesuaikan dengan lebar halaman blogspot sobat, dan lebar sidebar sobat. Selain itu juga perlu mempertimbangkan berat dan kecepatan loading blog sobat.
Selamat mencoba.
