Cara Membuat Tab View Menu

Tab View Menu fungsinya untuk menampilkan sejumlah daftar dari menu atau apa saja yang ingin kita tampilkan di blog kita. Karena untuk menghemat tempat sekaligus mempercantik tampilan daftar tersebut, tanpa harus membuatnya atau membaginya di beberapa kolom. Dengan teknik ini dimungkinkan untuk meringkasnya dalam satu kolom. Sedangkan untuk isinya terserah anda mau mengisinya dengan daftar yang anda inginkan, seperti misalnya Recent comment, Recent Post, Tips atau apa saja. Lebih jelasnya lihat pada gambar di bawah ini :



Membuat dan memasang Tab View Menu di Blogger

Untuk membuat dan menerapkan Tab view menu ini ikuti langkah-langkah berikut :
  1. Login ke akun blogger anda. Pada dashboard pilih Menu Template, dan pilih Edit HTML.
  2. Untuk antisipasi terjadi kesalahan saat copy-paste kodenya, ada baiknya anda backup template lengkap.
  3. Cari kode </head> ,untuk memudahkan pencarian tekan Ctrl + F pada keyboard anda.
  4. Setelah ketemu,copy paste kode di bawah ini dan letakkan sebelum kode </head> tadi
 <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>

Kemudian cari kode ]]></b:skin>
Setelah ketemu Copy Paste kode berikut dan letakkan di atas kode ]]></b:skin> tadi,

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: 3px;
vertical-align: middle;
border: 1px solid #666666; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", 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: #444444; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #666666; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #444444; /* 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: 3px 5px;
}

Kode yang berwarna merah dapat anda ganti dan sesuaikan dengan keinginan anda,seperti warna untuk border menu atas, warna fonts, background menu atas, border kotak utama, dan background kotak utama.
Simpan dan tutup template,sekarang masuk ke area Tata Letak.
Tambah gadget dan pilih tambahkan HTML/Javascript, kemudian copy Paste kode berikut ke dalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tabs 1</a>
<a>Tabs 2</a>
<a>Tabs 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Tabs 1.1<br />
Tabs 1.2<br />
Tabs 1.3<br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tabs 2.1<br />
Tabs 2.2<br />
Tabs 2.3<br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tabs 3.1<br />
Tabs 3.2<br />
Tabs 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Simpan Gadget dan lihat hasilnya
Note :Ganti kode berwarna merah dengan keinginan anda, width :untuk lebarnya, height :untuk ketinggiannya.
Tabs 1, 2, dan 3 ganti dengan judul daftar yang ingin anda tampilkan.
Tabs 1.1 dan seterusnya anda bisa mengisinya dengan text, link, atau gambar yang ingin ditampilkan dalam daftar.
Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Cara Membuat Tab View Menu
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2011/11/cara-membuat-tab-view-menu-tab-view.html

Related Post

1 komentar:

REGEN IDINATAsaid...

Masi mraba-raba..

Post a Comment

*Silahkan tinggalkan komentar, saran atau kritik sesuai topik untuk kemajuan blog ini.
*Komentar anda secepat mungkin direspon, karena saya tidak selalu online.
*KOMENTAR TIDAK SOPAN, BERIKLAN, VULGAR, MELECEHKAN, SARA atau PROVOKATIF akan dianggap SPAM, dan berakhir di Tong Sampah..!!!