Apr 6, 2011

Membuat Widget Slide Show


Sudah beberapa hari ini (10 hari-an) saya ga posting2 nih, ceritanya sih lagi sibuk di dunia nyata :D.
Tapi kemarin, kebetulan ada salah satu sobat blogger yang mampir ke blog saya, beliau  adalah sobat Andisyam yang ngisi buku tamu terus nanya gimana cara bikin random ads yg kayak gini? oh saya pikir pasti yg ads 468x60 nah terus lewat facebook saya jawablah, kebetulan punya saya itu punya GA kalo mau saya bisa bikinkan tutorialnya. begitu.
Nah kebetulan sekarang saya coba berbagi mengenai tutorial ini. 

Baiklah, sebetulnya widget slideshow dengan Jquery ini sudah saya koleksi sejak lama, kebetulan ini juga hasil  edit2 dari template gratisan, bawaannya kan widget ini posisinya ada di atas posting yang hanya berupa gambar saja di halaman awal. Terus saya otak-atik sedikit kode2nya jadilah widget slider buat nempatin banner ads 468x60 di bagian header. Kira2 begitu, maaf kalau rada-rada kabur bahasanya, hehe... :)

Oke, langsung saja kita mulai tutorialnya,
1. langsung menuju Edit HTML di akun sobat, jangan lupa centang expand widget template dan back up template.

2. cari kode ]]></b:skin> kemudian copy dan paste script dibawah ini tepat diatas kode tadi

/* Image Slideshow by akoey's blog */
#myslider{margin-bottom:5px; width:468px; float:right; /* important to be same as image width */height:60px; /* 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 */}
#mysliderContent{width:468px; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.mysliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}

3. copy dan pastekan kode dibawah ini persis dibawah kode ]]></b:skin>

<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.myslider=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() {
   $(&#39;#myslider&#39;).myslider({
      timeOut: 3000
   });
});
</script> 

 4. kalau sudah selesai poin 3, minum dulu ya biar seger soalnya tutorialnya lumayan asik, hehe... Lanjuttt... Sekarang kita menuju ke pemasangan widget. Cari posisi banner ads 468x60di template sobat. Kalau di blog saya seperti ini <div class='headerright'> , kemudian pasang kode dibawah ini tepat dibawah kode barusan. atau jika sudah ada kode 
<b:section class='ad468' id='ad468' maxwidgets='1' showaddelement='yes'> 
</b:section> (ini contoh punya saya, sobat harus jeli menemukan kode yang sejenis ini)
langsung ganti saja dengan kode dibawah ini.

<div id='myslider'>
                <ul id='mysliderContent'>
                    <li class='mysliderImage'>
                    <a href='http://www.neobux.com/?rh=776562616B6F6579'><img height='60' src='http://images.neobux.com/imagens/banner8.gif' title='Dapatkan dollar dari PTC ini. Daftar sekarang, Gratis' width='468'/>
                    <span>Neobux</span></a></li>
                    <li class='mysliderImage'>
                    <a href='http://www.idr-clickit.com/register.php/webakoey.html' target='_blank'><img src='http://www.idr-clickit.com/images/banner1.png' title='Dapatkan penghasilan dari PTC ini. Daftar sekarang, Gratis'/>
                    <span>IDR Clickit</span></a></li>
                    <li class='mysliderImage'>
                    <a href='http://www.dbclix.com/?refid=webakoey' target='_blank'><img alt='DbClix' height='60' src='http://www.dbclix.com/images/banner.jpg' width='468'/>
                    <span>DB Clix</span></a></li>
                    <li class='mysliderImage'>
                    <a href='http://www.readbud.com/?ref=4646916'><img alt='readbud - get paid to read and rate articles' border='0' height='60' src='http://www.readbud.com/images/468_60_banner.jpg' width='468'/>
                    <span>Readbud</span></a></li>
                    <li class='mysliderImage'>
                    <a href='https://incrasebux.com/register.php/cometrue.html' target='_blank'><img height='60' src='http://www.incrasebux.com/images/banner4.gif' width='468'/>
                    <span>Incrasebux</span></a></li>
                    <li class='mysliderImage'>
                    <a href='http://www.cashium.net/?rid=cometrue' title='cashium.net'>
<img border='0' height='60' src='http://www.cashium.net/banners/460x60_green.gif' width='468'/>
                    <span>Cashium</span></a></li>
                    <li class='mysliderImage'>
                    <a href='http://klikptc.com/index.php?r=webakoey' target='_blank'><img height='60' src='http://klikptc.com/banner/banner2.gif' width='468'/>
                    <span>Klik PTC</span></a></li>
                    <li class='mysliderImage'>
                    <a href='http://klikajadeh.com/?r=webakoey'>
         <img height='60' src='http://klikajadeh.com/kadban/kad-anim1.gif' width='468'/>
                    <span>Klik Aja Deh</span></a></li>
                    <div class='clear mysliderImage'/>
                </ul>
                </div>

Kode yang dicetak warna merah, silakan sobat ganti dengan banner PTC sobat, dan kode yang dicetak biru, itu bisa sobat hilangkan atau ganti juga sesuai bannernya.

5. Selesai dan simpan template sobat.

Itulah tutorial singkat mengenai cara membuat widget slide show, khususnya buat sobat blogger yang menjalankan bisnis PTC dan ingin menghemat tempat buat banner2nya dengan slideshow widget ini. Sobat bisa otak-atik lagi kalau ingin merubah posisi, ukuran, atau mengganti dengan image saja. Sekian tutorial kali ini, saya hanya berbagi saja, semoga bisa dipahami bermanfaat. Happy Blogging
Lihat situs contoh klik disini
Special thanks to Today News Blogger Template 

8 komentar

wah...akhirnya muncul juga ni tutor...thanks berat ni mas udah ngerespon prtanyaan saya.. :)

@Andisyam: sama2 sob, silahkan dicoba smoga berhasil ya... :)

Waah...ternyata sobat satu ini ciamik juga dalam hal beginian,salut lur! Papua sehat,nuhun infonya kawan.

balum bisa juga mas..kga muncul slidenya..

wah beneran mas, akhirnya berhasil juga... hehehe, thanks mas

Boleh juga tipsnya...tapi kira2 mempengaruhi loading gak ya...karena kebanyakan gambar. kalo seperti blogku gimana...apa ada yang kurang mas

.andisyam: selamat ya sudah berhasil, sukses slalu blognya.
.blog tutorial: memang sob, sedikit mempengaruhi loading pada blog soalnya banyak gambar dan script jquery. tapi buat mempercantik sih lumayan. setelah sy mampir ke blog agan, blognya ringan ko, walaupun cukup bnyk gmbar tp bukan flash jd ga trlalu mempengaruhi loading.


EmoticonEmoticon