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.
.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.
4. Cari kode <div class='column-right-inner'> dan letakkan kode berikut tepat di bawahnya.
<ul class='shadetabs' id='countrytabs'>
<li><a class='selected' href='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("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
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.