Membuat Recent Post Dengan Gambar Menggunakan Efek Marquee

Kalau yang hari kemarin saya sempat membahas tentang Cara Membuat Tombol Slide Dengan Efek JQuery, tutorial blog kali ini saya akan coba share mengenai Tampilan recent post ini lebih mantab, apalagi setiap artikel atau posting yang ada di web atau blog kita disertai dengan gambar. Selain itu kita bisa menampilkan seluruh artikel atau posting, dari yang masih baru hingga yang sudah lama sekalipun. Intinya recent post ini dilengkapi dengan fitur image.

Lihat Gambarnya dibawah ini.

Lalu bagaimana menambahkan ke blog maupun web.
Langkah 1
Login ke blogger dengan ID anda.
Langkah 2
Klik Rancangan dan pilih Elemen Laman
Langkah 3
Tambah Gadget
Langkah 4
Pada jendela baru anda Anda pilih gadget HTML/JavaScript
Langkah 5
Copy dan paste kode dibawah ini pada gadget tersebut :

<div style="float: left;text-align: center;height:253px;padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; ">
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%" height="214px" border="1">

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 250;
cellspacing = 10;
borderColor = "#fff";
bgTD = "#ccc";
thumbwidth =200;
thumbheight = 150;
fntsize = 11;
acolor = "#ffffff";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#ffffff";
icon2 = " ";
numposts = 100;
home_page = "GANTI DENGAN ULR BLOG ANDA";
</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="250px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" cellspacing="10px'+cellspacing+'5px" bgcolor="#ffffff'+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!='yes')?'<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='<td><div style="float: left;width:200px;margin-bottom:5px;padding:0px 0px 0px 0px;background-color: rgb(204, 204, 204);border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><br /><div style="float: left;text-align: center;width:190px;height:45px; padding:5px 5px 0px 5px;background-color: #E7E6E9;border:2px solid #AAAAAA;box-shadow: 2px 2px 2px #818181;-webkit-box-shadow: 2px 2px 2px #818181;-moz-box-shadow: 2px 2px 2px #818181;color:#ffffff; "><style="font-size: 10px; text-decoration:none; color: #ffffff;><a href="'+posturl+'">'+posttitle+'</a></div>';if(summaryPost==0){trtd='<td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td>';}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>");document.write("<script src=""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");document.write('<a href="http://www.carabuatwebgratis.com/" target="_blank"> <img src="http://farm7.static.flickr.com/6115/6298335612_07281db88b_t.jpg" width="80" height="15" alt="Link Top Tutorial Blog" /></a>');//]]></script></marquee></div>

Catata:

numposts = 100; (Jumlah recent post yang akan ditampilkan)
home_page = "GANTI DENGAN ULR BLOG ANDA";

Langkah 6
Simpan dan lihat hasilnya

Selesai sudah tutorial kali ini, Selamat mencoba dan Semoga bermanfaat.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan atas.
Jangan lupa luangkan waktu untuk berkomentar di Lora Malunk Blog......Terima Kasih.