5 langkah membuat widged multyTab

Banyak orang yang ingin menggunakan widget multi tab. Hal ini sangat terlihat bagus dan menghemat banyak ruang untuk blog blogspot anda. Dengan widget multi tab atau multitabber Anda dengan mudah dapat menempatkan banyak hal dalam ruang yang lebih kecil dari blog Anda. Untuk menambahkan widget ini sangat mudah. Mungkin, Anda sudah mencari dan menemukan banyak tutorial. Sebagian besar tutorial hanya mengatakan cara-cara untuk menerapkan sebagai sebuah widget yang terletak di sidebar atau mungkin dalam post-footer. Sekarang, saya sudah mencoba dan menemukan solusi untuk menambahkan widget ini di dalam posting. Jadi saya bisa menggunakannya untuk halaman statis saya. Teknik-teknik yang saya akan memberitahu Anda cukup sederhana dan Anda hanya membutuhkan dasar CSS / HTML coding keterampilan untuk melaksanakan hal ini di blog Anda. Ini benar-benar disesuaikan dan dapat digunakan sebanyak yang Anda butuhkan. Lihat DEMO POST

Get the Javascript

Buka Blogger template editor kemudian cari ]]></b:skin>. copy paste kode dibawah ini :

<!--Multitabber Script-->
<script type='text/javascript'>
//<![CDATA[

function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
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") //if cycleit() is being called by user, versus autorun() function
this.cancelautorun() //stop auto cycling of tabs (if running)
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},

setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},

urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
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++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},

expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},

expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i++){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)
},

cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},

init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
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 //Selected tab index, if found
}
}
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function

} //END Prototype assignment

//]]>
</script><!--End Multitabber-->

kemudian Save template. anda.

widget multytab dengan  CSS

Then, open again template editor, Copy and paste this CSS codes after the previous scripts.

<style type="text/CSS">
#tabbody1, #tabbody2 {
float:left;
width:100%;
margin:0;
padding:10px 0;
background:transparent;
}
#pagetabs1.btabs, #pagetabs2.btabs {
margin:0;
padding:0;
}
ul.btabs {
list-style:none;
float:left;
width:100%;
margin:0;
padding:0;
border-top:2px solid #555;
border-bottom:2px solid #555;
}
ul.btabs li {
float:left;
position:relative;
margin:0;
padding:0;
padding-bottom:10px;
overflow:hidden;
background:transparent;
}
ul.btabs li a {
font-size: 1em;
text-decoration:none;
color:#999;
display:block;
margin:10px 10px 0 0;
padding: 0 10px;
outline: none;
}
ul.btabs li a:hover {
color:#000;
background:#333;
-moz-border-radius:10px;
border-radius:10px;
}
ul.btabs li a.selected {
color:#000;
background: #555;
-moz-border-radius: 10px;
border-radius: 10px;
}
.tabcontent {
display:block;
margin:0 0 20px;
float:left;
padding:20px 0;
border-bottom:1px dashed #555;
}
.tabcontent {
display:none;
}
.tabcontent ul li {
margin-bottom:20px;
}
.tabcontent img {
float: left;
width:90px;
height:90px;
margin: 0px 20px 20px 0px;
padding: 5px;
clear:left;
border: 1px solid #555;
}
</style>

Anda dapat mengedit CSS atau menambahkan stylings lagi sesuai dengan template anda. Simpan template sebelum Anda pergi ke langkah berikutnya.

Buat halaman statis

Seperti yang Anda tahu, Anda dapat membuat hingga 10 halaman statis dengan Blogger. Anda harus memutuskan halaman yang akan menggunakan multitabber ini. Untuk membuat halaman statis yang lain, pergi ke Edit Post> Edit Halaman> New Page. Berikan judul untuk halaman tersebut, kemudian mempublikasikannya. Sekarang Anda memiliki URL khusus untuk halaman baru statis Anda.

Reset elemen halaman statis

May be it's not necessary for you. I want my static page look different by hiding some elements and resetting certain stylings. To do this, find</head>. Copy and paste this codes just before it.

<b:if cond='data:blog.url == &quot;YOUR STATIC PAGE URL&quot;'>
<style type="text/CSS">
h3.entry-title , h3.entry-title a {display:none;}
.post-body {margin:0;padding:0;background:none;border:none;}
.post-body ul, .post-body ul li, .post-body ol {margin:0;padding:0;}
#blog-pager {display:none;}
</style>
</b:if>

Mulai menyusun isi

Kembali ke halaman statis Edit Post> Edit Halaman>, kemudian Pilih Edit HTML. Paste kode-kode ini di dalam area teks..

<ul class="btabs" id="pagetabs1">
<li><a class="selected" href="#" rel="tab1">YOUR TAB 1 TITLE</a></li>
<li><a href="#" rel="tab2">YOUR TAB 2 TITLE</a></li>
<li><a href="#" rel="tab3">YOUR TAB 3 TITLE</a></li>
</ul>
<div id="tabbody1">
<div class="tabcontent" id="tab1">
YOUR TAB 1 CONTENTS HERE
</div>
<div class="tabcontent" id="tab2">
YOUR TAB 2 CONTENTS HERE
</div>
<div class="tabcontent" id="tab3">
YOUR TAB 3 CONTENTS HERE
</div>
</div>

<script type="text/javascript">
var countries=new ddtabcontent("pagetabs1")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

* Catatan Jika Anda ingin menggunakan multitabber sama untukhalaman lain atau elemen statis, ganti ID tabbody1> tabbody2 danpagetabs1> pagetabs2.

* Update Script multitabber tidak sempurna. Isi Anda tidak akanmenunjukkan jika pengguna menonaktifkan javascript. Juga, tabpertama tidak selalu tab aktif. Hal ini tergantung pada tab yang telahdiklik sebelumnya. Sekarang, saya pindah untuk menggunakanjquery untuk multitabber saya. Lihat saya 'Pasal Halaman'.
maaf kalau artikelnya tidak jelas
ini merupakan terjemahan dari fiveforblogger.blogspot.com