Cara buat Gallery Otomatis dari postingan
Pasang Code HTML ini di blog agan :
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script
language='JavaScript'>
imgr
= new Array();
showRandomImg
= true;
thumbwidth
= 60;
thumbheight
= 60;
acolor
= "#F5F5F5";
aBold
= false;
text
= "comments";
showPostDate
= true;
numposts
= 27;
home_page
= "http://infolaksanaagung.blogspot.com/";
limitnoer=2
intervalnoer=4000
</script>
<div
id="cbwg-slide-show-random-post">
<div
id="noerlist">
<script
type='text/javascript'>
//<![CDATA[
jQuery(function(){jQuery("ul.noer").simplenoer(limitnoer,intervalnoer).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simplenoer=function(f,g){f=f||4;g=g||5000;return
this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find(">
li:first").height();l.find(">
li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div
class="noerWrapper"
/>').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function
n(){if(k){var
p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find(">
li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function
showrecentposts(z){document.write('<ul
class="noer">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new
Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var
g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var
l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var
l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split("
")[0];break}}if("content" in w){var
r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var
r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;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[o]=d}cmtext=(text!="no")?'<i><font
color="'+acolor+'">'+f+" "+text+"</font></i>":"";var
q=[1,2,3,4,5,6,7,8,9,10,11,12];var
xy=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var
u=postdate.split("-")[2].substring(0,2);var
h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var
e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=xy[e];break}}var
n=(showPostDate)?'<i><font color="'+acolor+'">'+u+"
"+h+"
"+t+"</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var
v='<li><img src="'+img[o]+'" width="'+thumbwidth+'"
height="'+thumbheight+'" class="recent-thumb"/><div
class="noerlink"><a href="'+p+'"
class="recent-link">'+g+'</a></div><div class="postsummary"><i>'+s+'</i></div><div
class="noerdate">'+n+'</div><span
class="noercomment">'+cmtext+"</span>";document.write(v);j++}document.write("</ul>")}document.write('<script
src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');//]]></script>
</div>
</div>
<style
type="text/css" media="screen">
<!--
#cbwg-slide-show-random-post
{
overflow:hidden;
margin-top:5px;
margin:auto;
padding:
0px;
width:550px;
height:326px;
border:1px
solid #000;
background:#F5F5F5;
}
#noerlist
{
overflow:hidden;
margin:2px;
padding:
0px;
float:left;
}
#noerlist
ul{
float:left;
width:100%;
height:322px;
overflow:hidden;
list-style-type:
none;
padding:
0px;
margin:0px;
background:#F5F5F5;
}
#noerlist
li {
width:100%;
height:322px;
padding:
0px;
margin:0px
0px 5px 0px;
list-style-type:none;
float:none;
overflow:
hidden;
background:#000000;
}
#noerlist
li:hover a{
color:orange;
}
#noerlist
li #span info{
background:#fff;
text-decoration:none;
color:#fff;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow:
1px 3px 3px #fff;
overflow:hidden;
margin:0px
0px;
padding:5px;
font-family:Tahoma,Arial,verdana,
sans-serif;
}
#noerlist
img {
float:left;
width:545px;
height:293px;
margin-right:0px;
margin-left:0px;
background:#fff;
cursor:pointer;
transition:
all 1s ease-in-out;
-webkit-transition:
all 1s ease-in-out;
-moz-transition:
all 1s ease-in-out;
}
#noerlist
li:hover img {
float:left;
width:545px;
height:220px;
margin-right:0px;
margin-left:0px;
background:#fff;
cursor:pointer;
transition:
all 1s ease-in-out;
}
#noerlist
.recent-link{
float:left;
width:100%;
height:25px;
text-decoration:none;
color:#fff;
font-size:17px;
font-weight:normal;
font-style:normal;
text-shadow:
1px 3px 3px #fff;
overflow:hidden;
margin:0px
0px;
padding:5px;
font-family:Tahoma,Arial,verdana,
sans-serif;
cursor:pointer;
z-index:200;
}
#noerlist
.recent-link:hover{
background:#bbb;
text-shadow:
1px 3px 3px #000;
}
#noerlist
.postsummary{
display:block;
width:545px;
height:55px;
background:#FFFAF0;
margin:0
auto;
text-decoration:none;
color:#000000;
font-size:12px;
font-weight:normal;
font-style:normal;
line-height:18px;
text-shadow:
1px 3px 3px #fff;
border-top:1px
solid #ccc;
overflow:hidden;
padding-top:0px;
padding-left:5px;
padding-bottom:0px;
padding-right:10px;
font-family:Tahoma,Arial,verdana,
sans-serif;
}
#noerlist
li .postsummary .separator{
display:none;
}
.noerdate{
display:none;
overflow:hidden;
font-size:10px;
text-shadow:
1px 2px 2px #8EABFF;
color:#455D95;
padding:2px
0px;
margin:1px
0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana,
sans-serif;
}
.noercomment{
display:none;
overflow:hidden;
font-family:Tahoma,Arial,verdana,
sans-serif;
font-size:10px;
color:#fff;
padding:0px
0px;
margin:0px
0px;
}
-->
</style>
Ganti http://infolaksanaagung.blogspot.com/ dengan Link URL agan
Untuk lebar dan tinggi silahkan ubah sesuai selera
Tidak ada komentar :
Posting Komentar