Buat Menu Tab View Rotari

Buat Menu Tab View Rotari, ada banyak cara untuk mempercantik tampilan template blog kita satu satu di antaranya yaitu membuat menu tab view rotari. Dengan adanya menu tab view ini maka akan banyak ruang template yang bisa diringkas menjadi sedederhana. Pada posting kali ini akan di jelaskan cara membuat tab view yang bisa bergerak secara siklus tanpa berhenti, dan akan berhenti jika tab menu tersebut di klik dengan mouse. Pada tab menu ini bisa di isi dengan berbagai macam tampilan yaitu recent comments, recent post, blogroll shoutbox, foto dan lain-lain. Adapun cara membuat menu tab view rotari di blogger tersebut sebagai berikut :

1. Login ke blogger.

2. Klik Layout >> Edit HTML

3. Copy kode di bawah ini, lalu paste di atas kode ]]></b:skin>

.indentmenu{
font: bold 10px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color:#0000cd; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#5f9ea0;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 320px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

4. Copy kode di bawah ini, lalu paste 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>

5. Simpan template, dan masuk ke page elements >> add gadget, lalu copy paste kode dibawah ini pada kolom yang tersedia

<div style="float:left;margin:0px 0px 0px 0px;padding:0px;height:230px;">

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">Comment</a></li>
<li><a href="#" rel="tab2"> New Post </a></li>
<li><a href="#" rel="tab3"> Blogroll </a></li>
<li><a href="#" rel="tab4">Tools</a></li>
</ul>
<br style="clear: left"/>
</div>

<div style="width:280px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda
</div></div>

<div id="tab2" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda
</div></div>

<div id="tab3" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda
</div></div>

<div id="tab4" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda

</div></div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2500)

</script></div></div>

6. Simpan template dan pembuatan menu tab view rotari selesai.

Modifikasi nama deretan tab dengan urutan tab seperti comments, new post, blogroll dan tools bisa di rubah sesuai dengan keinginan kita. Atau mau merubah yang lain silahkan rubah kode-kode yang ada di gadget tersebut.

Perhatikan kode di bawah ini

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2500)

</script>

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain tinggal mengganti nilai 2500 menjadi nilai yang lain. Misalnya 3000. Semakin besar nilainya maka semakin lama perpindahannya.

Untuk mengubah tinggi widget ganti angka 230px menjadi yang lain, dan untuk mengubah lebar widget ganti angka 280px menjadi yang lain.

Untuk mengubah tinggi blogroll ganti angka 175px menjadi yang lain.

Selamat mencoba, mau lihat contoh di blog ini memakai menu tab view rotari.

Artikel Berkaitan