Membuat Tabview Menu Di Blog Blogger

Untuk Cara bikin tabview menu pada blog blogger, atau cara membuat tabel menu atau tabwiew menu pada sidebar blogger adalah seperti berikut.

Pertama login ke Akun blogger dan pilih Edit HTML lalu cari kode ]]></b:skin> kalo udah ketemu langsung aja copy kode dibawah ini dan letakan diatas ]]></b:skin>

Ini scripnya :

<br />/* Menu Tab View<br />----------------------------------------------- */<br />div.TabView div.Tabs {<br />padding-top: 0px;<br />height: 24px;<br />overflow: hidden;<br />}<br /><br />/* Menu Utama */<br />div.TabView div.Tabs a {<br />float: left;<br />display: block;<br />width: 90px; /* ukuran lebar menu */<br />text-align: center;<br />height: 24px; /* ukuran tinggi menu */<br />padding-top: 3px;<br />margin-right:4px; /* jarak antarmenu */<br />vertical-align: middle;<br />border: 1px solid #CCC; /* warna border menu */<br />border-bottom-width: 0;<br />font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */<br />font-size: 12px; /* besar hurup menu */<br />letter-spacing: -1px;<br />background-color: #A4A4A4; /* warna latar menu */<br />color: #FFFFFF; /* warna hurup menu */<br />-moz-border-radius-topleft:10px;<br />-moz-border-radius-topright:10px;<br />-webkit-border-top-left-radius:10px;<br />-webkit-border-top-right-radius:10px;<br />}<br /><br />div.TabView div.Tabs a.Active {<br />background-color: #888888; /* warna background menu aktif */<br />color: #FFFFFF;<br />}<br /><br />div.TabView div.Tabs a:hover {<br />background-color: #999999; /* warna background menu hover */<br />color: #FFFFCC;<br />font-weight: bold;<br />}<br /><br />/* Kotak Utama */<br />div.TabView div.Pages {<br />clear: both;<br />border: 1px solid #CCC; /* warna border kotak utama */<br />overflow: hidden;<br />background:url("http://sites.google.com/site/gudangfathur/kode/talangbalaibaru.JPG"); /* background kotak utama */<br />}<br /><br />div.TabView div.Pages div.Page {<br />height: 100%;<br />padding: 0px;<br />overflow: hidden;<br />}<br /><br />div.TabView div.Pages div.Page div.Pad {<br />padding: 3px 5px;<br />font-size: 12px; /* besar hurup kotak utama */<br />}<br /><br />

Kedua copy kode ini lalu letakan dibawah ]]></b:skin>
ini codenya :

<br /><script src="http://sites.google.com/site/gudangfathur/kode/tabview.js" type="text/javascript"><br />

Langkah terakhir.
Masuk ke tab Elemen Halaman lalu pilih tambahkan widget dan pilih HTML masukan kode dibawah ini :

<br /><form action="tabview.html" method="get"><br /><div id="TabView" class="TabView"><br /><div style="width: 100%;" class="Tabs"><br /><a title="Keterangan Menu 1">Menu 1</a><br /><a title="Keterangan Menu 2">Menu 2</a><br /><a title="Keterangan Menu 3">Menu 3</a><br /></div><br /><div style="width: 99%; height: 200px;" class="Pages"><br /><br /><!--Awal Menu 1--><br /><div class="Page"><div class="Pad"><br />Isi Menu 1.1<br/><br />Isi Menu 1.2<br/><br />Isi Menu 1.dst<br/><br /></div></div><br /><!--Akhir Menu 1--><br /><br /><!--Awal Menu 2--><br /><div class="Page"><div class="Pad"><br />Isi Menu 2.1<br/><br />Isi Menu 2.2<br/><br />Isi Menu 2.dst<br/><br /></div></div><br /><!--Akhir Menu 2--><br /><br /><!--Awal Menu 3--><br /><div class="Page"><div class="Pad"><br />Isi Menu 3.1<br/><br />Isi Menu 3.2<br/><br />Isi Menu 3.dst<br/><br /></div></div><br /><!--Akhir Menu 3--><br /><br /></div></div></form><br /><br /><script type="text/javascript">tabview_initialize('TabView');</script><br /><div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://tesblog123blog.blogspot.com/cara-membuat-tabview-menu-pada-blog.html" target="_blank" title="Tabview Widget">Widget by Fathur rakhman</a></div><br /><br />

Silakan Edit judul menu 1, 2, 3 dan isinya pada bagian yang bercetak tebal diatas
Selamat mencoba dan salam persahabatan.....

link sumber http://tesblog123blog.blogspot.com/cara-membuat-tabview-menu-pada-blog.html

Related Articles by Categories