Membuat Tab View Dengan DOMTab

Tabview merupakan cara mudah untuk memberikan informasi pada halaman multiple, Tabview sangat cocok digunakan pada ruang terbatas karena satu tab dalam tabview akan mewakili satu halaman. So.., Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak.

Diatas merupakan contoh Tabview dengan menggunakan srcipt DOMTab, pada Tabview kita juga bisa mengubah warna, menambahkan jumlah tab dan mengubah sendiri ukuran dari tabview sesuai dengan kebutuhan. Agar lebih mudah, saya akan menjelaskannya cara menggunakannya.

Nach, langsung saja kita praktekkan...

Langkah Pertama: Backup Template
Ketika kita akan mengubah template, membackup tamplate adalah sesuatu yang wajib dilakukan, kenapa.. karena jika ada kesalahan yang terjadi pada template kita dan kita tidak membackup-nya yah.. sudah bisa ditebak apa yang terjadi selanjutnya.

Langkah Kedua: Tambahkan Kode CSS
Untuk mengubah tampilan jadi lebih menarik, kita bisa mengubah warna berdasarkan code CSS dibawah ini.

div.domtab{
padding:0;
width:100%;
font-size:90%;
}
ul.domtabs{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li{
float:left;
padding:0 5px 0 0;
text-align: center;
width: 90px;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover{
padding:.5em 1em 0;
display:block;
background:#999;
color: #333;
height:2em;
font-weight:bold;
text-decoration:none;
}
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
height:auto;
min-height:2em;
}
ul.domtabs a:hover{
background:background:#ccc;
}
div.domtab div{
clear:both;
width:auto;
color:#ddd;
padding:0 5px;
margin: 0 0 1em 0;
}
div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {
margin: 0 0 0;
padding: 0;
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover{
background:#ccc;
color: #333;
}
div.domtab div .sidebar-tab ul li {
list-style: none;
padding: 3px 0 5px 0;
}
div.domtab div .sidebar-tab ul li a {
list-style: none;
margin: 0;
padding: 0;
}
div.domtab div .sidebar-tab ul {
width: 100%;
margin: 0;
padding: 0;
}
#domtabprintview{
float:right;
padding-right:1em;
text-align:right;
}
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover{
color:#ccc;
}
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active{
color:$linkcolor;
padding:1em .5em;
font:bodyfont;
text-decoration: none;
}
div.domtab div h2 a,
div.domtab div h2 a:hover,
div.domtab div h2 a:active{
color:#cfc;
display:inline;
padding:0;
font-weight:normal;
font-size:1em;
}

body#layout #sidebar-tabs-1 .widget,
body#layout #sidebar-tabs-2 .widget,
body#layout #sidebar-tabs-3 .widget {
display: block; clear: both;

div.domtab div {display: block; clear: both;}

Copy-Paste semua kode diatas, lalu tambahkan sebelum kode </b:skin>.

Langkah Ketiga: Tambahkan Kode JavaScript
Untuk kode JavaScript yang akan digunakan, saya direct dari Blogger Buster.

<!--[if gt IE 6]>
<style type="text/css">
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
height:3em;
}
</style>
<![endif]-->
<script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/>

Copy-Paste semua kode dibawah ini, kemudian tambahkan sebelum kode </head>.

Langkah Keempat: Tambahkan Kode DOMTab
Untuk penambahan kode ini, sebenarnya tergantung pada pilihan dimana kita akan meletakkan Tabview. Dalam contoh ini, saya letakkan di dalam Sidebar. Selanjutnya, cari kode warna Hijau dibawah ini:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar-top-section' preferred='yes'>

K'lo kode yang dicari dalam template tidak ada, coba cari yang seperti ini <div id='sidebar'>. Pokoknya yang bau Sidebar, soalnya Tabview kita tambahkan ke dalam sidebar. .

Masukkan kode dibawah ini sesudah kode diatas dan sebelum kode <b:section>.

<div class='domtab'>
<ul class='domtabs'>
<li><a href='#recent'>Recent Posts</a></li>
<li><a href='#cats'>Categories</a></li>
<li><a href='#arc'>Archives</a></li>

</ul>
<div style='border: 3px solid #ccc;'>
<p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='Feed1' locked='false' title='' type='Feed'>
<b:includable id='main'>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<b:loop values='data:feedData.items' var='i'>
<li class='sidebar-list'>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != &quot;&quot;'>
<span class='item-date'>
&#160;-&#160;<data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != &quot;&quot;'>
<span class='item-author'>
&#160;-&#160;<data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section></p>

</div>
<div style='border: 3px solid #ccc;'>
<p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='sidebar-list'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section></p>
</div>
<div style='border: 3px solid #ccc;'>
<p><a id='what' name='arc'/>
<a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section></p>
</div>

</div>

Jika installasi kode sukses, maka kita akan melihat Tab View dalam template blogger kita.

Langkah Kelima: Selesai