Bagi teman-teman yang pernah seangkatan dengan saya di tingkat SD, MtsN dan MAN di kota Tanjungpinang, boleh kirim berita, cerita/pengalaman utk saling berbagi ke alamat Email ku as_m4n@yahoo.com
Buruan...Pasang Iklan anda disini, GRATISS Loo???

Cara Membuat Slide show foto  

Diposkan oleh mantpi

Langkah 1
1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang "
5. Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>

/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6.Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode </head>


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://2.bp.blogspot.com/-YVw7wzQAmvg/TefMwceB79I/AAAAAAAABXY/XanXEXy7Ico/s1600/panah+kucobadotcom.jpg" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
});
</script>

7.Save Template

Langkah 2
Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
4. Jangan Lupa Untuk buat Backupa data anda
5. Centang expand template widget
6. Cari Kode ini <div id='main-wrapper'>
7. Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://asksalman19.blogspot.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>

Keterangan :

1. Ganti warna merah dengan alamat link artikel kamu
2. Ganti warna hijau dengan link gambar / foto
3. Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
4. <span> Isi dengan kalimat yang ingin di tampilkan di atas foto <span>
5. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode
<li><a href="#"><img height='245' src="#" width='468'/> <span> isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya
.</span></a></li> di atas kode </ul>

www.kucoba.com

This entry was posted on 11.45 . You can leave a response and follow any responses to this entry through the Langganan: Poskan Komentar (Atom) .

0 komentar

Sudah siap Memulai Bisnis Internet ?

Bagi anda yang pengen dapat uang saku tambahan silakan coba yang satu ini, anda hanya di minta untuk mengklik iklan lalu anda dibayar.buruan daftar di donkeymails bawah ini
  • DonkeyMails.com: No Minimum Payout
  • DonnyWijaya.com - Bagi Bagi Mobil All New Jazz RS Otomatis,Sepeda Motor Mega Pro CW,Iphone 3GS 32GB,Blackberry Bold XL GRATIS!

    Hosting Murah

    ShoutMix chat widget