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.
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'>◄ 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); }
//]]>
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'>◄ 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); }
//]]>
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>
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 ==
"item"'>
<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.
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...
Description : Sampai jumpa lagi dengan blog Firman Himawan. Kali ini saya akan memberikan widget baru, hehe.. maksud saya adalah tutorial widget Rec...
0 Response to "Cara paling cepat membuat widget Recent Posts dengan gambar, bukan related post"
Post a Comment