Cara Membuat Menu Multi Tab View Sidebar di Blogspot

ILMUANE new update

↑ 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

21 Responses to " Cara Membuat Menu Multi Tab View Sidebar di Blogspot "

  1. multi tab menu memang sangat bagus gan karena bisa menghemat tempat :D

    ReplyDelete
  2. wuahahah nemu juga. soalnya dulu saya mau nyari tapi gk tau keyword nya apa, eh nemu disini bismilah jadi kak

    ReplyDelete
    Replies
    1. beruntung kali berkunjung kesini dapet tutornya : good

      Delete
  3. cara dapetin kode html Label, Popular post dan Arsip.. gmna ??

    ReplyDelete
  4. cara membuat menu di dalam sub menu gimana ya...?
    mohon pencerahannya.

    ReplyDelete
  5. Mantaap gan infonya :)
    Ditunggu info yang bermanfaat lainnya
    Izin share ya
    http://obattradisional22.com/obat-tradisional-tbc/
    http://obattradisional22.com/

    ReplyDelete
  6. Mantaap sekali gan artikelnya, sangat membantu sekali
    Izin nyimak saja ya gan :)

    ReplyDelete
  7. makasih banyak buat infonya gan,, nice post..

    http://goo.gl/z9xiK4 - obat jantung koroner

    ReplyDelete
  8. Keren sob artikelnya, ditunggu artikel yang lainnya
    http://goo.gl/HmEbth

    ReplyDelete

SILAHKAN BERKOMENTAR YANG SOPAN... Jangan meninggalkan link aktif , komentar spam tidak akan dipublikasikan!