Cara Membuat Menu Tab View

Selasa, Mei 12, 2009 by Grandis ·
Labels:

Sobat blogger pastinya sudah tau yang dinamakan tabview, banyak sekali web page dan blog yang sudah menggunakan tabview/ tabmenu dalam blognya. Fungsi utamanya adalah untuk menghemat space yang ada di halaman web kita, dan membuat blog/web lebih terlihat rapi.
Tab view itu contohnya seperti ini, seperti yang saya gunakan pada blog saya :




Banyak Sekali kegunaan Tab view ini,bentuknya yang mungil nan imut ini bisa menampung berbagai contents yang yang sangat di perlukan dalam blog kita. Contohnya seperti punyaku yang ada disamping kanan itu,bisa dilihat sendiri.

Langsung Saja...

Beginilah cara untuk membuat menu tab view tersebut

1. PErtama anda harus Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode berikut ( gunakan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width:  90px; /* Lebar Menu Utama Atas */  text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}


4. Yang perlu di perhatikan adalah text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>


<script type='text/javascript'>

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

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

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

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

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

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

  var Pages = TabView.firstChild;
  while undefinedPages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

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

  do
  {
    if undefinedPage.className == &#39;Page&#39;)
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+&quot;px&quot;;
      Page.style.overflow = &quot;auto&quot;;
      Page.style.display  = undefinedi == id) ? &#39;block&#39; : &#39;none&#39;;
    }
  }
  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&#39;TabView&#39;);
</script>


6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<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 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

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


Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.


Mungkin Artikel Ini Yang Anda Cari :



39 comments:

narutoxxx mengatakan...
19 Mei 2009 10.17

hoiii...8-} ~x( :-t b-( :-L x( =))

Beben mengatakan...
7 Mei 2010 12.03

aku dah ada 3 biji bos :e:

muviemup mengatakan...
12 Juni 2010 21.42

hebat bos......
:c:

ilfath mengatakan...
1 Juli 2010 23.27

bos,,, kyk mn ngisinya,,, gw gx pandai bos,, tlong ajarin y,,, :h: :c:

pasgo_sega mengatakan...
1 Juli 2010 23.28

bos,,, gmn cra ngisitabvienya,, gw gx ngerti caranya,, mohon petunjuknya,,, :h: :c:

ne blog ak : http://pasgosega.blogspot.com

jadoel mengatakan...
21 Juli 2010 01.09

:e: om . . . kok kaga bs geser dr tab 1 ke tab 2???? trs isi na cm di tab 1 mua na . . . whats wr0ng kie....hhaha.. mumetLaHHH :ngacir:

Mantri Badroe mengatakan...
30 Oktober 2010 15.22

emang agak sulit neh om untuk masalah yang satu ini

risky rionaldy mengatakan...
16 Desember 2010 09.28

thanks Idenya Sob :a:

Arul Khoja mengatakan...
4 Februari 2011 13.01
Komentar ini telah dihapus oleh pengarang.
Arul Khoja mengatakan...
4 Februari 2011 13.02

tips dan trik nya ajiiieb ,gan :d:

poleko mengatakan...
7 Maret 2011 20.46

saya mau izin share yah??makasih

Muhammad Arsyad Dumpa mengatakan...
22 Maret 2011 16.56

oke bro. thx infonya. butuh saran nih dari agan untuk blog saya.. berkunjung yah

Novi Effendi (Abu Hafsh) mengatakan...
26 Maret 2011 22.20

thanks buat artikelnya, sangat bermanfaat
http://effendinovi.blogspot.com/

Novi Effendi (Abu Hafsh) mengatakan...
27 Maret 2011 22.54

udah ane coba tp nggak berhasil boss, nggak bs di klik... so ane delete ...dech....
kenapa ya,,,,??

Ryas mengatakan...
10 Mei 2011 03.19

thx bgt bro atas trik nya mantab :c:

GENX mengatakan...
9 Juni 2011 09.16

cok

Ulum Dita Dynasty mengatakan...
11 Juni 2011 20.45

terlalu banyak bos,saya jadi pusing... mohon bantuan'a ya...

Aquino Kasenda mengatakan...
21 Juni 2011 18.00

Hebat mas...
akhirnya dapet juga menu kayak gini,,, thanks mas

aQn mengatakan...
4 Juli 2011 08.32

Ada beberapa fix, untuk menu tab view ini, saya sudah memperbaikinya, silahkan klik link ini,,, http://adf.ly/1zoTQ Dijamin, pasti sama kayak menu tab view di blog ini.... :h:

http://adf.ly/1zoTQ

Web MK mengatakan...
20 Agustus 2011 16.12

Trima kasih berbagi ilmunya sahabat

SIDRAP mengatakan...
8 Oktober 2011 11.07

MANTAPPPPPPPPPPPP

Safe My Holiday mengatakan...
9 Oktober 2011 11.02

KEREN

wongedan mengatakan...
16 Oktober 2011 00.45

hadu boz ane pasang berkali koq gak jadi jadi ampe pusing ni kepala...maklum boz masi newbi ..ada yang lebi simpel lagi gak ..hee.he. .

campor bawor mengatakan...
16 Oktober 2011 00.51

artikelnya mantap gan ane coba bikin bwat blog ane yang masih amburadul..makasih
salam knal..ya

bambang116gns mengatakan...
22 Oktober 2011 20.02

Tenks ilmu nya bos, butuh petunjuk nih buat blog ku mungkin ada yang di kurangi atau ditambahkan...mampir ya

nofal mengatakan...
20 Desember 2011 20.18

:C: klo buat tab view yang cuma memuat daftar isi aja gmna cranya gan..

mohon bantuanya :c:

ASY SYARIF mengatakan...
4 Januari 2012 13.20

:e:

tempatnya makalah gratis dan info tutorial mengatakan...
8 Februari 2012 16.48

terikasih sobat,,, bagus sekali nich,,, langsung dicoba deh

Armada Centre mengatakan...
27 Februari 2012 22.11

bingung pun bos..otak malah error...
hank out.com..!

Rio Saki mengatakan...
4 Maret 2012 12.42

lay out nya ada di mana?? :c:

Johannez Albert mengatakan...
15 Mei 2012 04.12

ini manual, yg otomatis ada?
:e:

medangaul.blogspot.com mengatakan...
4 Juni 2012 01.14

nice

Rangga kurniawan mengatakan...
7 Juni 2012 17.01

Mas bro Kok pas gw mw ganti warna" baground , border DLL kaga mau terus garis pembatas / kotak nya ga ada yang muncul cuman teks doang..
tlong pencerahannya..

Tips dan Trik mengatakan...
2 Juli 2012 00.00

infonya bagus gan, sepertinya anda berbakat dalam hal blogging yah. Saya yakin anda adalah seorang profesional. bila ada waktu saya akan berkunjung lagi ke blog anda. dan bila agan semua ada waktu kunjungi juga log saya ok ni alamatnya: boytriks.blogspot.com dan beri komentar sobat smua

PensBRI mengatakan...
17 September 2012 09.41

Mas ko hasilnya ga sesuai ya, tlg dong tengok and infonya kami tunggu !!

mrfuadz mengatakan...
9 Desember 2012 15.14

:a: iya ko hasilnya ga sesuai

husen ali yahya mengatakan...
25 September 2014 00.51

wah tutor yang sangat menarik jgn lupa mampir dong ke huntitan.blogspot.com
akurapopo besaba makasih

habbats ramdhan mengatakan...
4 Maret 2015 10.26

Terima Kasih sudah posting artikel yang bermanfaat. Semoga Sukses dan Silahkan Klik Tautan Dibawah Ini
Toko Online HerbalKing Obat HerbalGudang Obat HerbalJual Obat HerbalJual HerbalJual Produk HerbalJual Herbal MurahHerbal BandungProduk HerbalHerbal HabbatsAozora Shop Onlinetoko onlineJual Baju AnakJual Baju BayiJual Baju DewasaJual Sepatu BayiJual Sepatu anak AnakJual Sepatu DewasaJual Perlengkapan BayiJual Perlengkapan Anak AnakJual Perlengkapan DewasaTupperwareTupperware MurahTupperware UpdateTupperware Bandung juaraJual TupperwareKatalog TupperwareJual Online TupperwareTupperware ResepTupperware katalog baruRaja Tupperware BandungCollection TupperwareMadu Anak SuperMadu Anak CerdasJual Madu Anak SuperPusat Jual Madu Anak SuperJual Madu SuperMadu Anak SuperJual Madu AnakToko Madu AnakAgen Madu Anak SuperDistributor Madu Anak Super

Anita Tri Ulina mengatakan...
24 Maret 2015 09.51

woow keren bangets. allah swt akan selalu mempermudah hambanya. Insya Allah Sukses Selalu. Silahkan Klik Tautan Dibawah Ini :
Toko Online HerbalKing Obat HerbalGudang Obat HerbalJual Obat HerbalJual HerbalJual Produk HerbalJual Herbal MurahHerbal BandungProduk HerbalHerbal HabbatsAozora Shop Onlinetoko onlineJual Baju AnakJual Baju BayiJual Baju DewasaJual Sepatu BayiJual Sepatu anak AnakJual Sepatu DewasaJual Perlengkapan BayiJual Perlengkapan Anak AnakJual Perlengkapan DewasaTupperwareTupperware MurahTupperware UpdateTupperware Bandung juaraJual TupperwareKatalog TupperwareJual Online TupperwareTupperware ResepTupperware katalog baruRaja Tupperware BandungCollection TupperwarePenyakitObatbusinesKesehatanHot NewsDownload E-bookKhasiat dan ManfaatHidup SehatDokter HerbalPenyakit

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

Poskan Komentar


Gratis berlangganan artikel via RSS FEED
Add to Google Reader or Homepage Subscribe in Bloglines Add to Plusmo
Ingin mendapat artikel Trik-Tips Blog langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan secara gratis.



Blog-Triks Sponsor

adsense adsense
adsense adsense

BLOG-TRIKS MENU

Cara Membuat Kotak Ini

Link Barter

Cara Membuat Kotak Ini

CATEGORY

Community

Blog-Triks on Facebook
 
Add Me On Your Facebook
Free Subscribe blog-triks Article Via Email, Join Now!!!