Slice Random Recent Post

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan yang berisi gambar dan snippet artikel yang muncul kebawah ketika pointer mouse kita arahkan diatas salah satu judul.

Modifikasi recent post ini saya beri nama Slice Random Recent Post....

OK langsung saja.... bila anda berminat, anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML. 

 

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode CSS di bawah ini dan taruh tepat sebelum kode </head> :

<div class="noerlist-recent"><script language="JavaScript"> imgr = new Array(); showRandomImg = true; boxwidth = 250; cellspacing = 1; 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 = 7; home_page = "ULR BLOG ANDA"; </script><br /> <br /> <br /> <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="300px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" >');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 div='<div class="noerlist"><div class="noertitle"><ul><li><a href="'+posturl+'">'+posttitle+'</a></li></ul></div><div class="noergambar"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><div class="postsummary"><i>'+s+'</i></div></div>';document.write(div);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('<a href="http://www.larosnews.tk/" target="_blank"> </a>');//]]></script></div>

Catatan : Pada kode diatas terdapat teks "ULR BLOG ANDA", Silahkan anda ganti dengan ULR blog anda.

5. SIMPAN.

OK... Selamat mencoba dan Semoga bermanfaat....