0 Cara membuat menu pada blog

Met hari ini guys!!! sekarang ane akan posting artikel yang pasti agan-agan butuhkan untuk membuat sebuah blogger... nah sekarang ane akan posting artikel tentang cara membuat menu pada blog,, pasti agan-agan cari sana-sini, ketik itu, ketik ini, tapi sangat sulit untuk dimengerti... eeeiiiiiiiitzz!!! jangan nyerah gitu dong, kita harus semangat dalam membuat sebuah blog, langsung aja kita ke inti artikelnya aja ya... kyknya pada gk sabar niee :D

Agan-agan perlu tau juga bagaimana gambar menunya... nih gambarnya dibawah!!!

gimana suka gk, klw suka kita langsung aja cara pembuatannya oke coyy!!!

1. Logn in terlebih dahulu ke blog Sobat

2. Klik Layout ----> Edit HTML

3. Cari kode berikut (tekan CTRL+F untuk memudahkan Sobat untuk mencari) ]]></b:skin>

4. Kemudian Sobat masukan kode dibawah ini sebelum kode ]]></b:skin> atau kedalam tag CSS

<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i  = 0;

  do
  {
    if undefinedTab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");";
      Tab.className = undefinedi == id) ? "Active" : "";
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while undefinedPages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == 'Page')
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = undefinedi == id) ? 'block' : 'none';
    }
  }
  while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined'TabView');
</script>

5. Save/Simpan

======================

Langkah Selanjutnya.....!!!!!

======================

1. Cari menu elemen yang terdapat pada blog Sobat

2. Pilih menu "Add a gadget"

3. Kemudian cari Gadget HTML/Java Script

4. Masukan Script tersebut

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 

Tab 1.2 

Tab 1.3 

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 

Tab 2.2 

Tab 2.3 

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 

Tab 3.2 

Tab 3.3 

</div>
</div>

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

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

Keterangan Tambahan ada di bawah sini

Code:

<div class="Pages" style="width: 350px; height: 250px;">

Untuk mengatur lebar dan panjang kolom ada dibawah sini

Code:

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

Merupakan Menu Utama

Code:

<div class="Page">
<div class="Pad">
Tab 3.1 

Tab 3.2 

Tab 3.3 

</div>
</div>

Merupakan isi menu yang dapat ditambahkan link, gambar, dan lain-lain.

Selesai....

hehehe artikelnya udah jadi sobat... ane senang bisa berbagi dengan sobat, dan janga bosen-bosen oke untuk datang ke blog ane lagi... :D

===>> SELAMAT MENGERJAKAN <===

Sobat Menyukai Artikel PT. Blog! Ketikkan alamat email sobat di bawah ini untuk mendapatkan update atikel blog ini langsung ke email sobat. Terima Kasih Atas Partisipasinya!