Cara buat Slide image dengan mudah Bag.3

by - Kamis, Januari 02, 2014

Berikut adalah code cara membuat slide foto dengan mudah bag 3
1.Copy paste code di bawah ini di code HTML anda

<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://alamat blog anda .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:500px;
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>

2.Ganti Url blog nya menjadi url blog anda

3.numposts = 27 adalah jumlah yg pos yg ada di slide nilainya silahkan anda ganti sesuai selera

4.Tinggal save dan lihat hasilnya

5. jika tidak berungsi silahkan inbox


You May Also Like

0 komentar

عن أَبِي سَعِيدٍ الْخدْرِيِّ عَنِ النَّبِيِّ صلى الله عليه وسلم، قَالَ: لَتَتْبَعُنَّ سَنَنَ مَنْ كَانَ قَبْلَكُمْ، شِبْرًا بِشِبْرٍ، وَذِرَاعًا بِذِرَاعٍ حَتَّى لَوْ دَخَلُوا جُحْرَ ضَبٍّ تَبِعْتُمُوهُمْ قُلْنَا: يَا رَسُولَ اللهِ الْيَهُودَ وَالنَّصَارَى قَالَ: فَمَنْ

"Sungguh diantara kalian akan mengikuti apa-apa yang dilakukan bangsa-bangsa terdahulu, selangkah demi selangkah, sehasta demi sehasta walau pun mereka memasuki lubang biawak kamu akan mengikuti mereka". Diantara para sahabat ada yang bertanya "Ya, Rasululah apakah yang dimaksud (di sini) adalah pemeluk agama Yahudi dan Nashrani ?" Rasulullah menjawab "Siapa lagi (kalau bukan mereka) (HR. Bukhari)