Ini adalah cara terbaru, yaitu membuat menu tab view tanpa mengubah template blog, artinya tanpa otak atik " EDIT HTML". Tentunya dengan adanya Tips tersebut akan memudahkan sobat Blogger yang masih kesulitan untuk membuat menu Tab View
Contoh menu Tab View seperti yang di bawah Ini
Cara kali ini hanya meletakkan kode-nya pada tempat yang kosong pada blog sobat, misalnya
di sidebar atau yang lainnya. Metodenya seperti pembuatan Widget biasa,,kok
Mari yang ingin mencoba bisa ikuti Langkah-langkah berikut:
Contoh menu Tab View seperti yang di bawah Ini
Cara kali ini hanya meletakkan kode-nya pada tempat yang kosong pada blog sobat, misalnya
di sidebar atau yang lainnya. Metodenya seperti pembuatan Widget biasa,,kok
Mari yang ingin mencoba bisa ikuti Langkah-langkah berikut:
- Login ke blogger
- Kemudian pada Elemen Halaman sobat klik Tambah Gadget
- Lalu pilih yang HTML/Javascript
- Setelah itu tambahkan kode script menu Tab View-nya yang ada dibawah ini dan hasilnya akan seperti yang di atas
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi Menu Tab View 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi Menu Tab View 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi Menu Tab View 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Untuk yang berwarna hijau, artinya diisi dengan “kode-kode lain sebagai isinya (misal banner, iklan, dan lain-lain) Untuk yang berwarna merah, diisi dengan Judul dari isi tab view yang telah dibuat .
Selamat Mencoba
0 komentar Membuat Menu Tab View Tanpa Edit HTML