Demo
Bagaimana Cara Membuatnya??
1. Login ke account blogger
2. Klik tata letak
3. Klik Tab Edit Html
4. Masukkan kode CSS di bawah ini, diatas ]]></b:skin>
.indentmenu{font:bold 11px Arial;width:100%}.indentmenu ul{float:left;background:transparent;margin:2px;padding:0}.indentmenu ul li{display:inline}.indentmenu ul li a{float:left;color:#000000;text-decoration:none;border:1px solid #ccc;margin:2px;padding:5px 11px}.indentmenu ul li a:hover{background:#ddd}.indentmenu ul li a:visited{color:#000}.indentmenu ul li a.selected{color:#FFFFFF!important;padding-top:6px;padding-bottom:4px;border:1px solid #000;background:#cc0000}.tabcontentstyle{border:1px solid gray;width:450px;margin-bottom:1em;padding:10px}.tabcontent{display:none}@media print{.tabcontent{display:block!important}}
5. Copy kode Javascript di bawah ini, kemudian pastekan atau letakkan di atas kode </head>
<script type='text/javascript'> //<![CDATA[ function ddtabcontent(tabinterfaceid){ this.tabinterfaceid=tabinterfaceid this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") this.enabletabpersistence=true this.hottabspositions=[] this.currentTabIndex=0 this.subcontentids=[] this.revcontentids=[] this.selectedClassTarget="link" } ddtabcontent.getCookie=function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); if (document.cookie.match(re)) return document.cookie.match(re)[0].split("=")[1] return "" } ddtabcontent.setCookie=function(name, value){ document.cookie = name+"="+value+";path=/" } ddtabcontent.prototype={ expandit:function(tabid_or_position){ this.cancelautorun() var tabref="" try{ if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) tabref=document.getElementById(tabid_or_position) else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) tabref=this.tabs[tabid_or_position] } catch(err){alert("Invalid Tab ID or position entered!")} if (tabref!="") this.expandtab(tabref) }, cycleit:function(dir, autorun){ if (dir=="next"){ var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0 } else if (dir=="prev"){ var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1 } if (typeof autorun=="undefined") this.cancelautorun() this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]]) }, setpersist:function(bool){ this.enabletabpersistence=bool }, setselectedClassTarget:function(objstr){ this.selectedClassTarget=objstr || "link" }, getselectedClassTarget:function(tabref){ return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref }, urlparamselect:function(tabinterfaceid){ var result=window.location.search.match(new RegExp(tabinterfaceid+"=(d+)", "i")) return (result==null)? null : parseInt(RegExp.$1) }, expandtab:function(tabref){ var subcontentid=tabref.getAttribute("rel") var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/s+/, "")+"," : "" this.expandsubcontent(subcontentid) this.expandrevcontent(associatedrevids) for (var i=0; i<this.tabs.length; i++){ this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : "" } if (this.enabletabpersistence) ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition) this.setcurrenttabindex(tabref.tabposition) }, expandsubcontent:function(subcontentid){ for (var i=0; i<this.subcontentids.length; i++){ var subcontent=document.getElementById(this.subcontentids[i]) subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" } }, expandrevcontent:function(associatedrevids){ var allrevids=this.revcontentids for (var i=0; i<allrevids.length; i++){ document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none" } }, setcurrenttabindex:function(tabposition){ for (var i=0; i<this.hottabspositions.length; i++){ if (tabposition==this.hottabspositions[i]){ this.currentTabIndex=i break } } }, autorun:function(){ this.cycleit('next', true) }, cancelautorun:function(){ if (typeof this.autoruntimer!="undefined") clearInterval(this.autoruntimer) }, init:function(automodeperiod){ var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) var selectedtab=-1 var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) this.automodeperiod=automodeperiod || 0 for (var i=0; i<this.tabs.length; i++){ this.tabs[i].tabposition=i if (this.tabs[i].getAttribute("rel")){ var tabinstance=this this.hottabspositions[this.hottabspositions.length]=i this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") this.tabs[i].onclick=function(){ tabinstance.expandtab(this) tabinstance.cancelautorun() return false } if (this.tabs[i].getAttribute("rev")){ this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/s*,s*/)) } if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){ selectedtab=i } } } if (selectedtab!=-1) this.expandtab(this.tabs[selectedtab]) else this.expandtab(this.tabs[this.hottabspositions[0]]) if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){ this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod) } } } </script>
6. Jika sudah, silakan SIMPAN TEMPLATE7. pilih "Elemen Halaman"
8. Tambah Gadget, lokasinya terserah, dimana anda akan meletakkannya
9. Kemudian Pilih HTML/Javascript
10. Kemudian Masukkan kode di bawah ini kedalam "HTML/Javascript"
<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:330px;"> <div style="width:380px;text-align:left;padding: 5px; margin-bottom:1em"> <div id="tab2" class="tabcontent"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Christina Aguilera" width="380" src="http://media.vivanews.com/thumbs2/2010/03/15/86645_christina_aguilera___rambut_pendek_300_225.jpg?imgmax=800" height="200" title="Christina Aguilera" /> <p><h3> <a href="http://galeriselebritis.blogspot.com/2010/05/doyan-nonton-tarian-erotis.html">Christina Aguilera Doyan Nonton Tarian Erotis</a> </h3></p> Christina Aguilera mengaku hobi melihat lekuk tubuh wanita seksi. Tak heran jika ia senang </div> <div id="tab3" class="tabcontent"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Nikita Willy" width="380" src="http://www.detikhot.com/images/content/2010/05/13/230/nikita_willy_285_ebi.jpg?imgmax=800" height="200" title="Nikita Willy" /> <p><h3> <a href="http://galeriselebritis.blogspot.com/2010/05/nikita-willy-tertantang-gonta-ganti.html">Nikita Willy Tertantang Gonta-ganti Cowok</a> </h3></p> Harus menghadapi satu cowok bagi Nikita Willy adalah kurang. Namun itu hanya berlaku untuk </div> <div id="tab1" class="tabcontent"> <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Mama lauren" width="380" src="http://image.tempointeraktif.com/?id=35263&width=274" height="200" title="Mama lauren" /> <p><h3> <a href="http://galeriselebritis.blogspot.com/2010/05/ramalan-terakhir-mama-lauren.html">Ramalan Terakhir Mama Lauren</a> </h3></p> Sebelum meninggal ternyata Mama Lauren punya ramalan terakhir. Menurut penerawanganya kondisi </div> </div> <div id="pettabs" class="indentmenu"> <ul> <li><a href="#" class="selected" rel="tab1">1</a></li> <li><a href="#" rel="tab2">2</a></li> <li><a href="#" rel="tab3">3</a></li> </ul> <br style="clear: center" /> </div> <script type="text/javascript"> var mypets=new ddtabcontent("pettabs") mypets.setpersist(true) mypets.setselectedClassTarget("link") mypets.init(5000) </script></div>
Kalau Sudah selesai, klik "simpan"
1 komentar:
good tutorial
Posting Komentar