Cara Mudah Membuat Tab View

Today Tutorial blog and Blogger hack  TabView adalah gadget yang digunakan untuk memuat informasi  atau gadget laiinnya agar lebih menghemat space di blog. dan juga membuat tampilan blog lebih dinamis. Tab View bisa anda isi dengan Shoutmix,  twitter, recent comment, or else.

Dengan Tutorial blog di sini kita akan membuat TabView dengan mudah, Jadi silahkan disimak

• Masuk ke Layout, Pilih Edit HTML
• Backup blog kamu dan centang Expand widget Template

Copy-Paste code  kode di bawah dan letakkan di atas  ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /*width of main menu*/ text-align: center;
height: 24px; /* height of main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #F4F4F4; /* border colour from above */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Type of Fonts */
font-weight: 900;
color: #F4F4F4; /* Colour of fonts*/
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;/* background colour*/
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #F4F4F4; /* line colour menu*/
overflow: hidden;
background-color: #FFFFFF; /* backgorund colour */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;

 

• Sekarang letakkan kode di bawah ini sebelum  tag </head>

<script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>

 

• kemudian Simpan
• Kembali ke Layout dan tambahkan sebuah gadget
• PilihHTML/Javascript and Copy-Paste kode di bawah ini

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">

<a>Tab 1</a>

<a>Tab 2</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">

Code Here 1.1 <br />

Code Here 1.2<br />

</div>
</div>
<div class="Page">
<div class="Pad">
Code Here 2.1 <br />
Code Here 2.2<br />
</div>
</div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

 

Simpan dan silahkan lihat penjelasan di bawah:

• Untuk merubah tinggi dan lebar silahkan ganti angka di warna hijau width: 350px and  height: 250px
• Ganti warna biru dengan teks atau judul informasi anda
• Ganti warna merah dengan kode javascript  seperti : shoutmix code, image, or yang lainnya

That’s tutorial blog today, Semoga berhasil mengaplikasikannya dan jika ada masalah silahkan contact saya

Thanks for coming in tutorial blog and blogger hack