Cara Membuat Widget Blog Recent Posts Tombol/Button Previous-Home-Next

Membuat Widget Recent Posts Thumbnail memiliki banyak ragam dan tampilan, tergantung modifikasi dan lay out serta keinginan dari pengguna atau pemilik blog. 

Kali ini blogku akan mengulas tentang membuat widget Recent Posts dengan thumbnail yang diciptakan (dalam konteks blog berarti dimodifikasi) oleh Maskolis, seorang template creator atau template designer asli Indonesia yang karya-karya desain templatenya telah diulas oleh sejumlah web designer dunia. 

Salah satu kelebihan dari  Widget Blog Recent Posts Tombol/Button Previous-home-Next  hasil modifikasi Maskolis ini adalah menampilkan gambar icon/thumbnail postingan artikel, bisa diatur jumlah postingan yang akan ditampilkan, dan terdapat tombol/button previous, home dan next sebagai navigasi postingan artikel berdasarkan urutan waktu posting terbaru.

Cara membuat atau memasangnya di blog sobat, Ini cara nya :

1. Masuk ke dashboard blogger (blogspot) sobat
2. Pilih template
3. 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.
4. Centang tanda Expand Template Widget
5. Untuk kode CSS, cari kode ]]></b:skin> (dapat dilakukan dengan menekan tombol F3 pada PC / laptop sobat untuk memudahkan pencarian)
6. 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/AVvXsEjkk5Bep7RUG-BbnFh_ohlOTet_i8-wl0Z1fInlPr-B1q9zbUO5wtBFtQLsnLsKcTM6KjmRLDoCPXFmXHi97fs4Ti9GV-Z5Y_IvSy9lswprxPgf570DAkQ4cFyjm8d0MZsLDV5AIsBSCyR9/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}

7. Perhatikan warna biru height : 70px dan width:70px adalah ukuran gambar/thumbnail
8. Selanjutnya, cari kode </head>
9. Diatas kode tersebut masukkan/copy paste kode berikut:

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://rileksbloggerest.blogspot.com";
var charac = 60;
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/AVvXsEhRKKG4qp8NmIWhP_c75qc8AAdeAYn7CHvPa7f3wW8vGOSsCykzA4kc62sNTerR3Pe5-pGHg3upKmWLs6hrAozTAIAHasbMvmC91Vtk7eaS9vwtgiT9cTci0iFb369hKMB0dY01t3mTTbM/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'>&#9668; Previous</a>";}
else {showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";}
if(urlnext) {showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";}
else {showblogfeed += "<span class='noactived next'>Next &#9658;</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>

10. Perhatikan kode warna merah, ganti http://rileksbloggerest.blogspot.com/ => dengan alamat blog sobat.
11. Perhatikan kode warna biru, var numfeed = 5 adalah jumlah artikel, ganti sesuai keinginan.
12. Perhatikan kode warna pink, var charac = 60 adalah jumlah karakter cuplikan, ganti sesuai keinginan.
13. Setelah itu simpan dengan klik save template.
14. Setelah klik save template, sobat blogger masuk ke halaman lay out pada opsi sebelah kiri dashboard blogspot sobat.
15. Setelah di halaman lay out, pada halaman elemen (silakan mau di elemen mana, apakah sidebar, atau footer) klik Add Gadget > HTML/Javascript
16. Pada window/jendela dari widget HTML/Javascript tersebut, masukkan kode berikut : 

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

17. 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.