FbGadgets

<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-DAco9ov00_0/VGvcY7DnfDI/AAAAAAABWKY/jRevLR7tOt4/s1600/RecentPosts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-DAco9ov00_0/VGvcY7DnfDI/AAAAAAABWKY/jRevLR7tOt4/s320/RecentPosts.png" /></a></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<style type="text/css" >
#rcentpost li,#rcentcomnets li {
border:1px solid #DDD;
border-bottom:0;
background:#FCFCFC;
padding:5px;
overflow:hidden;
height:82px
}
#rcentpost,#rcentcomnets {
min-height:100px;
background-image:url(http://4.bp.blogspot.com/-h0CltuAVwSs/UK3GfMM7EOI/AAAAAAAAG1E/51IsS_L6Ap8/s1600/download.gif);
background-repeat:no-repeat;
background-position:50% 50%
}
.ketkomt span {
display:block;
float:left;
width:206px;
font-size:95%;
line-height:14px
}
#rcentpost ul,#rcentcomnets ul {
height:410px;
overflow:hidden;
border-bottom:1px solid #DDD
}
#rcentpost .spyWrapper {
height:100%;
overflow:hidden;
position:relative
}
#rcentpost li:last-child,#rcentcomnets li:last-child {
border-bottom:1px solid #DDD
}
#rcentpost .thumbp,#rcentcomnets li .kmtimg {
float:left;
margin-right:5px
}
#rcentpost .thumbp a,#rcentcomnets li .kmtimg a {
display:block;
width:70px;
height:70px
}
#rcentpost .thumbp img,#rcentcomnets li .kmtimg img {
width:100%;
height:100%
}


/*****************************************
Global Links CSS CHANGE LINK INTO BUTTON
******************************************/
a{ color: #4690B3; outline:none; text-decoration: none; }
a:hover { color: #3e3e3e; text-decoration:none; }

.titlexp h4 {
max-height:34px;
overflow:hidden
}



</style>

<div id="rcentpost">

<script type='text/javascript'>

//<![CDATA[

var numpostx  = 400,

 thumbSize = 70,

 contjumlah  = 100,

 pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",

 animatedRecentPost = true,

 limitspy   = 390,

 intervalspy = 2500,

 tickspeed  = 1000;

$(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(d){var f,g,a;var b='<ul class="spyx">';for(var e=0;e<d.feed.entry.length;e++){var h=d.feed.entry[e];for(var c=0;c<h.link.length;c++){if(h.link[c].rel=="alternate"){f=h.link[c].href;break}}if("content" in h){g=h.content.$t}else{if("summary" in h){g=h.summary.$t}else{g=""}}if("media$thumbnail" in h){postimg=h.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var k=/<\S[^>]*>/g;g=g.replace(k,"");if(g.length>contjumlah){g=g.substring(0,contjumlah)+"..."}a=h.title.$t;b+='<li><div class="thumbp"><a href="'+f+'" target="_blank"><img alt="'+a+'"src="'+postimg+'"/></a></div><div class="titlexp"><h4><a href="'+f+'" target="_blank">'+a+'</a></h4></div><div class="contxisi">'+g+"</div></li>"}b+="</ul>";document.getElementById("rcentpost").innerHTML=b;(function(i){i.fn.newsTicker=function(l,j,m){l=limitspy||4;j=intervalspy||1000;m=tickspeed||400;return this.each(function(){var q=i(this),o=q.children();var p=function(){q.find("li:last").hide().prependTo(q).slideDown(m)},n=setInterval(p,j);q.css({height:o.outerHeight()*l,overflow:"hidden"}).hover(function(){clearInterval(n)},function(){n=setInterval(p,j)})})};if(animatedRecentPost){i(".spyx").newsTicker(limitspy,intervalspy,tickspeed)}i(window).load(function(){i(".spyx img").each(function(l){var j=i(this);setTimeout(function(){j.fadeIn(400)},400*(l+1))})})})(jQuery)}})});

//]]>

</script>

</div>

COPY AND PASTE BELOW CODE IN HTML SECTION




<style type='text/css'>
ul.recntpst,ul.recntpst li,ul.rcomnetxx,ul.rcomnetxx li{
color: #fff;
font-size:12px;
border: 5px solid;
border-top-color:Black;
border-right-color:Yellow;
border-bottom-color:Blue;
border-left-color:GREEN;
background: url(http://2.bp.blogspot.com/-5Oo4PdxHzy8/VF_KkK2PRoI/AAAAAAABV-4/KPMb76XOFmI/s1600/8.gif);
display: block;
list-style:none;padding:0;margin:0;overflow:hidden}
ul.recntpst .thumbp,ul.rcomnetxx .kmtimg{float:left;margin:0 5px 3px 0}
ul.recntpst strong,ul.rcomnetxx strong{display:block}
ul.recntpst p,ul.rcomnetxx p{margin:5px 0 10px}
ul.recntpst .date,ul.recntpst .cm,ul.rcomnetxx .date{font-size:10px}
ul.rcomnetxx .dd,ul.rcomnetxx .dm,ul.rcomnetxx .dy{margin-right:3px}
ul.recntpst .cm{padding-left:5px;border-left:1px solid #969191}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

<div id="recentpostxx">

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function () {
rccpostsx({
numpostx:10,
id_cintainrp:"#recentpostxx",
cmtext:"Comments",
thumbSize:60,
contjumlah:100
});
});

window.rccpostsx=(function(){var a=function(p){var d=p||{},i=d.url_blog||"",n=d.numpostx||5,h=d.id_cintainrp||"#rcentpost",e=d.thumbSize||40,b=d.contjumlah||100,c=d.loadingClass||"loadingxx",m=d.cmtext||"Comments",l=d.firstcmtext||"Comment",f=d.NoCmtext||"No Comment",g=d.MonthNames||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=d.pBlank||"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif";$(h).addClass(c);var j=i;if(i===""){j=window.location.protocol+"//"+window.location.host}$.ajax({url:j+"/feeds/posts/default?alt=json-in-script&orderby=published&max-results="+n+"",type:"get",dataType:"jsonp",success:function(v){var y,o,w,q,A,D,z,F,x,C,E,s="",B=v.feed.entry;if(B!==undefined){s="<ul class='recntpst'>";for(var u=0;u<B.length;u++){for(var t=0;t<B[u].link.length;t++){if(B[u].link[t].rel=="alternate"){y=B[u].link[t].href;break}}for(var r=0;r<B[u].link.length;r++){if(B[u].link[r].rel=="replies"&&B[u].link[r].type=="text/html"){w=B[u].link[r].title.split(" ")[0];break}}if("content" in B[u]){A=B[u].content.$t}else{if("summary" in B[u]){A=B[u].summary.$t}else{A=""}}if("media$thumbnail" in B[u]){D=B[u].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+e+"-c")}else{D=k}if(w===0){q=' <span class="cm">'+f+"</span>"}else{if(w===1){q=' <span class="cm">'+w+" "+l+"</span>"}else{q=' <span class="cm">'+w+" "+m+"</span>"}}A=A.replace(/<\S[^>]*>/g,"");if(A.length>b){A=A.substring(0,b)+"..."}o=B[u].title.$t;z=B[u].published.$t.substring(0,10),F=z.substring(0,4),x=z.substring(5,7),C=z.substring(8,10),E=g[parseInt(x,10)-1],s+='<li><a class="thumbp" href="'+y+'" target="_blank"><img style="width:'+e+"px;height:"+e+'px;display:block" alt="'+o+'"src="'+D+'"/></a><strong><a href="'+y+'" target="_blank">'+o+'</a></strong><span class="date"><span class="dd">'+C+'</span> <span class="dm">'+E+'</span> <span class="dy">'+F+"</span></span>"+q+"<p>"+A+"</p></li>"}s+="</ul>";$(h).html(s).removeClass(c)}else{$(h).html("<span>No result!</span>").removeClass(c)}},error:function(){$(h).html("<strong>Error Loading Feed!</strong>").removeClass(c)}})};return function(b){a(b)}})();


//]]>
</script>



</div>

------------------------------------------------------------------------------------------------------------

STYLE 3



<div class='sidebar'>

<h2>RECENT POST MULTI COLOR </h2>

<style type='text/css'>
ul.recntpst,ul.recntpst li,ul.rcomnetxx,ul.rcomnetxx li {
background:#FFFBCC;
border: 6px double;
color:White
}
.recntpst li:nth-child(1) {
background: Red;
}
.recntpst li:nth-child(2) {
background: Green;
}
.recntpst li:nth-child(3) {
background:Orange;
}
.recntpst li:nth-child(4) {
background:Cyan;
}
.recntpst li:nth-child(5) {
background:Black;
}

.recntpst li:nth-child(6) {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

ul.recntpst .thumbp,ul.rcomnetxx .kmtimg {
float:left;
margin:0 5px 3px 0
}
ul.recntpst strong,ul.rcomnetxx strong {
display:block
}
ul.recntpst p,ul.rcomnetxx p {
margin:5px 0 10px
}
ul.recntpst .date,ul.recntpst .cm,ul.rcomnetxx .date {
font-size:10px
}
ul.rcomnetxx .dd,ul.rcomnetxx .dm,ul.rcomnetxx .dy {
margin-right:3px
}
ul.recntpst .cm {
padding-left:5px;
border-left: 1px solid #969191
}
</style>


<div id="recentpostxx">

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
rccpostsx({
numpostx:6,
id_cintainrp:"#recentpostxx",
cmtext:"Comments",
thumbSize:60,
contjumlah:100
});
});

window.rccpostsx=(function(){var a=function(p){var d=p||{},i=d.url_blog||"",n=d.numpostx||5,h=d.id_cintainrp||"#rcentpost",e=d.thumbSize||40,b=d.contjumlah||100,c=d.loadingClass||"loadingxx",m=d.cmtext||"Comments",l=d.firstcmtext||"Comment",f=d.NoCmtext||"No Comment",g=d.MonthNames||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=d.pBlank||"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif";$(h).addClass(c);var j=i;if(i===""){j=window.location.protocol+"//"+window.location.host}$.ajax({url:j+"/feeds/posts/default?alt=json-in-script&orderby=published&max-results="+n+"",type:"get",dataType:"jsonp",success:function(v){var y,o,w,q,A,D,z,F,x,C,E,s="",B=v.feed.entry;if(B!==undefined){s="<ul class='recntpst'>";for(var u=0;u<B.length;u++){for(var t=0;t<B[u].link.length;t++){if(B[u].link[t].rel=="alternate"){y=B[u].link[t].href;break}}for(var r=0;r<B[u].link.length;r++){if(B[u].link[r].rel=="replies"&&B[u].link[r].type=="text/html"){w=B[u].link[r].title.split(" ")[0];break}}if("content" in B[u]){A=B[u].content.$t}else{if("summary" in B[u]){A=B[u].summary.$t}else{A=""}}if("media$thumbnail" in B[u]){D=B[u].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+e+"-c")}else{D=k}if(w===0){q=' <span class="cm">'+f+"</span>"}else{if(w===1){q=' <span class="cm">'+w+" "+l+"</span>"}else{q=' <span class="cm">'+w+" "+m+"</span>"}}A=A.replace(/<\S[^>]*>/g,"");if(A.length>b){A=A.substring(0,b)+"..."}o=B[u].title.$t;z=B[u].published.$t.substring(0,10),F=z.substring(0,4),x=z.substring(5,7),C=z.substring(8,10),E=g[parseInt(x,10)-1],s+='<li><a class="thumbp" href="'+y+'" target="_blank"><img style="width:'+e+"px;height:"+e+'px;display:block" alt="'+o+'"src="'+D+'"/></a><strong><a href="'+y+'" target="_blank">'+o+'</a></strong><span class="date"><span class="dd">'+C+'</span> <span class="dm">'+E+'</span> <span class="dy">'+F+"</span></span>"+q+"<p>"+A+"</p></li>"}s+="</ul>";$(h).html(s).removeClass(c)}else{$(h).html("<span>No result!</span>").removeClass(c)}},error:function(){$(h).html("<strong>Error Loading Feed!</strong>").removeClass(c)}})};return function(b){a(b)}})();
//]]>
</script>

</div>


</div>

-----------------------------------------------------------------------------------------------------------------