Menambah Sub Tab View

Duaaarrrrr....???!!! Eh, ketemu lagi. Sebenarnya posting hari ini OB sempat-sempatkan, sekedar untuk menghilangkan rasa dahaga. Penyebabnya karena sudah lama OB ngga aktif lagi dalam dunia blogger, baik memposting tentang trik blogger maupun tips seo. Sekarang kesempatan datang, jadi OB sempatkan untuk bikin satu postingan. Nah, kamu mungkin sudah mencoba bagaimana cara membuat Tab View? Kalau belum silakan klik link tab view ini. Kadang kita ingin membuat tampilan tab view ada yang menjorok ke dalam dan OB istilahkan disini adalah sub tab view. Maksudnya adalah teks (link) yang menggunakan tanda panah biru dalam tab view blog optimasi blog (sebelah kanan bawah), versi demonya dapat dilihat dalam blog uji coba. Posting ini OB dedikasikan untuk saudara Wanz yang beralamat blog di http://pondok-cerita.blogspot.com, apabila kamu punya waktu senggang please kunjungi sobat yang satu ini.

Sekarang kita mulai trik blogger membuat sub tab view, namun sebelumnya blog kamu harus sudah terinstall tab view :
  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode CSS Tab View.
  • Tambahkan kode berikut tepat di bawah kode CSS Tab View.
div.TabView div.Pages div.Page div.Pad div.pad2 { padding: 3px 5px 0 20px; }
  • Simpan template kamu.
  • Kemudian pilih tab Elemen Halaman --> Klik widget/gadget "tab view" (atau nama apapun yang kamu berikan sebelumnya).
  • Kodenya lebih kurang seperti ini.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">

<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>

<div class="Pages">

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


<ul>
<li>Tab1.1</li>
<div class="pad2">
Sub Tab 1.1.2<br />
<ul>
<li>Sub Tab 1.1.2</li>
</ul>
Sub Tab 1.1.3<br />
</div>
<li>Tab1.2</li>
<li>Tab1.3</li>
</ul>

</div>
</div>


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

Tab2.1<br />
Tab2.2<br />
<div class="pad2">
Sub Tab 2.2.1<br />
Sub Tab 2.2.2<br />
Sub Tab 2.2.3<br />
</div>
Tab2.3<br />

</div>
</div>

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

Tab3.1<br />
Tab3.2<br />
Tab3.3<br />

</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Catatan :
Kode di atas sudah ditambahkan kode sisipan sub tab view yang ditandai dengan warna merah.
  • Sekarang lihat blog kamu.

Selamat membuat sub tab view ...

45 komentar untuk “Menambah Sub Tab View”

  1. WAH,.. memang mas OB,makin hari makin...

    OK..

    ---------------------------------------------------------

    makasih mas..

    BalasHapus
  2. Wih, keren banget! Tapi kayaknya ini ga cocok untuk semua template deh, terutama yang custom template.

    BalasHapus
  3. Bila dalam kata perbuatan tergores salah & khilaf, dgn segala kerendahan hati terucap mhn maaf setulus2nya..

    --------------------------------------------------------------
    Marhaban ya Ramadhan...

    BalasHapus
  4. Mas mau tanya dunk.. tau ga caranya bikin tab view kaya yang di http://kelincex.blogspot.com yang merupakan tab view sekaligus sidebar itu..!!

    Please tolong dijawab..!!!

    BalasHapus
  5. Mas mau tanya dunk.. tau ga caranya bikin tab view kaya yang di http://kelincex.blogspot.com yang merupakan tab view sekaligus sidebar itu..!!

    Please tolong dijawab..!!!

    BalasHapus
  6. Mas mau tanya dunk.. tau ga caranya bikin tab view kaya yang di http://kelincex.blogspot.com yang merupakan tab view sekaligus sidebar itu..!!

    Please tolong dijawab..!!!

    BalasHapus
  7. Informasi yang menarik adalah informasi yang membuat pembacanya mendapatkan manfaat darinya.
    Semoga informasi anda menjadi salah satunya.
    Stop Dreaming Start Action

    BalasHapus
  8. forum Top Blog http://topblog.playogame.com

    BalasHapus
  9. yes..lagi info dari mas. Secara peribadinya,teman mengatakan ia adalah 1 lagi info yang mantap. terima kasih mas.

    BalasHapus
  10. Mas tq ya.. padahal lagi sibuk2nya.. hehe

    kalo sub tab viewny mau di tambahkan icon bisa ga ya.. ??? hehe banyak maunya ni mas..

    BalasHapus
  11. wah ini yg sedang saya cari thanks atas tutorialnya ya

    BalasHapus
  12. mantaf infonya bro, tak cobain di blog ane middleblog

    BalasHapus
  13. Makin lama makin mantap infonya..
    Semangat!!! :D

    BalasHapus
  14. baru masang tab...nyoba ini juga ah :D

    BalasHapus
  15. wah2.. ngabuburit disini saja sambil baca2 ah.

    BalasHapus
  16. Terima kasih atas sumbangan ilmunya Mas OB, saya akan coba di log saya, oya mas, kalau tidak keberatan saya mau tanya mengenai bagaimana memasukan tanggal bulan dan tahun persis diatas judul posting (masih dalam kotak posting). Kalau ada waktu tolong dibahas ini, terima kasih atas perhatiannya. Saya newbie (belon genap 1 bulan).

    BalasHapus
  17. Sippp..langsung dipraktekkan..makasih..:)

    BalasHapus
  18. Posting bermanfaat, thank ya..

    BalasHapus
  19. Nah...langsung dicoba. terima kasih mas.

    BalasHapus
  20. utorial mas OB memang mak nyus. widget ini dapat menghemat tempat di blog.

    BalasHapus
  21. Thanks code nya, bisa langsung dicoba.

    BalasHapus
  22. Info yang mantab sob.
    Ini info yang bermanfaat ...
    Lanjut terus ...
    Ditunggu posting selanjutnya ya!
    Jangan lupa kunjungan balik n kasi komen juga ya, biar impas, hehehe!

    BalasHapus
  23. SAYA SANGAT AWAM PENGEDITAN BLOG
    Saya sangat terbantu dengan blog anda, dan terima kasih sekali dari saya. Jika boleh bertanya, bagaimana cara memasukkan kode link dalam sub tab view UNTUK MENU HORIZONTAL, karena yang muncul bukan sub tab view pada menu HORIZONTAL SEPERTI CONTOJ pondok-cerita sahabat iwan, tapi seperti:
    1.
    2.
    3. dst
    dan yang terlihat masih ada border garis kanan untuk tarik turun naik seperti contoh KOTAK sub tips SEO, trik blogger,top posting sebagaimana contoh pokok kanan bawah blog OB ini,

    DALAM PENJELASAN DI ATAS saya tidak melihatnya:


    misal contoh di atas
    < class="Page">
    < class="Pad">

    Tab2.1
    bagimana cara nulis kode linknya http:....?
    Tab2.2
    sama"?
    Tab2.3
    sama ?

    BalasHapus
  24. langsung dicoba bos...ilmu udah dapet tinggal prakteknya aja

    BalasHapus
  25. semoga bermanfaat
    kunjungi donk
    blogguna.co.cc

    BalasHapus
  26. thank's gan buat tutorialnya berguna banget

    BalasHapus
  27. Barakallahu fihi...! Kbetulan banget sementara ngedit Blog, mo pasang Tab bngung...Eh ketemu dengan blog ini... Thank's ya atas infonya...Sukses selalu

    BalasHapus
  28. kalau template baru blogger (template designer) sudah ada gadget tab menu, bagaimana cara menambahkan sub menunya? mohon bantuannya
    terima kasih.

    BalasHapus
  29. oke !! sip2 !!
    www.neversuccess.co.cc

    BalasHapus
  30. makasih banget tutorialnya mas. kayaknya mas ini programer ya?jago banget si

    BalasHapus
  31. aku udah pasang tabnya tapi di atas jumlah tabnya cuma 3 bisa nambah lagi g???caranya kayak gimana??

    kunjungi newbie blog q ya di oret-oretankecil.blogspot.com

    BalasHapus