Cara buat recent post dg gambar menggunakan marquee

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. Lebih cocok lagi bila sobat blogger memiliki web atau blog yang bergerak dibidang desain inetrior - eksterior, atau gambar dan foto contoh suatu produk, atau apa sajalah sesuai kebutuhan anda, Intinya recent post ini dilengkapi dengan fitur image.

Silkahkan anda bisa lihat DEMO DISINI

OK...,  bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.

2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget

4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

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://tutorialbloggermasnoer.blogspot.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvahsOOrgJO2oLy71bf1kaGqtT5s4t0jVnyzXdMqYC16flMAJRbpxJdc9nXfn5oUZOQUZgLUvkxDEAp1knYiuA0i-5FWNEWbyBangVEL4VeClt4ocwssz8H2gVnuW6mUBMjmQjsVdjfPZ/s104/Tukar+Link.jpg"/></a>');//]]></script></marquee></div>

Catatam :

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

6. Simpan

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini, atau berlangganan artikel melalui tombol dibawah ini.