Cara Membuat Tab Menu di Blog

Kastaone - Sabtu, 03 November 2012 - 07:00 wita
Cara Membuat Tab Menu di Blog itu yang akan saya bahas sekarang, :y; Kalau ada kawan Blogger yang tidak tahu apa itu Tab Menu dan untuk apa [maaf saya bukannya menggurui kawan] dapat saya sampaikan kurang lebih adalah Kumpulan Elemen yang bisa menhemat tempat pada Blog 


Sepengetahuan saya Tab Menu scriptnya bisa disimpan pada Template dan Widget, yang saat ini akan saya bahas penyimpanan scriptnya pada Template :z;
Cara Membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template
  • Copas HTML berikut diatas ]]></b:skin>
div.TabView div.Tabs {height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */ 
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ 
padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */ 
border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ } 
div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* 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: 5px 5px} 

  • Selanjutnya Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

  • Simpan Template kawan 
  • Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript
  • Copas Script berikut kedalamnya
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 4 - SIMPAN FILE KAWAN DISINI </div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

  • Simpan Blog kawan dan lihat hasilnya

Sedikit penjelasan saya : 
Lebar Tab adalah [width:73px;] sebanyak 4 tab ditambah border:8px [1+2+2+2+1], maka lebar keseluruhannya menjadi 300px;

»



Berbagi Artikel :

Cara Membuat Tab Menu di Blog
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Tab Menu di Blog
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

58 Komentar pada : “Cara Membuat Tab Menu di Blog”

  1. Balasan
    1. thank kembali sudah berkunjung dan komentarnya :q;

      Hapus
    2. saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI













      saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI

      Hapus
  2. maaf gan ana masih belum ngerti, itu cara buat menu puldow kaya punya agan yang menu kategori gimana caranya?
    coba dikunjungi blog ana
    http://nurdaday.blogspot.com

    BalasHapus
    Balasan
    1. Coba kawan baca
      cara-membuat-navbar-menu-bertingkat
      atau
      cara-membuat-navbar-menu-bertingkat-ke-2
      disana jawabannya :x;

      Hapus
  3. punya saya kog gk bisa juga gan...

    toolong bantuannya y...

    BalasHapus
    Balasan
    1. Cara yang ini memang sedikit cukup ribet dan kemungkinan ada script yang tertinggal :w;
      Kalau kawan ingin mencoba silahkan yang lainnya
      http://blogbego-creation.blogspot.com/2012/11/cara-membuat-tab-menu-pada-gadget.html

      Hapus
  4. kereennn sob, kunjung balik ya ke
    http://rezaa4848.blogspot.com/
    :t;

    BalasHapus
  5. nice posting gan kunjungan baliknya ya gan. www.alternatifmasadepanpras.blogspot.com

    BalasHapus
    Balasan
    1. Kunjungan balik sudah pasti kawan :y;

      Hapus
  6. aku mau tanya, cara nyimpen filenya gimana ya?

    BalasHapus
    Balasan
    1. Cara ini sedikit lebih ribet dibandingkan yang satunya kawan,
      Cara nyimpen Filenya, coba kawan perhatikan penjelasan saya diatas misalnya untuk Iklan
      Judul : IKLAN
      Isi tab 1 - SIMPAN FILE KAWAN DISINI ganti dengan Script / Iframe Iklan

      Hapus
  7. mengatur tampilan tingginya gmn gan??
    terus cara menyimpa filenya gimana?

    mohon bantuanx dong

    BalasHapus
    Balasan
    1. Pada script ketiga yang disimpan pada HTML / JavaScript kan sudah ada lebar :300px dan tinggi :250px atau kawan bisa tambahkan lagi setiap file diisi width, height, overflow: auto dstnya :y;

      Hapus
  8. ane masih blom bisa gan :(
    coba gan mampir sebentar...
    http://irfanpermana20.blogspot.com/

    BalasHapus
    Balasan
    1. saya mampir balasan sudah pasti kawan
      masalah blom bisa saya jadi bingung karena apa yang saya posting sudah dicoba dan berhasil, asal caranya sudah sesuai :q;

      Hapus
  9. Waah bingung pas step "Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript" HTMLnya ada di mana? gak ketemu2 nih:(

    BalasHapus
    Balasan
    1. itu langsung masuk ke HTML aja,,nah langsung deh di masukin scrip nya,,ga usah di centang ,,soalnya punya saya juga ga ada buat centang nya

      Hapus
    2. Kawan tinggal meng-Klik tanda plus[+] pada HTML / JavaScript :r;

      Hapus
  10. Kagak jadi gan kalo diatas kode CSSnya diletakkan dimana?

    mohon bantuanya gan..! kunjung balik dan koment ya!

    http://newmajor.blogspot.com/

    BalasHapus
    Balasan
    1. Kalau kawan membaca baik postingan maupun jawaban saya di komentar sudah cukup jelas sekali :x;

      Hapus
  11. Thx atas infonya Gan bener" bermanfaat...!
    Saya sudah like dan selalu mengunjungi blog ini tiap waktu...
    Mohon bimbinganya... kk..
    Like dan comment di
    http://newmajor.blogspot.com/

    BalasHapus
    Balasan
    1. Pemberian kawan semuanya dibalas
      Sabar saja menanti Kunjungan Balik saya :w;

      Hapus
  12. trima kasih infonya
    saya lagi mencari menu tab yg pas..
    dr td blm ada yg pas ni, saya ijin nyoba dulu

    BalasHapus
    Balasan
    1. Cara ini memang sedikit lebih Ribet karena menyimpan scriptnya pada Template dan Gadget, silahkan pakai Cara membuat Tab Menu di Gadget yang semua scriptnya disimpan di Gadget

      Hapus
  13. TOLONG DONG CARA BIAR UKURAN HASIL POSTING GAK TERBATAS!! LIAT BLOG SAYA www.gorengan_software.blogspot.com
    cek dong POSTNGNYA SEMPIT..

    SANGAT SENANG DAN BANGGA JIKA BLOG INI BISA MEMBANTU!! :x;

    BalasHapus
    Balasan
    1. sempit tidak sempit itu tergantung Template yang kawan pakai,
      kalau blog kawan saya rasa biasa saja :q;

      Hapus
  14. Makasih mas... tapi kgak bisa tuh caranya bingung, ribet maklum deh baru pemula

    BalasHapus
  15. PERTAMAX om..
    kunjungan PERDANA.
    KUNBAL please.

    UGL-KREATTIF.blogspot.com

    FOLBECK ane ya kakang.

    BalasHapus
  16. ]]>< / b : skin> tidak ada

    BalasHapus
    Balasan
    1. Coba kawan cari pada Template <b:skin>--</b:skin> posisinya dekat keatas
      Kalau sudah ketemu jabarkan atau Klik pada nomornya :o;

      Hapus
  17. Berhasil gan, ane pasang di blog film ane , thx ya

    BalasHapus
  18. maaf gan sebelumnya, ane blum ngerti yang dimaksud (Isi tab 1 - SIMPAN FILE KAWAN DISINI) itu gmana

    BalasHapus
  19. Isi tab 1/2/3 - simpan File kawan disini ya ganti dengan script / file yang ingin kawan tampilkan dan sesuaikan dengan judul diatasnya :q;

    BalasHapus
  20. informasi yang di sajikan mantap gan! thank

    BalasHapus
  21. Gimana kawan tolong dong buatkan blog di blogger yang keren, kerja aku marketing mobil baru suzuki di magelang, gimana ?

    BalasHapus
  22. Maklum dah umur gak mampu mikir yang ribet2, juga waktu

    BalasHapus
  23. Kawan bisa memakai salah satu Template yang saya sudah posting :q;

    BalasHapus
  24. mkasih ya, baru klik link ini udah banyak yang saya tau langsung saya coba
    walaupun masih ada yang bingung,,
    sisanya tinggal ngulik sendiri..

    BalasHapus
  25. inilah blogger namanya, tak mau menyerah kalau mengalami kegagalan dan terima kasih sudah berkunjung, saya pasti berkunjung balik :q;

    BalasHapus
  26. aku masih bingung dengan Isi tab 3 - SIMPAN FILE KAWAN DISINI
    tolong kasi contoh FILE nya dong

    File atau link sih

    BalasHapus
    Balasan
    1. contohnya : Gambar, Daftar Isi dll :t; perhatikan di sidebar Blog saya : Gratis, Blogup, Data dan Visitor :x; yang penting Judul dan Isi Nyambung :d;

      Hapus
  27. bermanfaat banget gan buat saya yang masih baru ngeblog.. main kesini dong gan www.simplechilds.blogspot.com

    BalasHapus
  28. gan cara menampilkan suatu posting tertentu menjadi HOMEPAGE gimana ya???trims ya,kalo berkenan jawab via ponar123@yahoo.co.id atau gmailnya mzuki73@gmail.com

    BalasHapus
  29. Kalau hanya untuk satu posting, pada pengaturan posting pilih satu, kalau posting lama tanggalnya dirubah menjadi akhir tahun misalnya :q;
    Kalau untuk banyak posting silahkan baca "sembunyikan isi artikel di beranda" :c;

    BalasHapus
  30. sory gan masih nubi sya cari kode ]]> pada edit html template kok tidak ada ya,, , , :i;

    BalasHapus
    Balasan
    1. Saya tak tahu template yang dipakai, karena Blog kawan hilang :r;

      Hapus
  31. keren gan ...

    ditunggu kunbal.nya ....

    BalasHapus
  32. ini jadi seperti tab view gan, kalau buat jadi halaman utama tab menunya gimana? tolong cek punya saya ya, http://nugrahalajuwardi.blogspot.com
    thx

    BalasHapus
    Balasan
    1. tambahkan / tempatkan diatas postingan, selengkapnya kawan bisa baca cara membuat halaman depan tersendiri :b

      Hapus
  33. makasih ya.............
    membantu skali, lagi belajar ngeblog nih :D

    BalasHapus
  34. cara masukan file nya gimana min ?

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan