Jika Ada Link Dalam Blog Ini Yang Tidak Berfungsi Atau Broken, Dengan Segala Kerendahan Hati Kami Berharap Pengunjung Sekalian Meng-Infokan Kepada Kami Agar Se-segera Mungkin Kami Memperbaikinya,TERIMA KASIH..!!BLOG ANAK BIMA mengucapkan "SELAMAT HARI RAYA IDUL ADHA 1437H MOHON MAAF LAHIR DAN BATIN" @Admin [by:dyenps]

Saturday, July 28, 2012

Cara Membuat Menu Tab View Keren


Cara membuat menu Tab View keren ,fungsinya adalah untuk menghemat ruang dalam Blog kita dan juga bisa meminimalkan loading Blog dan juga untuk menambah Blog kita menjadi sedikit lebih keren tentunya....hehehehehe.

Berikut cara membuatnya:
Klik >> Tata Letak >> Add Gadget >> HTML/JavaScript, lalu pastekan Code Berikut:


<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 25px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #00FF55; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#ffffff; /* 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:#FF9100 ; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:# A9A9A9; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:80%; 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: 325px;" class="Tabs">
<a>BLOGGER</a>
<a>CHEAT PS2</a>
<a>LAIN_LAIN</a>
</div>
<div style="width:325px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">

Isi untuk Tab BLOGGER
</div>
</div>
<div class="Page">
<div class="Pad">
Isi untuk Tab CHEAT PS2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi untuk Tab LAIN-LAIN
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Ket: Ganti tulisan yang berwarna Merah, Orange dan Biru dengan menu blog Sobat..selebihnya silakan di edit sendiri: lebar, tinggi, warna font,dll,sesuai keterangan yang ada di atas...^_^

SEKIAN... 

 



Artikel Terkait:

1 comments:

  1. SayaPoker.com | Agen Judi Poker dan Domino Online Terpercaya Indonesia

    Kami Agen Judi Poker Online Indonesia - SayaPoker.com mengadakan Kontes SEO yang akan
    di mulai pada tanggal 15 Maret 2014 sampai dengan 31 Mei 2014 ,
    dengan Total Hadiah Rp 30.000.000,-

    Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes SEO ini.
    Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mencoba kemampuan SEO Anda dengan tidak sia-sia, hadiah kontes ini adalah Rp 30.000.000,- Tunggu apa lagi?


    Kontes SEO SayaPoker.com ini akan menggunakan kata kunci (Keyword):

    "SayaPoker.com Agen Judi Poker dan Domino Online Terpercaya Indonesia"

    Jika Anda cukup percaya akan kemampuan SEO Anda, daftarkan web
    terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama
    Rp 10.000.000. Pemenang Akan ditentu-kan dengan aturan kontes SEO
    yang dapat dilihat di halaman berikut :

    http://itulink.com/iframer4.php?page=KontesSeoSayaPoker

    Tunggu apa lagi? Ikuti kontes ini sekarang juga.

    ReplyDelete

Syarat Berkomentar:
Tanpa Sara
Tanpa Spam
Jangan Membuat Link Hidup Di Tengah Komentar
Berkomentarlah Yang Sopan Dan Bijak Agar Diharagai Oleh Orang Lain.
Komentar Yang Mengabaikan Syarat Diatas Akan Di Hapus,Terima Kasih...!

Followers

Google+ Followers

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More