Home » » Membuat Recent Post Dengan Gambar Menggunakan Efek Marquee

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.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 3 komentar

26 Desember 2011 10.56

menarik selalu tutorialnya, bikin berat loadnya ga gan?

Terimakasih Ubi Cilembu atas Komentarnya di Membuat Recent Post Dengan Gambar Menggunakan Efek Marquee
26 Desember 2011 12.44

blog http://neterzindo.blogspot.com mau coba dulu gan. jangan lupa mampir ke blog ane yaw

Terimakasih neterz atas Komentarnya di Membuat Recent Post Dengan Gambar Menggunakan Efek Marquee
30 Maret 2012 07.42

kok nggak kluar ya gan gambarnya>? malah kluar tulisan geje gt,, gmn ini gan? 8-}

Terimakasih Singgih Robeta atas Komentarnya di Membuat Recent Post Dengan Gambar Menggunakan Efek Marquee

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger