Membuat Tab View/Widget Multi halaman Di blog

Viyan Pradita Jumat, Maret 25, 2011

Pastinya sudah pada tahu kan apa itu tab Multi Halaman/Tab View?? selain menarik, tab view ini jg berfungsi untuk menghemat halaman, khususnya di bagian Sidebar web/blog.
sebelumnya saya ucapkan terimakasih buat sobat @Dadi Kasih yang sebelumnya sudah Requez trik ini.
karena udah ada yng nungguin jadi langsung saja ke TKP.... hihihii

demo:


Ikuti langkah-langkah berikut:

  • Loginke akun blogger sobat
  • Masuk ke rancangan/design
  • Pilih Tata Letak
  • Pilih Add New Widget/Tambah Gadget/Element
  • klik HTML/Javascript.
  • Kemudian copy paste kode 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: #222222; /* 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: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="https://sites.google.com/site/kodeblogger/javascript/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

  • Jangan lupa Simpan widget. Silahkan edit warna, ukuran dan seterusnya menurut seleera sobat sendiri.

Untuk mempermudah mengedit warna silahkan DISINI
Selamat mencoba.....

Ditulis Oleh :

Artikel Membuat Tab View/Widget Multi halaman Di blog ini dipublish pada hari: Jumat, Maret 25, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

29 komentar
Terjun Ke Kolom Komentar

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. mantap gan,1000 wrong..... terimakasih terimakasih banyak,saya suka dengan postingan kali ini, dan juga ada beberapa bagian dari postingannya juga saya copy untuk saya pelajarin.... salam sukses ya gan. ditunggu postringan berikutnya

    BalasHapus
  3. Work apa Wrong sob ?? hehehee
    Oke.. sama2 sob :)

    BalasHapus
  4. mantap gan..bermanfaat bwt saya yg newbie ini.hehehehe
    [emonr.blogspot.com]

    BalasHapus
  5. Ok Sob, Senang bisa berbagi :)

    BalasHapus
  6. Terima kasih tutorialnya. Menghemat space. Kalau pengaruh pada loading sama tidak ya dengan pasang widget sendiri-sendiri atau menjadi lebih cepat karena sudah digabung seperti itu?

    Salam ukhuwah
    (follow juga untuk mempererat silaturahim)

    BalasHapus
  7. @Khutbah Jumat 2011: sama2 Bang, Kalo menurut saya lebih ringan, wlaopun menggunakan javascript.js, tapi dibandingkan dengan 3 widget misalnya di sidebar, jelas lebih ringan dengan menu tab view ini bang??
    Itu menurut pengalaman saya.

    BalasHapus
  8. keren sob postingannya terima kasih ya atas infonya

    BalasHapus
  9. @[ACF]Admin : OK, Sama2 mas :)

    BalasHapus
  10. tapi biasanya kalo pake ini loading jadi agak lama deh juga pengunjung jarang yg tau

    BalasHapus
  11. @ipenk: Ya tergantung juga c sob, bisa bandingkan sendiri, misal ada 3widget di sidebar, dgn 3 widget yg di taruh di tab view, kebanyakan javascript jg kadang memang bikin lemot,
    memang semua ada kelebihan dan kekurangannya, jd, tinggal kita memakainya sesuai dengan kebutuhan saja.

    BalasHapus
  12. bisa di modifikasi ga mas? misalnya di tambah scroll bar tiap TAB nya.... ane nyoba mlorot terus isinya... hehehehehe

    BalasHapus
  13. sebenarnya apa sih fungsi dari tab itu, karena saya masih awam...
    terima kasih

    BalasHapus
  14. @aandfx: Maaf neh telat balesnya, baru tw amalah :D
    Tentu bisa mas, tiggal diedit aja kodenya

    @Day: kan usdah dijelaskan di atas sob?? TabView itu, widget berfungsi untuk menghemat halaman, khususnya di bagian Sidebar web/blog.

    BalasHapus
  15. ma ksih infonya gan...

    BalasHapus
  16. @Ikhsan: Sama2 masbro :)

    @Revhaforever: Kode widget yg mana sob mksudnya??

    BalasHapus
  17. ha ha ha... akhirnya gw bisa buatin tab untuk blog ane... irit layout blog... mksh gan wt infonya... jdi pengen gw pamerin ma ente gan... kunjungi balik n lihat karya ente gan di blog ane...

    BalasHapus
  18. ini dia artikel yang saya cari.....
    makasih info nya teman...
    aku mw coba dulu......
    salam kenal....
    makasih... :D

    BalasHapus
  19. @Asmara Susanto: sip bro
    @OZENK ARTICLES: Ok, salam kenal sob :)
    @Samuel Harlas Yoga W: Sip, silahakan masbro, salam kenal balik :)

    BalasHapus
  20. nambah tab, gimana caranya bos???
    udah tak coba, kok buat 5 tab gak bisa

    BalasHapus
  21. mantap gan,
    izin praktek dulu..
    moga aja kali ini erhasil...

    BalasHapus
  22. trims atas sharingnya... sangat berguna bagi newbie spt saya... ditunggu posting2 selanjutnya...

    BalasHapus
  23. ma ksih sob tipsnya, izin pake kodenya ya...!?

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers