loading...

Trik Blogger | Membuat Tab View

Tab ViewMungkin kamu telah banyak membaca postingan trik blogger seperti ini, tapi tidak ada salahnya kita bersama-sama mereview kembali. OB tidak mengatakan trik blogger membuat tab view dalam postingan ini berbeda dengan lainnya. Mungkin sama, namun berbeda dari segi aplikasinya dalam blog. Trik ini OB dapatkan setelah beberapa kali mencoba memasang tab view dari beberapa blog narasumber namun ngga kelar-kelar (maklum otak lagi bebal), sampai OB mendapatkan sebuah situs Javascript Kit. Kemudian olah sana dan sini, alhamdulillah akhirnya tab view telah rampung OB pajang di Optimasi Blog.  Demo version dengan kode original Blog uji coba

Sekarang kita mulai trik blogger membuat tab view dalam blog :
  • 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.
  • Copy kode berikut dan pastekan di atas kode ]]></b:skin>
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
div.TabView div.Tabs {
width: 350px;
height: 24px;
overflow: hidden; }

div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }

div.TabView div.Pages {
width: 350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }

div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }

div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
Catatan :
  1. Kode berwarna hijau merupakan ukuran Tab-view, rekomendasi: usahakan ukuran width yang berwarna hijau sama.
  2. Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog kamu.
  3. Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.
  4. Untuk pemilihan warna, kamu dapat melihatnya di kode warna ini.
  • Copy kembali kode berikut di atas kode </head>
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

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

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);

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

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);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
  • Simpan template kamu.
  • Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
  • Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
  • Copy dan paste kode di bawah 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>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>

</div>
</div>


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

Kamu bisa memasukkan script<br />
Kamu bisa memasukkan image<br />
Kamu bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link jelas bisa/<br />

</div>
</div>


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

View 3.1<br />
View 3.2<br />
View 3.3<br />

</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>
  • Sekarang lihat tab view dalam blog kamu
Tips : Lakukan percobaan setiap kode trik blogger dalam blog uji coba kamu (pilih buat blog baru di dasbor blogger.com).

Catatan :
  1. Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
  2. Kode yang berwarna biru adalah tampilan teks yang akan muncul dalam halaman view sesuai dengan Tab terpilih.

Selamat membuat tab view...

103 komentar untuk “Trik Blogger | Membuat Tab View”

  1. Aku udah pasang, tapi kadang tab viewnya kalau mau diklik ndak berfungsi. punya solusinya.

    BalasHapus
  2. Mungkin kamu pakai kode pemanggilan script js lain (ex:http://geocities/123/tabview.js), coba pakai/copy full kode javascript yang ada di postingan ini. Semoga berhasil...

    BalasHapus
  3. wah rumit banget kang ,... ternyata ada yang lebih muda dari poenya moe

    BalasHapus
  4. waduh mas..tulunk dibantu dunk..cara masukkan kelompk tulisannya piye?

    BalasHapus
  5. Mas yang aku mah kagak jadi. malah jadinya cuman kayak gini
    Tab1.1
    Tab1.2
    Tab1.3
    Tab2.1
    Tab2.2
    Tab2.3
    Tab3.1
    Tab3.2
    Tab3.3

    BalasHapus
  6. Trims infonya, sangat menarik.... :)

    BalasHapus
  7. to Ihsan Tutorial: berarti ada kode yang ketinggalan, coba sekali lagi dan bener2 dilihat kodenya. Kebetulan postingan ini telah diupdate. Thanks.. :D

    BalasHapus
  8. wah mas,,
    pNya Qw kok gak sma kya pNya Mas??
    klo mau di buat judul trus diklik bisa masuk ke artikelnya itu gimana caranya mas???
    solusinya ya Mas, please GpL......:)

    BalasHapus
  9. to Awy_x'z: Ganti aja kode yang berwarna hijau seperti kode di bawah ini.

    <ul><li><a href="http://link kamu">Tab1.1</a></li>
    <li><a href="http://ink kamu">Tab1.2</a></li>
    <li><a href="http://ink kamu">Tab1.2</a></li></ul>

    ingat tanpa <br/> dan ganti teks Tab 1.1, Tab 1.2, Tab 1.3 dengan teks Awy.

    BalasHapus
  10. mas OB,klo membuat tab viewnya tanpa warna backgroud putihnya gimana?
    soalnya kayanya warnanya ga masuk ma warna blog saya..

    BalasHapus
  11. to f3hry: cukup dengan mengganti kode warna dalam kode background (background-color)dengan kode warna yang sesuai dengan template blog

    BalasHapus
  12. Wah saya Pratek dulu mas OB. .

    BalasHapus
  13. sama kasusnya seperti ihsan tutorial yang keluar hanya
    Tab1.1
    Tab1.2
    dst

    udah dicoba berulang2 masih tetap hasilnya, tolooooongg... mas OB

    BalasHapus
  14. terimakasih mas OB,. ne q coba dl,. sukses sll bwt mas OB :D

    BalasHapus
  15. salam kenal dari saya, script-nya oke dan sudah saya coba hasilnya siiip bgt !!! cuma klo mau nambahain garis dotted/putus-putus dibawahnya, svriptnya ditambahi apa ya? biar ada pembatas antara judul satu dengan lainnya

    BalasHapus
  16. Mas OB,, aq masih bingung (maklum orang gaptek)kasusnya sma kyak kudel413 sma ihsan... Tlong ya :D

    BalasHapus
  17. thanx...bgt ya, jd bagusan dikit ne blog ane...he3x...
    btw mo naya ne, klo ngrubah bentuk kotaknya bs ga ya..??, coz sepertinya kaku gt ya klo dipandang...

    tolong pencerahannya ya...thanx...

    BalasHapus
  18. Udah capek di obrak abrik tapi menu tabnya ngak bisa berfungsi semuanya udah benar tuh jadi bertamabah peting saya...??? solusinya dunk ya...????

    BalasHapus
  19. to pras: Agar tampilannya mirip dengan blog ini, tambahkan kode css dalam Tab View (sebelum ]]></b:skin> sebagai berikut :
    div.Pad ul li {
    padding:0 0 0 5px;
    border-right:2px solid #b3b3b3;
    border-bottom:2px solid #b3b3b3;
    margin-bottom:5px;
    background:#ffffff;
    color:#000000; }

    BalasHapus
  20. to Anton: Klo bikin garis bawah saja cukup dengan menambahkan kode CSS sebelum ]]></b:skin>
    div.Pad ul li {
    border-bottom:1px dotted #b3b3b3; }
    silakan ganti warna garis (#b3b3b3) sesuai blog mas Anton.

    to all: yang belum berhasil membuat tab view, tolong perhatikan kembali kodenya. Karena dari beberapa sobat OB telah berhasil meng-aplikasi-kannya dalam blog. thanks

    BalasHapus
  21. triknya bagus, tapi saya mau tanya tentang pembuatan link dalam postingan yang ditampilkan di tabview. saya sering salah caranya sehingga tabview ndak bisa di klik. Apa postingan yang kita masukkan di tabview berisi arsip-arsip tulisan yang sudah diposting? kalau belum diposting, cara buat linknya gimana?. Inti pertanyaan saya adalah bagaimana sebenarnya cara buat link yang benar untuk bahan tabview....,trims. kalau bisa hubungi saya di swwahyudi@gmail.com

    BalasHapus
  22. KALAU DI HTMLNYA GAK ADA BACA ]] bskin,,,itu di searching panya??makasi mas OB,,,

    BalasHapus
  23. to s.wahyudi: Link yang benar merupakan tautan yang memiliki alamat unik tertentu. Jd semua link yang mempunyai alamat yg jelas,sdh barang tentu merupakan link yg benar. Sedangkan cara memasukkannya, coba perhatikan kode warna hijau (ex: Tab 1.1) adalah <a href="http://cunz14.blogspot.com/" target="_blank">Tulis teks kamu disini</a>
    Khusus untuk target="_blank" artinya membuka link jika diklik di tab baru, kalau ingin membuka di halaman yg sama, hapus saja kode target="_blank"

    to ALUMNI SMA NEGERI 1 BANGKO: coba cari kode --></style> kemudian copy kode CSS di atasnya

    BalasHapus
  24. maaf bang OB saya kurang jelas, maksud saya buat link yang benar untuk bahan tabview gmn?, ketika saya buat link postingnya ketika di klik tertulis begini: maaf laman tidak ditemukan di blog anda.mohon penjelasannya sekali lagi

    BalasHapus
  25. mantab sob ilmunya..thanks, salam kenal ya

    BalasHapus
  26. makasih,.,. mas.,., atas info nya,.,. share yaahh.,.,

    BalasHapus
  27. boleh juga infonya . makasih, ini yang saya cari2 dari dulu. cape2 beli buku. eh, ada di trik ini. salam sobat

    BalasHapus
  28. walah hebat mas artikelnya bagus makasihnya

    BalasHapus
  29. Busyet, Baik banget, Ilmunya udah di share disini,
    moga bermanfaat...
    thanks bro...

    BalasHapus
  30. saya sudah coba pasang tapi cuma bisa nampung 3 column, untuk nambah columnnya gimana mas, juga sekalian cara nambah fungsi scrollnya , mohon bimbinganya...

    BalasHapus
  31. bro artikelnya keren boleh di coba!!!!!!!

    BalasHapus
  32. gk nambah ilmu saya mas....

    BalasHapus
  33. mas kx yang keluar cm 1??? sy kn bkn 2 cnth'a gini
    mas kx yang keluar cm 1??? sy kn bkn 2 cnth'a gini
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 75px;" class="Tabs">
    <a>LAGU</a>
    <a>AIBY BAND</a>
    </div>
    <div style="width: 180px; height: 250px;" class="Pages">

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

    <li><a href="http://www.ziddu.com/download/7343223/SembilanBand-Sesal.mp3.html" target="new">SESAL-9band </a> </li>
    <li><a href="http://www.ziddu.com/download/7343222/Sembilan_Band_-_Hafizah.mp3.html" target="new">HAFIZAH-9band </a></li>
    <li><a href="http://www.ziddu.com/download/7343221/SembilanBand-Cemara.mp3.html" target="new">CEMARA_9band </a></li>
    <li><a href="http://www.ziddu.com/download/7343119/SembilanBandBerharapKauKembali.mp3.html" target="new">BERHARAP KAU KEMBALI-9band </a></li> <br/>

    </div>
    </div>

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

    <a href="http://www.ziddu.com/download/7226353/MAAFKANAKU.mp3.html" target="new">MAAFKAN AKU </a>
    <a href="http://www.ziddu.com/download/7212341/CERITAKITA.mp3.html" target="new">CERITA KITA </a>
    <a href="http://www.ziddu.com/download/7065469/Tanpaarti.mp3.html" target="new">TANPA ARTI </a>
    <a href="http://www.ziddu.com/download/7343409/Mlpknmu.mp3.html" target="new">MELUPAKANMU </a>
    <a href="http://www.ziddu.com/download/7343409/Mlpknmu.mp3.html" target="new">MELUPAKANMU</a>
    <a href="http://www.ziddu.com/download/7343410/Harapanku_aiby.mp3.html" target="new">HARAPANKU </a>

    </div>
    </div>


    </div>

    </div>
    </form>

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

    BalasHapus
  34. Terima kasih kasih infonya euy.... Berguna banget... Mau tak coba ah....
    Maju terus kang... Posting informasi Yang berguna...
    SUKSES...!!!

    BalasHapus
  35. trims banyak mas ilmunya..manfaat sekali

    BalasHapus
  36. MANTAPZZZ Dari SEkian Tips yang aku coba cuman ini yang berhasil!!!
    :)):)):)):)):))

    BalasHapus
  37. Tapi Kok Kalo aku Pasang Malah Tampilan Situsku Jadi Amburadul

    BalasHapus
  38. Sip...
    Artikel yang sangat bermanfaat.
    Ok, lanjutkan terus

    BalasHapus
  39. heh ohm. kenapa posisi menu utamanya selalu di kanan atas ya. ga bisa diubah tu....??? help me fast...

    BalasHapus
  40. some body help me... menu utamanya pindahnya gimana. punya ohm bisa ada di bawah. itu bawaan CSSNya kan yg diotak-atik.... help ohm help.........

    BalasHapus
  41. OKE BROO RTHANKS TIPS NYA NIH UDAH BISA BROO..

    BalasHapus
  42. Mas OB...
    Kenapa isinya(hasilnya) terlalu ke bawah ya...
    thanks :((

    BalasHapus
  43. Makasih 10000000% Mas! saya sudah berhasil melakukan yang saya inginkan dari dulu!

    :D :)

    Walaupun sebelumnya saya agak bingung... ~x(

    BalasHapus
  44. Thx ya dah ku coba di blog ku, ternyata sukses.

    BalasHapus
  45. terima kasih atas informasinya.. visite back... ^_^

    BalasHapus
  46. duh bang OB kalo mw bikin tab tapi beda model gimana???
    maksudnya ga kotak aja gitu,, paling ga kaya gini ni,,,
    [IMG]http://i709.photobucket.com/albums/ww99/d_must/tab.png[/IMG]
    http://i709.photobucket.com/albums/ww99/d_must/tab.png
    thanks y........

    BalasHapus
  47. Boleh gun di pasang lagi cari-cari artikel ini, tks

    BalasHapus
  48. Just reminder shoutmix lagi trouble ya link-nya gak keluar, coba aja cbox thanks gun

    BalasHapus
  49. mas OB,, kalo mau buat 2 tab view gimana?? aku udah berhasil buat satu,, tapi waktu mau buat lagi satu kok ga berhasil?? apa harus copy code lagi di edit HTML?? ato cuma langsung add widget?? aku langsung pake add widget,, tapi waktu disimpen itu gamau,,

    BalasHapus
  50. Dengan memberikan tab view, blog kita terlihat lebih rapi. Tutorial yang sangat bermanfat

    BalasHapus
  51. thx bgt infonya... saya bisa kok..

    masa yg laen gag bisa..??

    BalasHapus
  52. hamdalah..dah bisa tnggl di edit dkit,, matursuwun yoh kang.. sukses bwt nte

    BalasHapus
  53. mas kok punya saya gag ada scrollnya ya

    BalasHapus
  54. kang OB aku mau tanya nuie biyar tab view nya di bawah kaya di blog kang OB gmana truz koq bisa nyatu sama info blog nya kang OB yang kaya Trafik Page Rank dan sebagainya ...gimna donk kang tolong solusinya ya...jagn lupa di bales ya kang ...
    thankssss...

    BalasHapus
  55. @admin

    di mana mas tempatnya?

    BalasHapus
  56. Makasih bro..bisa..liat di imm-saintek.blogspot.com

    BalasHapus
  57. liat bener ya bro..pokoknya g bakalan nyesel

    BalasHapus
  58. makasih mas... sukses..... :D

    BalasHapus
  59. @OB
    kang sudah saya coba kok g bosa bagai ma caranya bisa lo di kasih 1 contoh......thenk

    BalasHapus
  60. saya sangat mengharapkan blsanya .....GPL bls di perjuanganulamadahulu.blgspot.com .......saya tunggu blsanya

    BalasHapus
  61. @IBNUYAHYA Ini salah satu blog demo penerapan tab view Blog Uji Coba tanpa merubah satu pun kode dari "Tab View".

    BalasHapus
  62. yang di kanan bawah itu hasilnya y? mksi, mau saya coba dulu

    BalasHapus
  63. kerennnnnn...mampir baliki ya....:-p

    BalasHapus
  64. OHM kalow di tab dikasih script widget bisa ga ya???

    BalasHapus
  65. like this...sudah bisa, tp apakah bisa bentuk kotak menu itu agar berbentuk tumpul ..? kan kalo seperti ini agak kaku rasanya. Tolong ya mas penjelasannya.

    BalasHapus
  66. @na-raka : lawannya sur-ga :)) becanfa, mas. Jawabnya "bisa"

    @Anak Sosial : Kalau mas ingin kotak tab view-nya berbentuk tumpul (rounder corner), tambahkan kode CSS berikut di bawah kode div.TabView div.Tabs :
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    Sedangkan untuk tabs a-nya saja (Tips SEO, Trik Blogger, ...), letakkan kode di atas pada kode div.TabView div.Tabs a.
    Catatan :
    *Untuk kode di atas bisa dilihat rounder corner dengan menggunakan browser FF, Flock, dan safari.
    *Kode CSS di atas bisa diedit dengan menambah atribut tertentu, seperti; -moz-border-radius-topleft (rounder di kiri-atas), ...-topright (atas-kanan), ...-bottomleft (kiri-bawah), ...-bottomright (kanan-bawah).

    BalasHapus
  67. @OBsalam kenal mas... saya tertarik dengan tulisan anda.... mungkin bayak orang yg tidak tau HTML. tlong masa pas saat tulis artikel lebih ditel lg mas. oh iya mas mkasi info y.

    BalasHapus
  68. baru mau coba mas.mogamoga bisa berhasil.nice tutor lah:D

    BalasHapus
  69. Askum
    mas bs bntuin aq gak??aq gi buat blog tp gk tw buta tu kotak2 gk tw tu nmanya ap
    yg ad tisan home,musickyq gitu lohh
    mhon bntuannya

    BalasHapus
  70. @Muhammad arfans : Wa'alaikum salam
    mungkin yang dimaksud, kk arfans adalah horizontal navigasi, triknya sudah ada disini kk. coba kk ketik di kotak pencarian (kanan atas blog ini) tentang "horizontal navigasi"

    BalasHapus
  71. kang OB..
    trik simple dan menarik..
    saya juga udah sukses membuatnya nie mas..

    tapi ketika pake IE knp gak jalan ya pas kita klik tab view-nya ?
    hal ini saya juga temui di semua tutor, dan jg tab view selain punya mas..
    tapi versi punya mas ini yang paling catchy dan simple, heheh..

    BalasHapus
  72. tanks infonya om,, tab view model yang ini bagus, loadingnya juga cepat..

    BalasHapus
  73. udah kulilingan eh nemu juga...matur tanks'u a'...

    BalasHapus
  74. Agak bingung nih isinya kode-kode HTML smua. Tapi akan saya coba deh

    Oh ya, silakan mampir ke blog saya ya kalau sempat

    BalasHapus
  75. saya mau nanya ni...
    saya sudah berhasil mengaplikasikan tab nya, tapi ukuran kotak isinya kurang cocok diblog saya...
    yang dirubah apa ya biar kotaknya lebih lebar ?
    thx

    BalasHapus
  76. pengen tau cara masukin gambar kedalam tab ya gimna ya.. saya masih bingung..

    sekalian pengen tau cara ngebuat blog serapi om OB tu gimna..
    tolong info ya..
    makasih.

    BalasHapus
  77. kang OB, bisa ga tab view nya di isi recent artikel gt,, jadi ga usah repot masukin link baru kalo ada postingan baru,,, dah otomatis keisi gt.....thx kang :)

    BalasHapus
  78. ok, trims triknya.....
    jangan lupa kunjung balik ya....

    BalasHapus
  79. mantap tutornya mas..uda diterapkan juga :)

    BalasHapus
  80. garis pembatas bisa ditambahin gak gan??

    BalasHapus
  81. mantap infonya,blogwallking, kunjung jg gan ke http://motorheroes.blogspot.com

    BalasHapus
  82. OK mas udah di coba
    Cuman mau tanya
    Gimana ya caranya supaya bisa nampilin
    blog archives atau recent cooment
    di tab view
    misal tab 1 jadi blog archives
    tab 2 jadi recent komment

    Thanks mas buat ilmunnya..

    BalasHapus
  83. Mas Suram Neh Otak Gwa....
    Numpang Tanya...
    Menu q Koq Kaga' Bisa Di Klcik ya....????
    MOHON PENCERAHAN

    BalasHapus
  84. kalo buat Tabview yg sperti di Footer punya Agan dmna ya ??
    balas ke cayun182@yahoo.com
    thanks

    BalasHapus
  85. @cayun:Kalau dijabarkan secara detail, panjang ceritanya, gan.
    Intinya kita perlu mengkostumasi atribut width dan height dalam kode CSS, sehingga sesuai dengan blog kita.
    Langkah selanjutnya, baru kita melakukan beberapa penyesuaian pada margin, padding, dan lainnya

    BalasHapus
  86. masih bingung sob, dengan cara ganti ukuran tinggi sama lebarnya kotak, biar bisa disesuaikan dengan blog aku... thx

    BalasHapus
  87. 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
  88. @raf king Saya sudah berkunjung keblognya tapi saya tidak melihat adanya tabview disitu?

    Kalau ingin tahu caranya coba baca-baca komentar terdahulu diatas postingan ini ataupun postingan yang terkait dengan judul ini.

    Terima kasih.

    BalasHapus
  89. @raf king:
    Hanya saran saja, gan. Kalau tab view digunakan untuk full posting, rasanya sangat janggal. Tab view biasanya digunakan untuk menampilkan widget, bukan posting, gan. Cara nambahnya:
    <div class="Tabs">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    …nambah tab di sini…
    </div>

    tambahkan pula:
    <div class="Page">
    <div class="Pad">
    …isi halaman tab…
    </div>
    </div>

    Sesuai dengan posisinya masing-masing. Dan jangan lupa, sesuaikan pula dengan ukuran lebarnya.


    @Rudy:
    Saya kira juga ngga ada, mas Rudi. Rupanya agan raf king membuat tab-view yang isinya full posting per-label. Mirip dengan fungsi navigasi horizontal menu.

    BalasHapus