Belajar Bersama: Cara menampilkan slide foto di atas artikel

Berikut langkah-langkah menampilkan slide foto Anda di artikel atau posting :
1. Buka akun blog Anda di blogger.com
2. Klik Rancangan - Edit HTML - Jangan lupa tanda centang 'Expand Template Widget'
3. Pertama-tama cari ']]></b:skin>' untuk mempermudah Tekan Ctrl + F, kemudian cari ]]></b:skin>, copy kode berwarna biru dibawah ]]></b:skin> . Berikut kodenya :
    #s3sliderContent{width:500px;position:absolute;top:0;margin:0px;padding-left:0px}.s3sliderImage{float:left;position:relative;display:none}.s3sliderImage span{position:absolute;left:0;font:normal 11px 'Arial',Helvetica,sans-serif;padding:10px;width:100%;text-align:center;padding-left:0px;background-color:#d915f3;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;color:#fff;display:none;top:0}

4. Cari lagi </head>, tempatkan kode tulisan biru di atas kode </head>
<script src='http://sites.google.com/site/javascriptnew/java-script/rainbow.js' type='text/javascript'/>
<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://img40.imageshack.us/img40/6613/arrowto.gif" 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>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

5. Dan yang terakhir, cari <div id='main-wrapper'> dan tempatkan script berikut di bawah <div id='main-wrapper'> :

<span>CHIBI-CHIBI</span></a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0wJCELbJ9h8G1T4ODnTNOO-fqbHvv9FaQ_riC9bGq0T5QupLbuhUUVZZoXVYLBgUCaEwkBa4j920FMT8v7yctkouBtJ_zKraYMJPDNtqsRRr2lxIz9Q-fGsdyf0agGiEpHTjwpKGsgnCZ/s400/12.jpg' width='500'/><span>CHIBI-CHIBI BERGAYA</span>

</a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwnrmroJv8Z2b6XK9p8llcV3kz30UAfJqvyZ4fASxRJk6DEWsyJ2y_kD_36K4lBP8tI-ube_al45A_vKxYS3XwkPrY6l8Zb4_COST99d6CTEMfoOHCdSpuXrC7QZDJToCMVD_TP4mdFtz/s400/14.jpg' width='500'/><span>BERGAYA...................

</span></a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg985LqbSHeAnc44Buhotk_Sm88_NqEuprvFFnLWX0-PcJJB8qyl5ZpeW5R27-aMhNsTsWP0XfyjN4lo6RYm88k0lxrgW9hZGA7YwoLuq9-uwYlVTP_VjocBq-BinUaeLJXCFpzLzI6Rhg/s400/13.jpg' width='500'/><span>MODEL TAWWA...................

</span></a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioL0QhbFY4nNJZE2vRbD7jpyFDD_puQyo2CjiaQTn_jG2cPldilW2oG8QAxEgzcKK8fVdfgwvRj4ymaNsSpoluh3C-qYPZo5Z8COqQo-871sNYrrBCgp61IASjIArAdO4lp2RRBXhrWYS4/s400/15.jpg' width='500'/><span>MODEL SEK 16...................

</span>></a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEEEJsybksPahx6tFeKbc08lYhsoO1Jxq6Fs9GWLMT4OiSsaiSSW5VbiZmjPr2SpUHfet3vd7fDjaeYZAol9F6XokHyqjcoxhMnotlaFlXoS-CBPG4YoFyllCtMbb6wPxZrE12wUd1rL0/s400/17.jpg' width='500'/><span>BERGAYA...................

</span></a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTz_ADLT22dsB_L_pnzdERGgrdgljHklfRuABpysU4c2Rb6Y490FkB1Eoo9R2rzXaaePjblG_KD0Kuf5bQDbw00jAHIWdnMkf4ejuL0VOFKPu0tRb5Btn_nYd3mzHGXubb8mg7WXwbMRG-/s400/18.jpg' width='500'/><span>BERGAYA...................

</span></a></li>

<img height='375' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvJBdLhhvD9U1draTJW1FTRfIYfbCT-pVeMrxc9k91JzOiCzyLau0CajKMRRIkkfHqN5HcioqLg9PMJhlqiT89pkKAwR_Gxnjb_DrG7BlB2SsYTZs_YP7JHWlEhQEs49ooHDOHrzhTA08Z/s400/16.jpg' width='500'/><span>LAGI BERUNDING...................

</span></a></li>

</ul>

</div>

Untuk mengganti foto-foto slide, anda tinggal ubah, alamat fotonya. Misalnya foto pertama di kode :

<span>CHIBI-CHIBI</span></a></li>
Anda tinggal ubah alamat foto Anda pada kode berwarna merah dan untuk kata-katanya Anda dapat mengubahnya pada kode warna merah di atas.

Selesai sudah cara menampilkan slide foto di atas posting atau artikel Anda, jangan lupa disimpan blognya. Berikut ini slide foto hasil dari cara yang di atas :

Belajar Bersama

Laman

Cara menampilkan slide foto di atas artikel

Tidak ada komentar:

Posting Komentar