Menu Gadget Tab View

Menu Gadget Tab View

Menu Tab View Banyak Kegunaannya. Dibawah ini adalah cara membuat menu Tab View seperti milik saya di blog ini di kanan widget saya.

Berikut langkah-langkahnya :

1. Login ke Blogger anda.

2. Pilih Rancangan, lalu edit HTML

3. Beri tanda centang pada expand Template Widget

4. Masukkan kode dibawah ini sebelum ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
background-color: #BDBDBD;
display: block;
width:  73px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #FFFFFF;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. masukkan kode ini sebelum </head>

<script type="text/javascript">

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>

<script type="text/javascript">tabview_initialize('TabView');
</script>

6. Simpan

7. Lalu pergi ke menu "Page Elements"
 

8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan anda letakkan Menu Tab View ini.

9. Masukkan script dibawah ini.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs">
  <a class="Active" href="javascript:tabview_switch('TabView',%201);"><b>Menu</b></a>
  <a class="" href="javascript:tabview_switch('TabView',%202);"><b>Menu</b></a>
  <a class="" href="javascript:tabview_switch('TabView',%203);"><b>Menu</b></a>
  <a class="" href="javascript:tabview_switch('TabView',%204);"><b>Menu</b></a>
</div>

<div style="width: 298px; height: 250px;" class="Pages">
<div style="height: 249px; overflow: auto; display: block;" class="Page">
<div class="Pad">
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
<img src="https://lh4.googleusercontent.com/-nBSUy0d6080/Tg5bx6p6KeI/AAAAAAAAAr4/66QncG1RWMw/aQn-Web-Blog-Bullet.gif" length="15" width="15"><a href="POST URL"> JUDUL POST</a><br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

*** Untuk tulisan yang berwarna hijau adalah menu, ganti dengan yang anda inginkan

tulisan yang berwarna merah dan biru adalah URL post anda dan nama post.

Terima Kasih telah membaca,

Menu Gadget Tab View

Jika Anda menyukai artikel ini, klik tombol dibawah ini