Kamis, 28 Mei 2009

Membuat tab menu blogspot

Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa gadget ataupun beberapa banner ataupun teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa dibuka bergantian.

Sebenarnya memang agak rumit dalam pembuatan Tab Menu ini dikarenakan banyaknya script yang harus kita copy dan paste ke template maupun gadget, tapi bagi anda yang suka ngutak-ngatik script, saya pikir bukan hal baru bagi anda. Andapun bisa meedit script tersebut untuk menyesuaikan dengan halaman blog anda. Untuk itu silahkan ikuti langkah-langkah berikut ini :

Langkah Pertama :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
6. Persis sebelum kode tersebut, pastekan script di bawah ini

<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>

7. Cari lagi di dalam template anda kode ]]></b:skin>
8. Persis sebelum kode tersebut, pastekan script di bawah ini
div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }


9. Klik Simpan Template

Langkah Kedua :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini
<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">

<form action="tabview.html" method="get">
<div id="TabView">
<div style="width: 100%;">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;">

<div>
<div>

Entri data anda di sini yang akan tampil di kolom "Judul 1"

</div>
</div>

<div>
<div>

Entri data anda di sini yang akan tampil di kolom "Judul 2"

</div>
</div>

<div>
<div>

Entri data anda di sini yang akan tampil di kolom "Judul 3"

</div>
</div>

<div>
<div>

Entri data anda di sini yang akan tampil di kolom "Judul 4"

</div>
</div>

<div>
<div>

Entri data anda di sini yang akan tampil di kolom "Judul 5"

</div>
</div>

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

7. Klik Simpan

Kode script di atas yang di awali dengan tanda # menyatakan warna, seperti #000000 #FFFFFF #999999 #2E2EFE #E6E6E6 #0B516E #DF0101, silahkan anda ganti dengan warna pilihan anda, untuk mendapatkan variasi kode warna silahkan anda surfing di sini [ html-color-codes ]

Selamat mencoba, semoga bermanfaat

Terkait

Description: Membuat tab menu blogspot Rating: 4.5 Reviewer: Anonim ItemReviewed: Membuat tab menu blogspot
Al
Mbah Qopet Updated at: 22.05

37 komentar:

  1. Ada sample situs yg pake script kaya' gini gak?

    BalasHapus
  2. di blognya kang rohman....bro...

    BalasHapus
  3. orang yg di tanya wordpress

    BalasHapus
  4. Terima Kasih ya ... !!! Atas Semua Infonya

    BalasHapus
  5. Trima kasih mas. aku berhasil. beberapa hari ini aku di pingpong ama mbah google tuk cari scipt membuat tab menu. akhirnya datang juga ha.ha.....
    mampir dong di:www.pakdekaryo.blog.spot.com

    BalasHapus
  6. Saya pemula di internet, sudah buat web dengan benerapa entri. beberapa waktu lalu error/tidak dapat diakses. sekarang sudah diperbaiki tetapi tidak bisa entri karean kode HTML tidak diperkenankan. Ini bagaimana yaa.. tolong jelasin dong.

    BalasHapus
  7. knapa di blog saya gg bisa dipasang iah scriptnya ???

    BalasHapus
  8. "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "src".

    BalasHapus
  9. haduh....
    semuanya sama aja...

    BalasHapus
  10. nda bisa scriptnya saya pakekan di blog knapa yah, mohon pencerahan.??

    BalasHapus
  11. Triknya bikin tabnya bgs..ni yg ku cari thnk infonya sob

    BalasHapus
  12. kasih tau dong posisi kode html-nya, kira -kira posisinya di bagian atas, tengah, atau bawah, biar gak bingung nih nyarinya

    BalasHapus
  13. dah beberapa kali nyoba, kok ga berhasil2 ya? tiap kali mo nge-save, selalu ada "Kami tidak dapat menyimpan template Anda." i don't know why...

    BalasHapus
  14. wahh mntaaappp brooo... thnks akn q cba nie scriptnya,,

    BalasHapus
  15. wah infonya membantu neh...tak coba yah

    BalasHapus
  16. mas di kasi script yg prtama kok gk bisa??
    mhon pnjeLasannya..
    tk tnggu

    BalasHapus
  17. yupzZ...mdh2n dpt aplikasikn, thks.

    BalasHapus
  18. aaku mau coba... tyhank ya infonya
    www.grosirbajuanaktermurah.com

    BalasHapus
  19. aku mau cobe...mudah-mudahan bisa ya.
    www.grosirbajuanaktermurah.com

    BalasHapus
  20. copas kode nya dengan bener gan...

    BalasHapus
  21. supaya isi tab nya bs nyusun vertikal gmana gan.....
    mhn pencerahan

    BalasHapus
  22. tenx infonya...tapi kalo buat di wordpress gimana yak??heeee

    BalasHapus
  23. hatur nuhun kang, katampi pisan infona,...

    BalasHapus
  24. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "src".

    BalasHapus
  25. thanks ya buat info nya,, saya lagi butuh banget soalnya ni info,, untuk mmpercantik blog saya htttp://futsals.blogspot.com/

    kapan2 mmpir juga ya kblog saya

    BalasHapus
  26. OM, FOLLOW balik BLOG aku si, PLEASEE,, aku tunggu lo, awas> klw gx di follow back , hehe

    BalasHapus
  27. thanks bro untuk semua trik nya !

    BalasHapus
  28. thanks atas info and ilmu nya gan,,,,:d

    BalasHapus