Membuat Tab View Dengan Css Diblogspot

Only CSS and Jquery - akan menjelaskan cara membuat Tabview dengan menggunakan CSS, disini Css akan menambah keindahan dari Tabview bias . ayo langsung aja lihat cara berikut :

• Masuk Ke Rancangan > Edit Html > Expand Widget Template
• Cari kode ]]></b:skin>  lalu letakkan kode berikut diatasnya

/* 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;}

• kemudian Save Template.

Langkah Selanjutnya adalah memasang widget Tabview di Sidebar :

<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/AVvXsEibqt8KV-gFxXLV5WwTjG-es5aOPOduaVkzelgsbaEU9JYpPy5B-tIEmoDOn4RRoptAWpu-Vm7irA5NtmZHcKtuJBk6h-3Ztek4p4G_lqH7oJMWb9y47rOlYYFF_iqX-Se_7-hkVcLg7wLF/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/AVvXsEjQ_t0lFydU0GQ0rK3r1-ygXp8yhE5FxAPpzgM1t0RD1DDl1xiaO-PdUd7uMw15N1alzv9_O2CmDWjMKQU4JJRqjVcp0bZn6lMRwDge4efyJnaBM2M76X-GblLph7MI6egIOzVSlI-ojam5/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/AVvXsEjIJXCMGqQEIS0EW2O_Ybq3G-PAZtbzoP-hOyECbZHYTC2-cQyG0-fcb7pm06HzmuF7c6m5O4Mdsp-hGDhLEeKlLTn18IzPH5L4prlGSlgwGPpOAJPuZhIvahCyrNSgNE4dDOB3Cw6ySG8S/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/AVvXsEjShEUgORnPwF6_pE6ymlI9YOwTOV7Dx9-vOVFAAUwkjt5gtbYbnLz7T6-UiGiy_VxRderLg90m5Tw-do3C7RwhY7-XrlQSv4XazFBtqqbfhffVf3en3XPy4ufnvqxxSMUAP8vPD51FkxDw/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/AVvXsEiMQ-OL9dBiCB03lIvMv0Vq_0nrxSis-YCLwduhpBt1pnEAn5-D4XNM6CyR0hWM63Qhdp7EyEuQfAWOH-frTOXab8ZAb8ONAsp9KTqLG50mSiWFP5jnW3L4d6kIgU89Gf5PV9fIMdhJvReA/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/AVvXsEj2FGf_nQ8Lm5eN5QXrhAt8hsC3S8ch3FR-f5afVPAq8cEsGO-ya6uqypmEbuvuTzHQu0Gx2G9U3bdAO7lkr305tz6dN74oAfUNCZ5zaQ-09W0_P2OETuyKzusDEIX_ehj7zToVyskJiYsZ/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/AVvXsEi7A_P14-0AyH_SfYydj4D3rgs7Cf5PHyDFGqpL8m9dKEZgfTrOBPqqRiRmNEzFbHn407VBHjTDr47id3k_no1lrx7EFPmi-hRGTnysDaonPNU4aL_2XZeD5vqfbwWaiUHDnDRk3Lvxq0NQ/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/AVvXsEjkDiDgEQKTo8EXkSckdrQlDt-aJVLLOX9kpgi-FnkkVe0gn03i2ONICIGFTbxP41FuLtcXHyp9qz-Nkec1u1ZK-N0fmy6yMk3_emvPPjJ3MIDYgrrbMBBe_qTjMHdiK08IJta7d4rmU0ib/s370/pic1.jpg" alt="" /></span></a></li>
</ul>
</div>
</div>

Kemudian Save.

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
Membuat Tab View Dengan Css Diblogspot