Membuat Menu Tab View tanpa edit template blog

saya pernah memposting tentang cara membaut Tab view sebelumnya tapi poting yang sebelumnya untuk membuat tab view harus menambahkan kode ke template blog dan sekarang saya kembali memosting tentang cara membuat tab view cuman sekarang tanpa perlu edit template blog ini dia caranya. monggo.............

1. Log in ke layanan blog/web yang anda miliki (ex: Blogger.com)
2. Masuk ke Layout -->> Add a Gadget -->>HTML/JavaScript Add.
3. Kemudian masukan kode dibawah ini:
<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>
4. Kemudian Klik Save, Rampoeng..................
Note :
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

6 comments:

  1. wowo,artikel yang sangat membantu..ntar tak coba ah..cocok di blog-ku apa gak..
    thanks

    ReplyDelete
  2. gimana cara membuat label jadi cumulus cloud seperti di web ini:
    http://dtfcenter.com/

    ReplyDelete
  3. @Faril

    disini ada gan tutorialnya ke link di bawah ini
    http://m4sukses.blogspot.com/2009/08/trik-membuat-cloud-label-label-awan.html

    ReplyDelete
  4. Siip ...Gak perlu Nguprek2 Html Segala...dari Blogger Baru

    ReplyDelete
  5. wah bagus sob membantu hemat tempat

    ReplyDelete

Budayakan membaca sebelum berkomentar NO SPAM NO SARA
Jangan menaruh link aktif jika tetap nekat admin akan menandainya sebagai SPAM.