Cara paling cepat membuat widget Recent Posts dengan gambar, bukan related post

Sampai jumpa lagi dengan blog Firman Himawan. Kali ini saya akan memberikan widget baru, hehe.. maksud saya adalah tutorial widget Recent Post yang baru saja saya pasang di blog saya ini. Makanya saya beri nama ini dengan widget Recent Post. Apapun namanya, terserah anda saja, yang jelas widget ini memang dikenal dengan nama widget “Recent Post”. #oalaaah.. :D

Memang dari sejak dahulu, sebelum saya mengenal apa itu widget, apa itu recent-post, related-post, bahkan sebelum saya sama-sekali mengenal blog… #muterkemanalagi?.

Baiklah, langsung saja inilah Widget Recent Post alternative kreasi Firman Himawan Blog yang mempunyai kelebihan diantaranya :

~ Script kita Upload ke Google Drive, sehingga akan lebih ringan saat loading, dibanding jika kita menggunakan langsung JavaScript yang digunakan bersama-sama blogger-blogger lain.

Cara paling cepat membuat widget Recent Posts dengan gambar

CSS :

Silahkan kreasi CSS widget Recent-Post anda, sesuai selera tampilan yang diinginkan. Ini milik saya . Bagi anda yang sudah kenal Mas Kolis, tentu tahu gaya-gaya CSS Mas Kolis ini.. :D

#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/AVvXsEgSfiNFehoQRfwsM9BCxJQ3RFzzrujUJQc25qsWKjhOkKAhN3WVxmH416G_jZhK76_ix2kSN5m3JnKuapcdbmMTc_06ID1PouWRI92Y54eYmxM2Ar9zMVlTiJC9j4LojMplsWRtmircCLY/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}

Javascript :

Seperti yang tadi saya katakana diatas, kreasi kita kali ini adalah dengan cara mengUpload Script dibawah ini, ke Google Drive kita. Silahkan Upload dengan nama recentpostsdengangambar.js  (misalnya ini mah..).

//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://blogkamu.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/AVvXsEiFbxh9hYNLOcl9pktfmp1z20TLq9R1_Kf6r0vENUM7QONMnVQBUJMrTD3HDaAOnVUk9DCYKN95qvdWAsVbc6b2ULQ_uOrY0swDP751F_qed2r_XmB7Y-CYG2Yh7byWBggMbDphCDT6G40/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); }
//]]>

Kode Unik Google Drive dan HTML pemanggil :

Setelah langkah diatas, Kita akan mendapatkan kode identitas file recentpostsdengangambar.js  tersebut.

Contoh :

https://drive.google.com/file/d/0B0Jxrp7G8oHNQk1HMW9jMXpDLTA/view?usp=sharing

Catatan : 

Kode yang saya tebalkan “0B0Jxrp7G8oHNQk1HMW9jMXpDLTA” adalah kode identitas dari  file javascript recentpostsdengangambar.js yang kita upload tadi.

Nah, kode unik dari Google Drive itu, kemudian kita gunakan bersama HTML pemanggil. Jadi, secara lengkapnya akan seperti ini :

<script src='https://googledrive.com/host/0B0Jxrp7G8oHNQk1HMW9jMXpDLTA' type='text/javascript'/>

<div id="terbaru"></div>

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

Tag Condition :

Silahkan gunakan kode diatas tadi, bila anda ingin membuat Recent Post sebagai widget. Caranya tentu dengan “Add Widget” dari LayOut.

Tetapi, bila anda ingin menampilkan Recent Post ini dibawah Sharebutton pada setiap artikel, (pageType = item), silahkan “Tambahkan” tag kondisi <b:if>. Jadi kode terakhirnya seperti ini.  Selesai….

 <!-- Recent Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src='https://googledrive.com/host/0B0Jxrp7G8oHNQk1HMW9jMXpDLTA' type='text/javascript'/>

<div id="terbaru"></div>

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

</b:if>

<!-- Recent Posts with Thumbnails Code End-->

Itu saja, semoga dapat menambah koleksi kreasi widget untuk blog-blog anda.

Terimakasih.

Posted by Anonymous on - Rating: 5.0

Title : Cara paling cepat membuat widget Recent Posts dengan gambar, bukan related post
Description : Sampai jumpa lagi dengan blog Firman Himawan. Kali ini saya akan memberikan widget baru, hehe.. maksud saya adalah tutorial widget Rec...