Cara Membuat Menu Multi Tab View Sidebar di Blogspot

↑ Grab this Headline Animator

Cara Membuat Menu Multi Tab View Sidebar di Blogspot 

Hay sobat blogger , pada kesemaptan kali ini saya akan share nih widget Menu Multi Tab View di Sidebar . sebenarnya widget ini udah saya share dengan judul Membuat 3 Sub Menu di Sidebar , namun saya share yang ini dengan tampilan yang berbeda pastinya  . 

Fungsi Sub Menu Side Bar :

Sub Menu Side Bar tentu saja membuat  blog sobat menjadi lebih teratur ,  sehingga pengunjung bisa dengan cepat mengetahui apa saja yang ada di tampilan blog kita,   Okeh tanpa perlu basa basi yang panjang langsung saja sahabat ikuti langkah berikut ini :

 Membuat Menu MultiTab View Sidebar

langkah-langkah Membuat Menu Multi Tab berikut:

1. Login blogger sobat.
2. Masuk ke menu Setting Blog > Tata Letak.
3. klik "Add Gadget " pilih yang " HTML / Java Script "
4. Silahkan Copy paste kode di bawah kotak  ini

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /*Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span >TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">
<div class="Page">
<div class="Pad">

Masukan Kode HTML Widget Untuk TAB 1

</div>
</div>
<div class="Page">
<div class="Pad">

Masukan Kode HTML Widget Untuk TAB 2

</div>
</div>
<div class="Page">
<div class="Pad">

Masukan Kode HTML Widget Untuk TAB 3

</div>
</div>
</div></div></form>
<script style="text/javascript" src="http://projectloss.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

5.  Setelah sudah menambahkan kode nya tinggal kalian setting saja warna ,
     ukurannya , tentunya widget  Menu Multi Tab View Sidebar di ILMU ANE
     sudah di setting warnanya , yang kode di atas masih widget biasanya .
    

Dunia Aneh
Kumpulan Artikel Unik dan Aneh sepanjang Masa
Catatan dosen

Tips Android dan BBM
Kumpulan Ulasan tentang Tips Android dan BBM
Putera Dosen

Meme Lucu Banget
Kumpulan Meme Lucu yang lagi ngetren
Cds Blog

Kumpulan Artikel Menarik
Semua Artikel yang Kamu Cari Ada di sini
230 Penulis
Ads by BLOGGER

Posted by Very Handika

Tweet