Jadi saya mencari-cari tutorial yang tidak terdapat file JS dari luar. Dan ternyata dapat disini, kemudian saya edit sedemikian rupa sehingga terciptalah recent post sesuai keinginan saya. Yah sekedar berbagi, silahkan gunakan tutorial dibawah ini untuk mendapatkan recent post yang serasa milik pribadi. contoh hasil silahkan lihat milik saya!! kalo tertarik baca terus sampai habis oke..!!
- Masuk ke Blogger Dashboard > Layout > Edit HTML.
- Copy paste kode dibawah sebelum kode ]]></b:skin>
.sidebar .widget-content {
overflow: hidden;
word-wrap: break-word;
}
- Simpan Template!
- Masuk Blogger Dashboard > Layout > Edit HTML;
- Temukan kode </head> kemudian paste kode di bawah ini sebelum kode tersebut:
<script type='text/javascript'>
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:'+fntsize+'px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> </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>');}
</script>
- Simpan Template
Sekarang giliran menambahkan widget HTML bro!! Caranya:
- Masuk Blogger Dashboard > Layout > Page Elements;
- Klik Tambah Gadget> pilih HTML/JavaScript;
- Sekarang.copy paste sript dibawah:
<script language="JavaScript">Ganti nurad1kdengan nama blog anda!!
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = "100%";
cellspacing = "8";
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = "48";
thumbheight = "48";
fntsize = "13";
acolor = "#000099";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
max-results=10;
</script>
<script src="http://nurad1k.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>
kode max-results=10 adalh untuk mengatur jumlah posting yang tampil, maka ubah max-results=10 ke angka yang anda inginkan! Misal max-results=5 maka yang tampil adalah 5 posting.
Simpan Widget dan lihatlah hasilnya!!
Semoga Sukses!!
Jika ingin menambahkan fungsi scroll sehingga menghemat tempat maka bagi yang belum tahu silahkan ke Membatasi Text, Gambar, Widget , dll dengan Overflow
NurAd1K
nurad1k.blogspot.com
luar biasa artikelnya sob, tampilannya disertai gambarnya ya, siiip dan teruskan berbagi
ReplyDeleteoya link telah saya pasang
di:
http://asepsukarman.blogspot.com
http://duniaiklanonline.blogspot.com
silahkan di cek
salam bloger
keren nih ada gambarnya sob
ReplyDelete