Tab view di atas diilhami ketika saya browsing di mizan.com. Tapi sayangnya saya mizan com menggunakan kode javascript untuk membuat tabview. Tapi saya buktikan bahwa membuat menu tab view tidak hanya bisa dikerjakan dengan menggunakan Javascript. Salah satu contoh menu tab view yang bagus bisa dibuat dengan menggunakan kode CSS seperti contoh di atas. Trik membuat menu tab view ternyata tidak cukup rumit karena bahasa CSS lebih mudah difahami daripada kode Javascript (paling tidak menurut saya).
Menu tab view yang saya maksud disini adalah satu kotak menu yang terdiri dari beberapa klasifikasi menu link dan tiap klasifikasi menu berisi list item yang berurutan secara vertical. Jika menu pada tab view menu yang menggunakan javascript biasanya berada di atas sub menu secara horizontal, maka dalam contoh kali ini, menu bisa dibuat secara vertikal sehingga tampilannya lebih indah.
Saya pernah mencoba menggunakan tab view dengan kode javascript, yang kemudian saya tinggalkan karena setelah ditest ternyata sangat berat. Browser membutuhkan waktu yang lama untuk membuka halaman blog. Tab view dengan CSS seperti ini lebih ringan karena tidak membutuhkan hosting file diluar blog. Dan yang lebih asyik lagi, tab view dengan CSS bisa didandani dengan foto background dan bahkan bisa dikelola menjadi slide show.
Jika berminat menampilkan Tab view ini, berikut adalah caranya.
1. Login ke Blog anda >> Klik Rancangan >> Edit HTML. Sebelumnya Save dulu Template anda.
2. Lalu cari kode <[[/skin]>. Lalu paste kode di bawah ini tepat di atas kode tadi:
/* defaults required for IE */
a, a:visited, a:hover, a:active, a:focus {color:#000;}
#holder {position:relative; background:transparent url(http://i552.photobucket.com/albums/jj355/Maurice_Avrahm/masri.jpg) top left no-repeat;margin:5px; width:560px; height:293px;border:2px solid #fff;}
#scrollbox {padding:0; width:170px; height:287px; margin-top:3px;margin-right:3px;list-style:none;float:right;}
#judul {float:left;color:#999;margin-top:100px; width:200px;margin-left:100px;text-decoration:none;text-shadow:0 2px 0 0 #fff; font-family:"trebuchet ms", sans-serif; font-size:28px; text-align:center;}
#judul a:hover{color:silver;text-shadow:0 2px 0 0 #fff; font-family:"trebuchet ms", sans-serif; font-size:28px; text-align:center;}
#scrollbox li {float:left;}
#scrollbox a {display:block; color:#999; text-decoration:none; border:1px solid silver; width:165px; height:30px; float:left; padding:2px; font-family:"trebuchet ms", sans-serif; font-size:24px; text-align:center;}
#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:0;}
#scrollbox a:hover {background:silver;border:1px solid yellow;}
#scrollbox a:hover span {width:380px; height:288px; margin-top:3px; left:3px; color:#000;z-index:100;}
#scrollbox a:active {border:0px solid #000;}
#scrollbox a:focus {border:0px solid #000; outline:0;}
* html #scrollbox a:active span {width:380px; height:270px; top:0; left:3px; color:#000; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:380px; height:288px; margin-top:3px; left:3px; color:#000; background:#fff; z-index:10; outline:0;}
3. Masukkan kode di bawah ini Widget HTML/Javascript. Posisi manapun yang anda inginkan. Sebenarnya, kode ini bisa dimasukkan ke tulisan blog misalnya jika anda ingin tab view menjadi slider photo. Inilah kodenya:
<div id="info">
<div id="holder"><span id="judul" class="judul"><b><a href="http://wisencare.blogspot.com">Menu Dengan <span style="color:yellow;">CSS</span></a></b></span>
<ul id="scrollbox">
<li><a class="slidea" href="3" tabindex="1">Good View<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtVzL1BQRU1pCKfLsK4tOd9mDGlM2Ic1ZUQFTWrBcqlHm8h-Gg6kqzU8bx1setDa5zR-vl4lofSzV943eDj5lMqw5F_uP4MhUubHjII1GohQO_nl2MAb5VgNM-GyffGBlSUk0eUwxAoAp/s370/butterfly.jpg" alt="" /></span></a></li>
<li><a class="slideb" href="#" tabindex="1">Shy<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jmGsnc8sF5ERWt-FaDDGy7BfmfiUxYfyweOJKnCTwAgQbsUGfzEkI81NtVjbTuvnu5b7KTq4smwW7qg16bkNpfquW7D55c_EE8enPUPk7aLXOgn1tU_BeoO6cM77WJ7ulcj72VRzNUMe/s370/pic11.jpg" alt="" /></span></a></li>
<li><a class="slidec" href="#" tabindex="1">Otter<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXcBsdOo74bfyheRPJj5ZN2Nvsz2DFN55Ig-bngs-Fwj18iF5HFrqAIbel5HRpMPVtPFv1w2-mM_jpNGJDXY6k3EuJ8BHJIX4S2JquFXXi_FE3ZM218T-SzHRYln0-OJrpfsovlyPKMLx/s370/pic3.jpg" alt="" /></span></a></li>
<li><a class="slided" href="#" tabindex="1">Bangau<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdqSRJPNyGxMVEzMQ3k4rJBBw3vzv7vwd7BpSbGe1dn6Cw840lURifmXsxs0CxpyVMMj0qI0Tx4dB4VDlkEUPXcaPGdYI0ahdT1DI-WG8w-leTo9T4rtwP15PaompUFPh5j3XLtq-49M6e/s370/pic10.jpg" alt="" /></span></a></li>
<li><a class="slidee" href="http://wisencare.blogspot.com" tabindex="1">Pelicans<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEaMtfWOCXfE_f7bYdfg4gb1qsUt1SNEPq8nypNqNp6zuoOiab9jzWErqGiClfb-HQPSfewOg0rhyzyf4t6t-YL6mLit14nYYd_6aAGxnekHK-KCwleOEWg8sgTyMsEh28fr1boKtntxy/s370/pic7.jpg" alt="" /></span></a></li>
<li><a class="slidef" href="http://mangarajaoloan.blogspot.com" tabindex="1">Marmut<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xOAcxgL0Dazf65hKjdxHe8uqtui09b-0Y40tw43ghl9EwUhuYbJvxtdZHlTQOLBQLjjhEls8ocTyOKpbqTqIeqMS6tnoAyY5m5qLPCyOpXhQ4SqKoVo-QEnzkHtjQlENDC-kzR4K3BEL/s370/pic6.jpg" alt="" /></span></a></li>
<li><a class="slideg" href="#nogo" tabindex="1">Kucing<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbOgNWrgyreP3GK_9QDINSIhHLFlIrLynWtJT3mx6f9fgPU4N8dH4r0vdaq6tR3U7-13YDavz65H8ptPVvSTYrBGt_-yGLg8S8EHg601TojOZlkfoJx6KR-rPEQJvEdWxdxtXPolj98-w5/s370/pic4.jpg" alt="" /></span></a></li>
<li><a class="slideh" href="#nogo" tabindex="1">Butterfly<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJe5AiMP35IoHlMe33fKfAOnV5jiFbAvqU7Zk_mPy9IpEL-xYzFzFYb7ymLExAyGt8pwzKeHmHR2Xw0MfHfVMQ1Q2LYWVUYsWuVTjcP1XzKe0eKp50v3JW8knHSKqjjGwF5c_522N0dyo/s370/pic1.jpg" alt="" /></span></a></li>
</ul>
</div>
</div>
Jika anda ingin mengganti gambar a:hover menjadi tulisan, katakanlah seperti RSS blog anda, atau RSS dari Feed Burner, atau Daftar Link vertikal, bisa dikerjakan. Caranya gampang. Ganti saja gambar yang ada di list item (li). Tapi akan lebih indah jika foto tetap berada ditempat, sementara anda membuat keterangan link di bawahnya. Ini solusi lain yang lebih baik..
Selamat Mencoba...
