Membuat Tab View Keren Tanpa Edit HTML

Membuat Tab View Keren Tanpa Edit HTML

Untuk menjadikan tampilan blog yang profesional  diperlukan beberapa tips ataupun trik, salah satunya Membuat Tab View Keren Tanpa Edit Html. Umumnya membuat tab view ini harus mengedit Html terlebih dahulu tetapi tips yang saya berikan ini sangat mudah sekali, tidak perlu bersusah payah untuk melihat kode-kode yang ada di bagaian tata letak edit html. Jika Anda tertarik dengan tampilan gambar diatas ikuti saja langkah-langkah dibawah ini tanpa ada yang terlewati satu pun itu.
Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman/Tata Letak  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; 
height: 22px; 
text-align: center; 
margin: 0px 0px 0px 0px; 
background-color:#04916b;
padding-top: 6px;
border: 1px solid #ffffff; 
border-bottom: 0px solid #034735; 
font-family: "Arial, Helvetica, sans-serif", Arial; 
font-weight: 900;

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #034735; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #04916b;-moz-border-radius:5px;-webkit-border-radius:5px; 
overflow: hidden;
background-color: #fff; 
}
div.TabView div.Pages div.Page
{
padding: 2px;
height: 100%;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 0px 5px;
}
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3mSGmRbYMbibTSFQ1KYtlSkCQ1D1GUW1ue_k0ZEelzwMt4BFEz7BwmZBc_mmxdD_C5f3oK0vfyskQ-NJrM-H_6BWCGllyNNXQv-JFTzheLRh1OSalL2xMhL9cZkkM-rr9TXRhXBfXuiA/") no-repeat left center;
border-bottom:1px dotted #7f7f7f;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px;height:350px;" class="Pages">

<div class="Page">
<div class="Pad">
Konten tab 1 ( srcipt/kode anda ) 
</div></div>

<div class="Page">
<div class="Pad">
Konten tab 2 ( script/kode anda )
</div>
</div>

<div class="Page">
<div class="Pad">
KOnten tab 3 (script/kode anda)
</div></div>
</div></div></form>

<script src="https://sifadly.googlecode.com/files/tab-view-sifadly.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan:

• Tulisan berwarna merah merupakan keterangan untuk isi atau konten dari tab view tersebut.
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna kuning merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 350 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template sidebar anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini. Dan tunggu tutorial dan tips blog dari fadly selanjutanya.