mas template

Membuat Tab View Menu Tanpa Edit HTML di Blogspot


Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template. Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.


Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>

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

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>
Keterangan:
  • Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
  • Tulisan berwarna orange merupakan warna judul Tab
  • Tulisan berwarna hijau merupakan judul Tab
  • Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
  • Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.
Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Semoga bermanfaat !
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

120 comments:

  1. untuk memuat link di isi tab bagaimana mas???
    terlalu banyak nanya neh saya hehehe

    ReplyDelete
  2. Replies
    1. ASK numpang tanya klo arsip blog sma label scriptnya gimana

      Delete
  3. terima kasih atas ilmunya mas, saya coba praktekan di blog saya, maklum nubi coba bikin blog hehehehe

    mampir yah

    achmadrezafadillah.blogspot.com

    ReplyDelete
  4. thank gan tap koq errorrrr ya
    www.ajuztsuta.blogspot.com

    ReplyDelete
  5. Thanks gan..
    Bermanfaat bagi newbie kayak ane..
    visit my blog..:)

    ReplyDelete
  6. kog punya gue jadinya semrawut ya sob. .
    gimana caranya agar lebih rajin. .
    thanks

    ReplyDelete
  7. @:

    berhasil, tapi scrollingnya yang bawah agak menghilang sedikit..sedang punya mas kok ga?

    ReplyDelete
  8. @Sinung Caem:
    Coba diutak atik lagi pasti ada yang salah naro nya.. makasih ya

    @seomelekete:
    Tambahin post yang diletakkan disitu pasti nanti naik

    ReplyDelete
  9. ane coba gan, tapi ko keluar cuma 2 tab doang ya gan. padahal kan di sana 3 tab. ane mau coba 3 tab ko ga bisa ya? apa template ane problemnya. soalnya di tamplate lainnya bisa. kenapa ya bang?

    ReplyDelete
  10. @cerita anak kost:
    Bisa jadi karena terjadi konflik antar javascript yang ada di template anda

    ReplyDelete
  11. mkasih kang tutor nya..
    sangat lengkap sekali tips-tipsnya, jadi semakin semangat blogwalking..
    :)

    ReplyDelete
  12. Mas Punya sya kok gak bisa tab nya malah gak kayak punya mas ?????? coba mas buka linik ini <a href="http://flaz-tips.blogspot.com/>Klik Disini mas contoh nya</a>

    ReplyDelete
  13. @WORLDEinfo:
    Wah iya koq bisa beda ya...
    Coba masukkan kode pada nomer 2 (tab view) artikel disini

    ReplyDelete
  14. Makasih bangat gan., artikelnya sangat membantu, udah ane pasang di blog ane,berhasil. :)

    mampir ya gan.. hhehe :D

    ReplyDelete
  15. g ngerti cara masukin kontennya.. gmna carany mas??

    ReplyDelete
  16. yoi,,keren nih jadi,a,,thx nih bro info,a,,!!

    ReplyDelete
  17. bagaimana dengan blog saya gan. tertlalu lebar ke bawah! gimana solusinya mas?

    ReplyDelete
  18. saya sudah coba
    tapi isinya koq cuma
    konten 1.. konten2. konten 3

    mohon bantuannya

    ReplyDelete
  19. udah q coba di blog q,cuma yang di tab TRIK gak baris ya knp itu mas ya,tolong di cek ke tkp.
    makasih

    ReplyDelete
  20. ada cara yang lebih simpel gx mas soalnya harus masukin url postingannya satu persatu ribet.........!

    ReplyDelete
  21. Thank's jangan lupa mampir ya http://uzumaki-samudra.blogspot.com/

    ReplyDelete
  22. kalau menambah label pada tab view gimana ya?

    ReplyDelete
  23. yang bener harus masukkin linknya 1 1?

    ReplyDelete
  24. kamsia mas..kamsia...sukses .Top deh artikelnya

    ReplyDelete
  25. http://johnytemplate.googlecode.com/files/tab_view.js <--- udah kena banned mas... :'(

    ReplyDelete
  26. Wah mana tadi komen nya ya koq ilang?
    Untuk URL script tutorial diatas http://johnytemplate.googlecode.com/files/tab_view.js
    Ganti dengan ini : https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js

    ReplyDelete
  27. malem gan, saya sudah membacca posting juragan tentang script di google code yang kena baned, kira-kira untuk script membuat tab view, saya bisa dapetin dimana ya gan, soalnya tab view punya saya dari juragan, sudah tidak berfungsi .... terima kasih gan atas bantuannya

    ReplyDelete
    Replies
    1. Malem juga
      Perhatikan kode ini pada kode panjang diatas
      <script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">

      Nah itu javascript yg udah saya update, tinggal ganti aja yang lama pake kode diatas

      Sama semoga bermanfaat

      Delete
  28. Gan kok TAB 1 nya kebuka terus..supaya nunggu kursornya nyampe dulu baru kebuka bagaimana caranya Gan..seperti TAB 2 dan TAB 3 gitu..

    ReplyDelete
  29. sob kok konten 1 konten2 konten 3 itu selalu rata ketengah ga bisa diatur supaya ke kiri, sedangkan kalau text-align: center; /* Posisi Teks Menu Tab */ bisa diatur mau ke kanan atau ke kiri, sayangnya cuma tulisan yang di tab aja yang bisa diatur. alhasil wiget yang selalu saya tambahkan ke menu tab nya selalu rata ke tengah, jadi ga bagus.. itu gimana cara ngatasinnya ya sob biar isi tab nya rata ke kiri? #maaf_panjang_pertanyaanya

    ReplyDelete
  30. Maaf sob, pertanyaan sebelumnya prihal menu rata ketengah saya tidak jadi tanya deh, soalnya saya dah nemu solusinya biar rata ke kiri, thanks sob atas widgetnya... Keep posting ya?

    ReplyDelete
  31. makash skripnya masbro,,tapi saya kok mumet mau masukin "ENTRI POpULER", bisa kasih masukan ato contoh gak masbro?/terima kasih

    ReplyDelete
  32. Cara membuat page view kayak disini gimana caranya sob?
    Tyus yang browser>> (diatas judul posting) itu gimana caranya?

    ReplyDelete
  33. mantab ndan, jadi lebih praktis makasih ya

    ReplyDelete
  34. gan pas gue translate ke bahasa inggris kok jadi berantakan dah menu2 nya??
    mohon bantuanna

    ReplyDelete
  35. src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">


    KO DIHAPUS SI mas .JS NYE..
    jadi keluar pesan pop up.. mohon diperbaiki :)

    ReplyDelete
  36. berhasil mas,,tapi setiap tabnya (Tab1,Tab2 dan Tab3)gak bisa di klik,,mohon pencerahannya,,trims.

    ReplyDelete
  37. mas, cara ngisi konten secara manual gimana ya >??
    saya sudah cari cari di google ndak ada tutorialnya mas..
    tolong mas

    ReplyDelete
  38. mantap gan, langsung sedot,,,
    thanks,,,,
    http://www.ivanslankers.com/

    ReplyDelete
  39. Bagus Tutorialnya Mas.Aku ijin COPAS kode script nya. Thank's yah

    ReplyDelete
  40. Love This
    Great Blog, superb content.

    mas,,aku pengen buat tab view yang bisa muncul pada page.
    bagaimana yah?
    Thanks

    ReplyDelete
  41. agak susah gan, kontennya gak keluar :(

    http://rizapahlepi.blogspot.com/

    ReplyDelete
  42. saya sudah coba gan,
    tapi koq yang keluar tap1, tap2, n tap 3.
    mohon bantuannya sob. thanks

    ReplyDelete
    Replies
    1. sama mas...
      punya saya juga begitu.
      gak keluar content box 1,2,3

      Delete
  43. isi konten Tabnya gmn mas? biar bisa spt blog ini bisa per label wordpress, joomla gitu,,,

    ReplyDelete
  44. Assalamu allaikum mas.
    maaf tanya.. kug tampilan nya tidak sama seperti contoh ya mas. jadi polos gitu setelah saya coba. supaya bisa seperti punya mas kolis tab view nya gmana mas. hehhehe. thank.

    ReplyDelete
  45. mas,, jikalau kami boleh nanya.,. gmn caranya mengisikontennya,,??ppllleeassssee masss,,

    ReplyDelete
  46. mas, mau tanya nih, ane udah coba pake ta viewnya, tapi setelah ane cek di validator.w3.org errornya nambah satu gini nih:
    -------------------------------------------------------------------
    Line 1814, Column 23: document type does not allow element "style" here
    style type="text/css"
    --------------------------------------------------------------------
    Itu kenapa ya, apa di bagian sidebar saya nggkk ngizinin css? mohon solusinya

    ReplyDelete
  47. terimakasih maskolis, saya nyari yang pas sulit banget dapetnya, akhirnya say menemukan disini. :D

    ReplyDelete
  48. Kok punya saya jadi ancur gini iyah mas tolong pencerahan nya donk mas
    http://poetra-pakumis.blogspot.com

    ReplyDelete
  49. cara ngisi konten-nya pake label dan popular post gimana caranya mas. tolong di check di http://pejalan-sunyi.blogspot.com nuwun...

    ReplyDelete
  50. blogwalking mas., ma nanya nih kok gk muncul yah postingannya.??

    ReplyDelete
  51. om,sy udh coba kode ny. Ilmunya bagus om, Bisa sihh, tp ada yg bikin bingung nih:
    1. sudah sy tambahkan kontennya secara manual tp kok malah berantakan ya?
    2. kenapa menu tab nya ga bisa di klik ya om?
    3. kalo mau masukin isi kontennya tentang blog active gmn ya om?
    4. scrol nya apa bisa digunain ya om.
    tolong pencerahannya ya om, sy pelu om.
    my blog http://oxsitech.blogspot.com
    terima kasih.

    ReplyDelete
  52. mau tanya agan Maskolis...
    "Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya."
    tambahkan kode yg berkedip itu mksud nya apa ya gan??
    makasi sebelume...

    ReplyDelete
  53. makasih tutorialnya gan,, mantap coy!!!

    ReplyDelete
  54. Mas yang ini
    script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js"

    sudah di banned lagi kah? atau di ganti lagi?

    saya ganti pakai yang di tutor ini ko ga ada perubahan.
    script type='text/javascript'>
    //<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
    //]]

    Terimakasih sebelumnya. mohon informasinya

    ReplyDelete
    Replies
    1. saya sudah coba view source dati template ini yang sekarang, kemudian menemukan JS nya yang ini

      http://johnytemplate.googlecode.com/files/tab_view.js

      tapi masih tetap ga jalan tab nya, mohon solusinya mas.
      terimakasih

      Delete
  55. ms ga bisa dinamis ya tabnya?harus update trus??

    mampir ya gan
    http://seveenthpedia.blogspot.com/

    ReplyDelete
  56. Ane suka tampilannya, tapi tab nya gak work master :(

    ReplyDelete
  57. Maaf gan, saya ingin bertanya..
    Cara memasang subscribe di bawah postingan itu gimana ya?
    maaf kalau saya OOT

    ReplyDelete
  58. nah yang ini baru lengkap.
    setiap search kok pasti dapatnya blog maskolis.
    mantap. hebat, mas

    ReplyDelete
    Replies
    1. bener nih mas yusuf.. Selalu..

      blog maskolis di temu in di search

      Delete
  59. Wah, ini ni yang saya cari-cari dari dulu sampe sekarang. Thanks ya infonya, jika tidak keberatan silahkan visit back ya ke Softrickinfo

    ReplyDelete
  60. kok tab nya ga bisa diklik yahh???? gimana nih?????

    ReplyDelete
    Replies
    1. sama bro/sist, jadinya statis di tab 1, dan tab 2,3 ga bisa diklik... gmana nih solusinya?

      Delete
    2. ada cara yg lebih mudah
      http://www.redboldline.blogspot.com/2013/10/cara-buat-tab-menu-di-blog.html

      Delete
  61. mas, mohon buat tutorial untuk mengisi bagian isi tab seperti : popular post dam recent post
    mohon bantuannya
    trims

    ReplyDelete
  62. Misii.. kalo mau nambah tab lagi gimana kak?itukan cuma 3 tab'-'

    ReplyDelete
  63. menu tab emang sulit si, seharusnya dkasih yg keterangan lengkap n contoh2 gitu... aku pake manual tinggal pencet Laman trus ketik udah deh ^^ kunjungi blog q ya http://rumahmoon-1991.blogspot.com

    ReplyDelete
  64. mas bro ada cara yang lebih mudah silahkan mampir ke :

    http://www.redboldline.blogspot.com/2013/10/cara-buat-tab-menu-di-blog.html

    ReplyDelete
  65. wah mas punya q kok gx bisa keluar isinya gmana???

    ReplyDelete
  66. gan gimna ne punya gx bisa buat menu bar nya

    ReplyDelete
  67. makasi kang atas tutorialnya,,ane udah bisa nampilinnya,,tapi bingung bikin jadi bagus kayak punya akang,,terus apa bisa update otomatis dari postingan kita masuk ke tab view itu.. blog ane: ariflawobesamo.blogspot.com

    makasi sekali lg,,

    ReplyDelete
  68. Nice Info tutorial, Thanks Sob.
    Salam Sukses:)

    ReplyDelete
  69. Nice info sob, mampir juga ya ke http://farrasskipper.blogspot.com/ (y)

    ReplyDelete
  70. Mantab gan!!
    Cara masukin postingan ke tab nya gimana ya??

    ReplyDelete
  71. sangat bagus sekali gan tutorialnya,tk

    ReplyDelete
  72. "Nice post, berkunjung sob...visit back yahAnaktimor17 Blog"

    ReplyDelete
  73. "Nice post, berkunjung sob...visit back yah di Anaktimor17 Blog"

    ReplyDelete
  74. CHEK TICKET PESAWAT VIA SMS:
    Ketik (NAMA) spasi (DARI-TUJUAN) spasi (TANGGAL BERANGKAT)
    Contoh: (AURELIA) (UJUNG PANDANG – DENPASAR) (22 Maret 2014)
    Kirim Ke: HP : 085399014500
    PIN BB : 7544AC1B
    Booking Now…!!! Reservasi Online 24 Jam

    ReplyDelete
  75. mas gimana cara isi link/list postingan dalam boxnya?

    ReplyDelete
  76. gan, buat ngilangin kotak putih besar di bawah ab gmna gan ?

    ReplyDelete
  77. thanks gan sangat bermanfaat buat saya yang newbie ini
    mampir ya di blog ane yang baru seumur jagung

    handexcel.blogspot.com

    ReplyDelete
  78. gan kok klik ke tab 2 sama 3 g bisa keluar ya ???

    ReplyDelete
  79. mantab sekali mas,,mau saya cobaah.. biar jadi tambah keren blog saya

    ReplyDelete
  80. http://pengusaha-sukses27.blogspot.com

    ReplyDelete
  81. wah , mantap nih , langsung TKP ah :)
    sundul sundul

    ReplyDelete

  82. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  83. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  84. mampir juga ke blog http://www.kotakmusic.com/

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger