Menawan Dengan Tab View Menu

Memperindah tampilan blog selalu menjadi prioritas para blogger di samping membuat tulisan-tulisan yang bermutu dan berkualitas. Salah satu cara yang ditempuh adalah dengan memasang widget tab view menu pada sidebar. Selain tampilan yang memukau, dengan menggunakan tab view menu, juga dapat menghemat space pada sidebar sehingga dapat digunakan dengan berbagai widget lain sesuai kebutuhan blog.

Membuat tab view menu tidak sesulit yang dibayangkan. Saya akan memberikan beberapa langkah jitu untuk membuat tab view menu yang diambil dari dynamicdrive.com.

1. Login ke Blogger > Design > Edit HTML
2. Cari kode </b:skin> dan masukkan kode CSS berikut ini tepat di atasnya.

/* CSS for Shade Tabs */
.shadetabs{padding:3px 0; margin-left:0; margin-top:1px; margin-bottom:0; font:bold 12px Verdana; list-style-type:none; text-align:left; /*set to left, center, or right to align the menu as desired*/}
.shadetabs li{display:inline; margin:0;}
.shadetabs li a{text-decoration:none; position:relative; z-index:1; padding:3px 7px; margin-right:3px; border:1px solid #778; color:#2d2b2b; background:white url(https://sites.google.com/site/situsbeus/lomari/shade.gif) top left repeat-x;}
.shadetabs li a:visited{color:#2d2b2b;}
.shadetabs li a:hover{text-decoration:none; color:#2d2b2b;}
.shadetabs li a.selected{/*selected main tab style */position:relative; top:1px;}
.shadetabs li a.selected{/*selected main tab style */background-image:url(https://sites.google.com/site/situsbeus/lomari/shadeactive.gif); border-bottom-color:white;}
.shadetabs li a.selected:hover{/*selected main tab style */text-decoration:none;}
.tabcontent{display:none;}
@media print{.tabcontent{display:block !important;}}

3. Cari kode </head> dan masukkan kode berikut tepat di atasnya.

<script src='https://sites.google.com/site/situsbeus/lomari/tab_content.txt' type='text/javascript'/>

4. Cari kode <div class='column-right-inner'> dan letakkan kode berikut tepat di bawahnya.

<div class='tabview'>
  <ul class='shadetabs' id='countrytabs'>
  <li><a class='selected' href=&#039;http://catetan-karuhun.blogspot.com/' rel='country1'>Tab1</a></li>
  <li><a href='http://catetan-karuhun.blogspot.com/' rel='country2'>Tab2</a></li>
  <li><a href='http://catetan-karuhun.blogspot.com/' rel='country3'>Tab3</a></li>
  </ul>
  <div style='border:1px solid gray; width:93%; margin-bottom:1em; padding:10px; height:200px; overflow:auto;'>
  <div class='tabcontent' id='country1'>
    <b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'></b:section>
  </div>
  <div class='tabcontent' id='country2'>
    <b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'></b:section>
  </div>
  <div class='tabcontent' id='country3'>
    <b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'></b:section>
  </div>
<script type='text/javascript'>
var countries=new ddtabcontent(&quot;countrytabs&quot;)
countries.setpersist(true)
countries.setselectedClassTarget(&quot;link&quot;) //&quot;link&quot; or &quot;linkparent&quot;
countries.init()
</script>
<hr/>
</div>
</div>

5. Edit tampilan tab view yang telah dibuat sesuai dengan blog Anda.
6. Save template dan lihat hasilnya.

Catatan:
> Sebaiknya lakukan download template dahulu sebelum melakukan perubahan pada template.
> Template yang saya gunakan adalah Simple Template milik Josh Peterson.
> Link blog serta link gambar silahkan ganti dengan milik Anda.

Sumber: dynamicdrive.com