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://www.carabuatwebgratis.com/" target="_blank">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJwIadbKkRpd9UDGioV8q59Jv9V4iN_XMWcBHUGoRmQodR3v1XMMC_jM5YiCs0zdJQ8GncXQsYvIvpkHoDc_oqRZm6Kt-Txw2xLJCULqqyvyrghnFOaPjZw8AF6QdCUG5hVj22QgmUdX1/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.

Judul: Cara buat recent post dg gambar menggunakan marquee; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Cara buat Fitur Slide AccordionKarya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini. Widget ini saya beri nama Fitur Slide Accordion. Selain tampilan ... readmore
Cara Membuat Navigasi HalamanCara lain untuk memudahkan pengunjung mencari artikel yang ada pada blog kita adalah memberi tombol navigasi halaman yang berada dibawah artikel. Selain memberikan ... readmore
Cara buat menu drop down bubbleKoleksi baru lagi cara buat menu drop down, dan menu ini memiliki tampilan yang berbeda dengan menu drop down yang lain. Menu drop down ini mengunakan efek bubble y ... readmore
Cara membuat Text-Shadow Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Pe ... readmore
Mengenal 5 bagian utama pada template bloggerMemiliki Blog sangat menyenangkan, tapi terkadang kita masih merasa kesulitan pada saat kita ingin mengedit template. Walaupun sudah banyak tutorial-tutorial yang d ... readmore