Recent Post Thumbnail tanpa Java Script

Membuat Widget Recent Post atau bahasa lainya widget artikel terbaru. saya akan membagikan widget ini untuk sobat. Widget Recent post ini tidak menggunkan java script panggilan atau java script yang tidak di hosting, melainkan java scriptnya sudah di sertakan di dalam code widget tersebut jadi tidak memakan waktu loading yang lama. widget recent post ini di sertai gambar dan komentar.

Untuk pemasangan widget 
 - Masuk ke account Blogger kalian,
 - Dasbor pilih Tata letak
* Klik "Tambah Widget" dan pilih "HTML/JavaScript",

Copy kode berikut ini
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepdKpxh_3DhsIaMT6HfyEnIANREjyxrAtTG14WqtBzfT4QuMhJxhgN5AvyTr_fHTlsVMn1pAuHuCzNNWnSAmt9VJjypjvd2OwSFJWkEnfcwgCqDx-Fble2FksvVsb-2A9S4Hc9pZnFRIN/s1600/no-images.jpg"
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepdKpxh_3DhsIaMT6HfyEnIANREjyxrAtTG14WqtBzfT4QuMhJxhgN5AvyTr_fHTlsVMn1pAuHuCzNNWnSAmt9VJjypjvd2OwSFJWkEnfcwgCqDx-Fble2FksvVsb-2A9S4Hc9pZnFRIN/s1600/no-images.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepdKpxh_3DhsIaMT6HfyEnIANREjyxrAtTG14WqtBzfT4QuMhJxhgN5AvyTr_fHTlsVMn1pAuHuCzNNWnSAmt9VJjypjvd2OwSFJWkEnfcwgCqDx-Fble2FksvVsb-2A9S4Hc9pZnFRIN/s1600/no-images.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepdKpxh_3DhsIaMT6HfyEnIANREjyxrAtTG14WqtBzfT4QuMhJxhgN5AvyTr_fHTlsVMn1pAuHuCzNNWnSAmt9VJjypjvd2OwSFJWkEnfcwgCqDx-Fble2FksvVsb-2A9S4Hc9pZnFRIN/s1600/no-images.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepdKpxh_3DhsIaMT6HfyEnIANREjyxrAtTG14WqtBzfT4QuMhJxhgN5AvyTr_fHTlsVMn1pAuHuCzNNWnSAmt9VJjypjvd2OwSFJWkEnfcwgCqDx-Fble2FksvVsb-2A9S4Hc9pZnFRIN/s1600/no-images.jpg";
showRandomImg = true;
boxwidth = 285;
cellspacing = 5;
borderColor = "transparent";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 65;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "Komentar";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 9;
home_page = "http://boyrohman.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';if(summaryPost==0){trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
Silahkan sobat kreasikan sendiri, untuk tulisan yang berwarna silahkan sobat ganti sendiri misalkan transparent sobat ganti dengan kode warna #FFFFFF dan dan kode #000000 silahkan di sesuaikan. untuk angka 70 dan 65 merupakan lebar dan tinggi gambar, ganti http://boyrohman.blogspot.com/ dengan alamat blog sobat.
Silahkan Mencoba dan semoga bermanfaat.

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top