Sunday, May 29, 2011

Menambahkan Menu Multi Tab di Blogspot

Setelah satu minggu saya tidak mengepost tentang tutorial atau pun informasi yang saya punya, maka hari ini saya akan membuat sebuah postingan yang tidaklah susah, Kali ini saya akan membuat tutorial tentang Meanbahkan Menu Multi Tab di Blogspot, Sebenarnya Tab ini berguna untuk anda yang tidak memiliki banyak tempat lagi untuk membuat link - atau pun yang lainnya, ingin tahu caranya?. simak tutorial saya berikut ini,






Berikut langkah - langkah nya,

  • Login akun Blogger anda
  • Masuk ke Layout >> Edit HTML 
  • Setelah itu cari script berikut ]]></b:skin> 
  • Masukan kode dibawah ini sebelum script diatas
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
  •  Warna Abu- abu yang di atas bisa anda ganti sesuai keinginan anda masing - masing,
  • Selanjutnya masukkan script di bawah ini sebelum script </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
  • Dan Save,
  • Selanjutnya masuk ke Layout >>Page Elements >>pilih Add Gadget yang akan anda tempatkan untuk menu multi tab ini >>HTML/Javascript
  • Dan masukkan script berikut ke dalam Add Gadget tersebut, 

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
  • Dan kalau anda ingin mengubah atau ingin menyesuaikannya silahkan ganti script yang berwarna Abu - Abu tersebut
  • Dan Selamat mencoba  : D

No comments:

Post a Comment