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

Thread Comments Stylish Dark Edition dengan CSSPada kesempatan kali ini saya akan membahas tentang modifikasi thread comment. "Thread Comment Stylish Dark Edition dengan CSS". thread comment yang biasa dan sudah ... readmore
Cara membuat efek membesar pada gambarMemberikan efek membesar pada gambar adalah salah satu cara menjadikan web atau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan g ... readmore
Membuat Teks Berjalan ( Marquee )Untuk menghiasi blog atau web, banyak cara yang bisa kita lakukan, termasuk memberi effek animasi teks berjalan. Dan untuk membuat teks berjalan caranya juga sangat ... 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
CSS FONTFitur Css Font memang sangat diperlukan dalam pembuatan website. Beberapa kegunaan fitur Css Font yang bisa digunakan diantaranya seperti :Mengatur jenis fontMengat ... readmore