Cara Membuat Tab Menu pada Gadget

Assalamualaikum dan Salam Sejahtera

Cara Membuat Tab Menu pada Gadget






Teruskan Cara Buat Menu Tab di Blog yang skripnya disimpan dalam Templat: z; kini dengan cara lain yang disimpan secara langsung pada Widget yang bagi saya secara peribadi lebih mudah apabila saya ingin mengedit [tetapan] berbanding dengan yang sebelumnya: w;

Caranya seperti berikut:


• Log masuk Akaun Blogger dengan ID rakan
• Dalam Papan Pemuka pilih Layout - Tambah Gadget - HTML / JavaScript
Salin skrip berikut ke dalamnya

<style type="text/css"> div.TabView div.Tabs {height: 30px;overflow: hidden} div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */ text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */ border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */} div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;} div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;} div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ } div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* 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 Tab 1</a> <a>Judul Tab 2</a> <a>Judul Tab 3</a> <a>Judul Tab 4</a> </div> <div style="width:300px; height:250px;" class="Pages"> <div class="Page"> <div class="Pad"> Tab 1 - SIMPAN DISINI FILE KAWAN </div> </div> <div class="Page"> <div class="Pad"> Tab 2 - SIMPAN DISINI FILE KAWAN </div> </div> <div class="Page"> <div class="Pad"> Tab 3 - SIMPAN DISINI FILE KAWAN </div> </div> <div class="Page"> <div class="Pad"> Tab 4 - SIMPAN DISINI FILE KAWAN </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

•Simpan Blog Friends: q;
• Menetapkan / Edit adalah sama seperti sebelumnya

Sekian " Terima Kasih " ...