earth

Guestbook

/* Iklan google ads */
Pusing dengan widget yang kebanyakan tapi sedikit ruang yang tersedia di sidebar blog kamu? Tenang sobat, jangan putus asa dan lantas gantung keyboard alias berhenti jadi blogger, hehehe.... Ada solusi untuk mengatasi hal itu, yaitu dengan membuat menu Tab View. Tab View ini (dikenal juga dengan istilah Slide Show Menu) sangat berguna bagi kamu yang ingin menambahkan berbagai widget, baik itu Recent Post, Recent Comments, Link Blogroll, Link Banner teman, dll., tetapi tidak memiliki ruang yang cukup untuk menambahkan itu semua. Kamu bisa melihat contoh Tab View ini pada sidebar SC Community yang berisi menu: Ruang Tanya, Komentar, Link Sobat, dan Banner Sobat.

Untuk membuat Tab View ini dapat kamu pelajari dari situs www.o-om.com, trik-tips.blogspot.com, suprisdiantoko.com, dan situs-situs lain yang mengupas masalah ini. Tapi jika kamu lagi males bertamasyaria di dunia luna maya, pelajari saja cara membuat Tab View berikut:
Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F untuk mencarinya.
  • Kopikan kode CSS berikut (gunakan Control C) dan letakkan di atas kode ]]></b:skin> tersebut.
    /* Menu Tab View
    ----------------------------------------------- */
    div.TabView div.Tabs {
    padding-top: 0px;
    height: 24px;
    overflow: hidden;
    }
    
    /* Menu Utama */
    div.TabView div.Tabs a {
    float: left;
    display: block;
    width: 80px; /*ukuran lebar tabmenu*/
    text-align: center;
    height: 24px; /*ukuran tinggi tabmenu*/
    padding-top: 3px;
    margin-right:4px; /*jarak antartabmenu*/
    vertical-align: middle;
    border: 1px solid #CCC; /*warna border menu*/
    border-bottom-width: 0;
    font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
    font-size: 12px; /*besar hurup menu*/
    letter-spacing: -1px;
    background-color: #A4A4A4; /*warna latar menu*/
    color: #FFFFFF; /*warna hurup menu*/
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    }
    
    div.TabView div.Tabs a.Active {
    background-color: #888888; /*warna background menu aktif*/
    color: #FFFFFF;
    }
    
    div.TabView div.Tabs a:hover {
    background-color: #999999; /*warna background menu hover*/
    color: #FFFFCC;
    font-weight: bold;
    }
    
    /* Kotak Utama */
    div.TabView div.Pages {
    clear: both;
    border: 1px solid #CCC; /*warna border kotak utama*/
    overflow: hidden;
    background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;
    font-size: 12px; /*besar hurup kotak utama*/
    }
    
    Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.
  • Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>
    <script src="https://sites.google.com/site/ruangsc/enes/tabview.js" type="text/javascript"/>
    
  • Simpanlah hasil editing tersebut.
Langkah Kedua
  • Pilih tab Elemen Halaman (Page Element).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Kopikan script berikut dan letakkan pada kotak Content yang tersedia:
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 100%;" class="Tabs">
    <a title="Keterangan Menu 1">Menu 1</a>
    <a title="Keterangan Menu 2">Menu 2</a>
    <a title="Keterangan Menu 3">Menu 3</a>
    <a title="Keterangan Menu 4">Menu 4</a>
    </div>
    <div style="width: 100%; height: 200px;" class="Pages">
    
    <!--Awal Menu 1-->
    <div class="Page"><div class="Pad">
    Isi Menu 1.1<br/>
    Isi Menu 1.2<br/>
    Isi Menu 1.dst<br/>
    </div></div>
    <!--Akhir Menu 1-->
    
    <!--Awal Menu 2-->
    <div class="Page"><div class="Pad">
    Isi Menu 2.1<br/>
    si Menu 2.2<br/>
    Isi Menu 2.dst<br/>
    </div></div>
    <!--Akhir Menu 2-->
    
    <!--Awal Menu 3-->
    <div class="Page"><div class="Pad">
    Isi Menu 3.1<br/>
    Isi Menu 3.2<br/>
    Isi Menu 3.dst<br/>
    </div></div>
    <!--Akhir Menu 3-->
    
    <!--Awal Menu 4-->
    <div class="Page"><div class="Pad">
    Isi Menu 4.1<br/>
    Isi Menu 4.2<br/>
    Isi Menu 4.dst<br/>
    </div></div>
    <!--Akhir Menu 4-->
    
    </div></div></form>
    
    <script type="text/javascript" src="https://sites.google.com/site/ruangsc/enes/tabview-tab.js"></script>
    
    Pada tulisan yang berwarna merah tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai keinginan.
    Selain itu kamu juga bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.
  • Simpan hasil kerjaan kamu dan lakukan pratinjau (preview) untuk melihat hasilnya.

Nah, cukup mudah kan? Ok coy, selamat mencoba....
Catatan tambahan:


Referensi: Dari berbagai sumber
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    110 komentar

    Walaupun pusing banget mau nyobanya ...tapi mau berusaha deh nyoba .dulu pernah nyoba yg ada malah dapet peringatan dari mbah blogger ,sy dianggap pe-nyepam hehe..akhirnya kapok deh ..blogku ditambah macem2.TOB kang infona...

    24 Juli 2009 pukul 06.51  

    Subhanallah... Ini yang ane cari-cari Bung... Coba nanti ana segera aplikasiken di blog ane. TEngkyu ya Bung :)

    Best regards,

    Irfan Melodic Nugroho
    Melodramatic Mind

    Facts on the Recent News

    24 Juli 2009 pukul 16.45  

    Info bagus, Itulah makanya saya bikin kolom lebar diatas, tapi belum sempet di garap berhubung masih sibuk.

    25 Juli 2009 pukul 01.31  

    Bener banyak jurusna, tp mksud tab view tuh nu MANAAAAAAA????

    hehe1000x

    25 Juli 2009 pukul 20.51  

    saiia selalu bermasalah sama yg namanya tabber satu ini... jd pingin pasang en baca pelan2 en bener2 dehh.. makasih shariongn ya iia kang :) saiia baca dulu nii :)

    25 Juli 2009 pukul 21.36  

    buseeeddd.. perih juga ternyata mata nii :((

    25 Juli 2009 pukul 22.20  

    salam sobat,,wah senang sobat kalau bisa berhasil bikin tab view widget pada sidebar,,jadi menambah cantik blog dan lebih menarik.,,ingin coba juga.

    26 Juli 2009 pukul 14.28  

    Masih lieur nich.., baca2 heula wae ach...

    29 Juli 2009 pukul 11.38  

    cobain ah..sob..thank tutorialnya biar blog djing ane tambah sip.

    31 Juli 2009 pukul 08.12  

    salam kenal.....,saya slalu bermasalah dengan tabview, dah buat tapi ketika isi tabview diklik ada keterangan; laman tidak ditemukan, maaf laman yang anda carai tidak ada dalam blog. masalahnya dimana ya kira2 mohon penjelasannya.

    18 Agustus 2009 pukul 11.56  

    pengen pasangnya tapi masih bingung gmn ya?

    11 September 2009 pukul 04.18  

    gampang ko des....pasngnya..makasih buat yang punya blog...sebenernya sih lagi nyari tampilan yang slide...eh malah dapet yang ini....ga apa2 deh....

    4 Oktober 2009 pukul 08.24  

    Dgn sdikit prubahan, ahirna bisa oge pasang TabView, wakakakakakakakak...
    Nuhun ah kang

    17 Oktober 2009 pukul 17.46  

    gimana sih cara buat tulisan berjalan di tab browser yang tulisannya SC COMMUNITY itu

    27 Oktober 2009 pukul 05.36  

    Sateuacana nuhun pisan....ti zaman tikotok dilebuan abdi milari tutorial ieu. eh geuning di tatanggi.
    Cuma bingung perkawis script nu di element na a...
    pasang link na kumaha??naha make nganggo Diantos Guru ah....tos teu kiat yeuh naggung...

    30 Oktober 2009 pukul 16.22  

    waduh mas tak coba dulu nih mudah2an bisa yah.. sepertinya lebih simple cara ini mas.. trims infinya jadi betah nih di sini banyak ilmu yang bermanfaat ..

    7 November 2009 pukul 19.51  

    mas kok gak tampil yah..udah di copas semua di html ??

    7 November 2009 pukul 20.40  

    makasih brow... baru kali ini saya saya berhasil pasang tabview.dan sekarang udah saya pajang diblogQ tapi masih widget by Cs......

    kalau g kberatang linkback yow brow...

    15 November 2009 pukul 22.36  

    Berguna sekali sobat :) thanks

    19 November 2009 pukul 18.23  

    Teu tiasa kang kumaha yeuh.. Tab kahiji tiasa dibuka, tapi tab ka dua sareng ka tilu teu tiasa.

    kode js, tos di pasang di handapeun b:skin

    malah tos ditest mirip sa smiripna teu dirubah di tutorial nu kuakang di tulis..
    bilihna bade ngechek mangga
    http://bisul-bucat.blogspot.com
    hatur nuhun sateuacana..

    27 November 2009 pukul 01.49  

    Nuhun tos di jawab A, sateuacana abdi sanes urang Bojongloa Bandung. Abdi mah urang kampung, Desa Bojongloa Kabupaten Subang masuk wilayah ciater-jalan cagak.

    back to topic (gaya pake bahasa keju heheh)
    eta ge tos di ageungan, malah di scripna pake overflow=auto. lieur A batur mah takbiran di mesjid, ieu malah ngutak atik blogs heheh. akhirna saya pake scrip tab viewna ti ateonsoft.com trus isi tabna pake scrip ti akang.. hatur nuhun yeuh muga dibales ku gusti Allah..

    tos ah bilih kapanjangan, isin ah bilih disebat komentarna panjang tapi teu rame.. heheh

    27 November 2009 pukul 11.27  

    Ane berhasil pasang rumus ini bang.. wah makasih banget lho..

    11 Desember 2009 pukul 21.09  

    Alhamdulillah bisa,
    terima kasih atas tutorialnya
    mohon bantuan cara buat buat bulletnumber

    23 Desember 2009 pukul 11.33  

    kok tabviewnya gk mau diliat sih,, yang nampil tab view 1 doang. tolong cek dunkzz

    http://ikhsanhafiyudin.blogspot.com

    23 Desember 2009 pukul 14.24  

    pas gue lagi pusing binun 7 kali pake wig#$# so ini diye soluna nya suwun

    1 Januari 2010 pukul 21.31  

    pusing 7 keliling jg ya bikinya.... :D

    3 Februari 2010 pukul 15.17  

    Dah pasang tp lum komen. Komen ah...
    Thank nya infona

    16 Februari 2010 pukul 19.27  

    wah tentang artikel yg ini, dr berbagai sumber tutor sdh sering coba belajar tp blm bisa berhasil,.puyeng bngetz..udah hbs 2gelas kopi+2 bungkus rokok..blm jg bisa...aduuuhh..help me..

    17 Februari 2010 pukul 00.39  

    mas kok tabviewer punya ku g bisa di klik seh? knp y? mohom penjelasannya.. terimakasih!!

    7 Maret 2010 pukul 20.45  

    saya sdh pasang codenya, tapi yg tampil hanya isi menu1, sdngkan isi menu2 dan menu3 tidak tampil saat mouse berada di atasnya, bagaimana solusinya? mohon jawabannya

    29 Maret 2010 pukul 20.41  

    asalamualakum,,,,
    maaf nih kang,, aqu dah ikutin semua cara yg udah akang kasih,, tapi aku masih bingung tentang mengganti isi menu'nya,, maisal ku klik menu1, tapi yg muncul di bawahnya hanya ini:
    isi menu 2.1
    isi menu 2.2
    isi menu 2.dst.

    kl berkenan tolong di cek yah kang,, hatur nuhun,

    6 April 2010 pukul 02.58  

    keren juga.....
    tp aku otodidak nih bikin blog jd blum paham banget apa yang di jelasin..
    kapan- kapan mampir ya di blog ku..

    12 April 2010 pukul 12.01  

    http://alanzody.blogspot.com

    12 April 2010 pukul 12.12  

    mantap mantap mantap kang sekali coba langsung bisa tapi yang bingung mau ditaruh dimana enaknya???samping bawah atas??
    pokoknya yang penting matur thank kyu deh kang

    14 April 2010 pukul 06.46  

    Minta Ijin Saya pakai widgetnya mas.. maklum masih belajar...!

    15 April 2010 pukul 13.05  

    Wau, Excellent Thing,

    Thanks for Your Share, Bro....

    25 April 2010 pukul 07.32  

    Tab View Widget ini memberatkan loading gak kang nes?

    29 April 2010 pukul 07.30  

    saya pake widgetnya...thx mas banyak yang saya pelajari disini....

    29 April 2010 pukul 20.52  

    wah 1 sudah berhasil... tapi klo buat 2 Tabview gimana kang... mohon pencerahannya...

    29 April 2010 pukul 23.46  

    banner sudah saya pasang di compsg.co.nr pasang balik ya,..

    6 Mei 2010 pukul 20.16  

    wah mantab sob.....jangan lupa comment balik ya..

    13 Mei 2010 pukul 21.48  

    Gan,mau tanya.apa ada effect ya dengan blog kita.Seperti kata mas ateh75 itu maksudnya apa?

    18 Mei 2010 pukul 21.06  

    Boz kalo bisa tutorialnya disertai gambar hasinya dunk. terimakasih

    19 Mei 2010 pukul 11.52  

    Nyobaim pake tabview ternyata ribet juga ya kang. Tapi sedikit-sedikit bisa lah.
    Hatur tengkiw...

    26 Mei 2010 pukul 21.29  

    assalam..
    nuhun kang met mlem...?
    mau tanya g5ana sich crana bt beranda, ruang sastra,dsb nya....za kyak mnya akang diatas itulow.
    nuhun kang pnjlasana.^_^

    27 Mei 2010 pukul 20.02  

    Makasih ilmunya....tak coba...

    4 Juni 2010 pukul 03.39  

    skli coba lngsung bisa uy...

    thankz ya.........

    19 Juni 2010 pukul 00.55  

    Teima kasih atas infonya....

    23 Juni 2010 pukul 07.22  

    Terima Kasih Atas infonya.....Q sudah membuatnya, cuma bagaimana ya cara memodifikasinya agar keliatan BEAUTIFUL gtuuu.. he Thank ya...

    26 Juni 2010 pukul 03.25  

    cara bikin menu tab gmn

    10 Juli 2010 pukul 18.47  

    thanks ya gan. mantaf ne buat yang punya blog ukuran kcil. menghemat space.

    12 Juli 2010 pukul 12.38  

    tutorialnya jelas banget dan simpel,semoga aku berhasil menerapkannya,makasih sob

    19 Juli 2010 pukul 15.14  

    kang terima kasih banyak infonya sy udah coba pasang tabview menu di blog sy..dan sy juga udah coba pasang link exchange kang enes ke blog tp tidak muncul banner..gantian donggg...tks.

    29 Juli 2010 pukul 09.00  

    makasih ya buat blognya (blognya tentu saja dengan isinya juga)...blog yang bagus. jarang-jarang lho saya kasih komentar...

    8 Agustus 2010 pukul 19.50  

    wa terima kasih ya..bagus bangat..

    19 Agustus 2010 pukul 21.28  

    Makasih tipsnya bang.. numpang copas ya...
    sukses selalu...

    25 Agustus 2010 pukul 03.49  

    Alhamdulillah, terima kasih kang atas tutorialnya, saya telah copas tanpa sepengetahuan akang, semoga amal baiknya diterima Allah S.W.T

    1 September 2010 pukul 23.03  

    Mantap coy, untuk pemula kayak ane musti banyak belajar nih.. mohon pencerahannya... Thank's bro

    5 Oktober 2010 pukul 21.30  

    makasih antas infonya..ini sangat membantu,,,

    12 Oktober 2010 pukul 20.48  

    salam kenal...maaf katanya berbagi ilmu tapi gak boleh di jiblak artikelnya.wah zaman sitinurbaya masnya nih. tapi sukses deh dan saya sangat senag bisa mampir disini ,walaupun gak boleh copy tapi ispirasinya saya dapat..terimakasih ya mas
    pelangiholiday.blogspot.com

    8 Desember 2010 pukul 16.05  

    kang tabview gak bisa bikin lebih dari satu ya???

    24 Desember 2010 pukul 00.10  

    Wah, makasi makasi banget, SC hebat banget....
    Kunjungi Blog aku ya ada 2!
    http://mingmingpotter.blogspot.com
    http://cerpen-ciahuyy.blogspot.com

    3 Januari 2011 pukul 14.21  

    thx bro....
    ternyata ni cara lama tp gw bru tw....
    maklum gw msh newbie

    14 Januari 2011 pukul 17.19  

    kang mau nanya kok blog ku ta pasangin tab itu malah muncul di bagian kiri yah bkn di atas? bisa bantu g? coba lihat arhii-go.blogspot.com thanks

    17 Januari 2011 pukul 07.05  

    senior,,bisa gak masang tab viewnya lebih dari satu,,kayak di blognya senior,,,
    itu kan tabviewnya ada 2,,mohon bantuannya ya senior,,
    aku tunggu balasannya di blog aku,,

    20 Januari 2011 pukul 19.15  

    akang, kenapa tab ketiga saya gak nampil? di masterendi.com

    1 Februari 2011 pukul 13.37  

    thx.. good article.. :)

    10 Februari 2011 pukul 14.02  

    postingan keren,, sy mnta ijin wat pake... salam (blogger faqir)

    23 Februari 2011 pukul 07.45  

    Kang Enes, saya mau tanya..
    Saya kn buat Widget seperti ini, bisa ada 3 tab, bisa dipindah/klik ke komentar (contoh), bisa dipindah/klik ke link sobat ..(berhasil yg aku taroh di kiri atas)
    Terus saya buat lagi widget seperti ini isinya 3 tab, yaitu Popular Post, Recent Post, dan Backlink. Nah kok widget ini ga bisa dipindah/klik ke recent post dan backlink ya? aneh banget ..
    Coba lihat di blog saya: http://deny-sh.blogspot.com/

    27 Februari 2011 pukul 05.56  

    mantap blognya pingin ngikutin tapi belum mahir

    28 Maret 2011 pukul 06.32  

    gan knapa tab view widget saya kog error?
    langsung aja gan liat ke blog ane ea http://nuze22.blogspot.com/. . .
    tolong bantuannya. . .

    30 Maret 2011 pukul 22.22  

    Gan Mantabz Infonya,berguna wat pemula kaya ane .
    ane udah coba ikutin tutor diatas gan,masalhnya kalo mau buat du tab views kaya punya Agan Giman tuh,ajarin ya gan .. ??

    sebelumya lam kenal & terimakasih buanyak .

    4 Mei 2011 pukul 23.57  

    kang enes, emangnya kalau pasang widget tab view lebih dari satu,gg bisa yach,..

    tolong responnya ya,..

    25 Mei 2011 pukul 01.29  

    di tunggu respon cepatnya,..

    25 Mei 2011 pukul 01.33  

    makanya aku waktu coba 2 widget kang enes gg bisa,.. terlanjur hpus tab view q y dulu,..

    makasih ya ustad enes atas rspon cepatnya

    25 Mei 2011 pukul 02.43  

    ustad tolong bagi tipsnya dong soal 'gmana cara membuat blockquote seperti di blo ustad,..

    asslamualaikum wr wb

    26 Mei 2011 pukul 11.11  

    mantab... sangat membantu, kunjungan balik sob...

    22 Agustus 2011 pukul 21.14  

    mantap infonya gan...

    Patut di coba..

    13 Desember 2011 pukul 12.10  

    Mantabs.. TQ Gan...

    7 Januari 2012 pukul 02.21  

    terimakasih y infonya, akan saya coba!

    19 Januari 2012 pukul 23.14  

    Heehhehehe bagus nih bisa nambah ilmu aq. The 7Blogger

    6 Maret 2012 pukul 08.12  

    wah mantaps, kita pasang link di BJGP mas.. pasang plink kita juga ya???

    7 Mei 2012 pukul 16.34  

    gan,,

    gimana nih,, saya kan baru banget nih di Blog...

    saya udah nuruti semua langkah-langkah tang Gan tulis,, tapi saya masih ada masalh nih,,

    tulisan yang saya buat koq ga tampil di 'Menu"??

    tolong banget Gan dijawab di emali saya ini.

    tooolllloooonnnngggg..............

    thanks before

    28 Mei 2012 pukul 18.08  

    ini bisa dipakai buat blog saja atau bisa juga untuk website ? makasih sebelumnya

    21 Juli 2012 pukul 03.45  

    keren gan , thanks , ane coba dulu :)

    28 Februari 2013 pukul 19.10  

    thanks gan untuk informasinya, sangat membantu :)
    ijin share http://grosiracemaxstasik.com/
    http://grosiracemaxstasik.com/ace-maxs/

    6 Februari 2015 pukul 08.19  

    Thank Gan infonya sangat membantu sekali

    11 Februari 2015 pukul 11.13  

    Mantaaaap gan artikelnya :)
    Ijin share http://apotekherbalkita.com/obat-tradisional-varises/

    14 Februari 2015 pukul 09.00  

    thanks gan
    http://tokoobatherbal23.com/

    17 Februari 2015 pukul 15.14  

    Terimakasih atas informasinya sangat bermanfaat :)

    http://kedaijellygamatgoldg.com/

    18 Februari 2015 pukul 11.51  

    terimakasih infonya sob, sukses terus
    http://ramuantradisionalkita.com/pengobatan-tradisional-diabetes-melitus/

    5 Maret 2015 pukul 09.59  

    keren banget artikelnya gan
    http://apotekacemaxs.com/

    9 Maret 2015 pukul 11.10  

    ilmu yang sangat bermanfaat sekali, terimakasih jadi nambah wawasan :)
    http://goo.gl/ptxm6t

    25 April 2015 pukul 11.10  

    visit back blog saya
    rizal-pesat.tk

    9 September 2015 pukul 09.50  

    ok makasih atas infonya dan ilmunya...!!!!
    house
    SEUMULA

    8 Juni 2016 pukul 03.07  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler