Membuat Widget Multi Halaman/TabView

cara membuat widget tab view
Dari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari multi halaman/multi tab tersebut.

Yup! Membuat Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari blog/web tersebut.

Selain itu,pengunjung tidak merasa lelah menaikan maupun menurunkan scrollbar hanya untuk sekedar menari status dari blog tersebut.

Nah! kesempatan kali ini,akan membahas tentang widget multi tab tersebut.
Sebenarnya artikel ini sudah di publikasikan oleh Mas Herman di artikelnya ’Menambahkan Widget Tab View Pada Blog’.

Pelajaran Blog tanpa mengurangi etika blogging,akan menjabarkannya lagi.
Sebenarnya sangat sederhana dalam membuat widget bertab-tab ini,untuk yang belum tahu cara membuatnya,anda bisa ikuti lagkah berikut:



Cara Membuat Multi Halaman

Pergilah ke Dashboard,lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan kode berikut:

<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 style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">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 ANDA TAMPILKAN PADA TAB 1
</div>
</div>

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

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

<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Untuk kode yang berwarna hijau, ubahlah dan gantilah sesuai keinginan anda,sedangkan kode yang berwarna merah,hanya sebuah penjelasan dari masing-masing kode.

Sekarang tinggal menyisipkan kode-kode html yang ingin anda letakkan pada masing-masing tab.
Anda bisa meletakkan seperti,kode Shout,Recent Comment,Blogroll dll.
Semoga berhasil ya..

Oh ya..Special..makasih buat mas Herman :D

(Sumber : http://pelajaran-blog.blogspot.com)

19 komentar:

  1. wah.... yapzz... kolom multitab emang keren mas.... hehehe... kita jadi hemat space di blog.... wkwkwkk.... visit back ya bro

    BalasHapus
  2. byan & MASTERgoMASTER : terima ksih telah berkunjung + comment.

    BalasHapus
  3. thank's sob..infonya, oh ya kupu-kupunya udah saya pasang...mantap

    BalasHapus
  4. benar sekali, selain menghemat tempat juga tampak rapi blognya.

    BalasHapus
  5. rada ribet buatnya tapi lihat hasilnya bagus, mesti senang.
    makasih tutorialnya.

    BalasHapus
  6. thanks banget atas tutor nya, mantappp meen

    BalasHapus
  7. http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif

    BalasHapus
  8. wew.. keren.. tpi bisa lebih dari 3 kan?

    BalasHapus
  9. thanks bos.....
    infonya bermanfaat banget.....
    oh ya,,,saya sbg muslimin turut prihatin dgn berkembangnya situs2 yg menjelek2an islam.....
    NAUDZUBILLAH

    BalasHapus
  10. trus kalo mau diberi scroll gmana?
    kodenya apa?
    trus naruhnya dmana?

    mohon balasan ke blog saya....

    BalasHapus
  11. ASS. MAS INI SAYA ADA TUGAS MATERI MEMBUAT BLOG SAYA INGIN BLOG SAYA. JADI BERBEDA DENGAN YANG LAIN.... TERUS SAYA INGIN MODEL TEPLATES KAYAK PUNYAK MAS... ITU BAGAI MNA N AMBIL DIMANA .....SITUS INI SANGAN MEMBANTU TUGAS D SEKOLAH SAYA MAS. MAKASI N KOMEN BALIK YA MAS...EEEEE IYA RUMAH PEAN MANAH AKU AJARONO...PLIS

    BalasHapus
  12. MAS HUBUNGI AKU DI BLOG Q YAA. SAMPEAN LIHAT BLOG KU BAGAI MANA N KURANG APA.....DI WIGDEGRAF.CO.CC

    BalasHapus
  13. follw baik http://wawan-friends.blogspot.com/

    BalasHapus
  14. salam, saya sudah berulangkali membuat ini dan tidak bisa menyesuaikan ukuran kotak bordernya agar sama dengan ukuran side bar blog saya ,,,mohon di jelaskan silahkan liat di sini http://bungoislam.blogspot.com/

    BalasHapus
  15. blogwalking. Visit and follow my blog at http://syarif73.blogspot.com/. Blogmu keren abis

    BalasHapus
  16. maksudnya gmn tu masukkan kode winged html yg anda inginkan

    BalasHapus
  17. ok...membantu...ada kritik kie mas...warna tulisan posting buat ane pusing gan...tangkyu

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.