Cara membuat multi tab

Multi tab ini berisi beberapa konten yang bisa kita isi apa saja seperti video, gambar, slide foto, daftar isi, daftar link, dll. Dengan menggunakan multitab ini, kita dapat menghemat tempat yang ada pada halaman depan blog kita. Silahkan anda bisa lihat contoh bentuk multi tab yang ada dibawah ini, disitu terdapat tiga konten : Multi Tab 1, Multi Tab 2, dan Multi Tab 3. Tapi anda bisa menambah tab sesuai kebutuhan dan disesuaikan lebar sidebar template anda tentunya.

TUTORIAL BLOG

• Cara menambah tombol feed pada label / kategori
• Cara mengubah Tag Heading untuk optimasi SEO pada blog
• Cara membuat menu tooltip
• Cara membuat code color picker interaktif
• Cara membuat tab menu Accordion
• Cara membuat gambar memutar
• Cara agar blog cepat diakses dengan HP
• Cara mengganti forum komentar blogger dengan Disqus
• Cara mengganti forum Komentar Blogger dengan IntenseDebate
• 5 Tampilan Dinamis dari blogger
• Cara menambah gadget pada Header
• Cara submit sitemap blog
• Cara memberi Meta Tag pada blog
• Cara memberi meta tag pada setiap posting
• Cara memasukkan Blog ke Facebook
• Cara membuat Read More otomatis
• Cara membuat Tooltip
• Cara membuat slide dengan efek marquee
• Cara membuat efek membesar pada gambar
• Cara membuat gambar melayang
• Cara membuat efek transparan pada gambar
• Cara membuat daftar isi menggunakan efek marquee
• Cara membuat daftar isi dengan drop down
• Cara Membuat Link Dalam Satu Halaman
• Cara membuat background warna gradasi
• Cara membuat tombol scroll "To Top"
• Cara pasang tombol share
• Cara mencari kode HTML
• Cara membuat Blog menjadi Dofollow
• Cara membuat textarea dengan tombol "select all"
• Cara membuat effek scroll pada Titel Bar
• Cara membuat tanggal otomatis update
• Cara Membuat Pop-up Window
• Cara Membuat Navigasi Halaman
• Cara Membuat Subscribe email pada blog
• Cara membuat efek shadow pada kotak dan gambar
• Cara Membuat Tabel (Tahap 2)
• Cara membuat List pada daftar
• Cara pasang Iklan diatas postingan
• Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel
• Cara membuat artikel berhubungan
• Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog
• Cara Menambahkan Efek Teks pada Cursor Mouse
• Cara buat kotak Pencarian
• Cara buat Menu navigasi Drop-Down Horisontal
• Cara Membuat Label Animasi "blogumulus"
• Cara membuat Tag Cloud
• Cara Pasang Radio Online
• Cara Membuat label di blog
• Cara membuat Slider
• Cara membuat slideshow
• Cara Membuat variasi Font pada Teks
• Cara Buat Kotak atau Teks Area
• Cara membuat Scroll Box
• Cara Membuat Tabel (Tahap 1)
• Cara membuat Link Terbuka di halaman Baru
• Cara Menambah Gadget diatas Header
• Cara Buat Sitemap / Peta Situs
• Cara buat tabel kode warna
• Cara Membuat Teks Berjalan ( Marquee )
• Cara Membuat Refresh Otomatis pada Blog
• Cara Membuat Rounded Corner
• Cara membuat Text-Shadow
• Cara Memasang Background Gambar pada postingan
• Cara membuat daftar isi otomatis
• Cara Menambah Widget Jam pada Blog
• Cara Membuat Read more
• Cara Menghilangkan Navbar Pada blog
• Cara Membuat Navbar Auto-Hide
• Cara Membuat Forum Login
• Cara Membuat Anti Copy Paste
• Cara Membuat pesan selamat datang
• Cara Membuat Animasi Status Loading
• Cara Membuat Text Area blok Otomatis

CARA BUAT WEB

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Tak perlu khawatir kalau anda merasa sangat pemula dan belum tahu atau mengerti tentang bahasa programer. Disini saya jabarkan bagaimana Cara buat web dari mulai Cara dapat domain gratis, Cara dapat hosting gratis, Cara seting domain gratis dihosting gratis, Cara dapat template gratis, dan Cara Upload Template gratis.

GAMBAR

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); function tabberObj(argsObj) { var arg; this.div = null; this.classMain = "tabber"; this.classMainLive = "tabberlive"; this.classTab = "tabbertab"; this.classTabDefault = "tabbertabdefault"; this.classNav = "tabbernav"; this.classTabHide = "tabbertabhide"; this.classNavActive = "tabberactive"; this.titleElements = ['h2','h3','h4','h5','h6']; this.titleElementsStripHTML = true; this.removeTitle = true; this.addLinkId = false; this.linkIdFormat = '<tabberid>nav<tabnumberone>'; for (arg in argsObj) { this[arg] = argsObj[arg]; } this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); this.tabs = new Array(); if (this.div) { this.init(this.div); this.div = null; } } tabberObj.prototype.init = function(e) { var childNodes, i, i2, t, defaultTab=0, DOM_ul, DOM_li, DOM_a, aId, headingElement; if (!document.getElementsByTagName) { return false; } if (e.id) { this.id = e.id; } this.tabs.length = 0; childNodes = e.childNodes; for(i=0; i < childNodes.length; i++) { if(childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length-1; } } } DOM_ul = document.createElement("ul"); DOM_ul.className = this.classNav; for (i=0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2=0; i2<this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) { t.headingText = headingElement.innerHTML; if (this.titleElementsStripHTML) { t.headingText.replace(/<br>/gi," "); t.headingText = t.headingText.replace(/<[^>]+>/g,""); } break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i+1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li); } e.insertBefore(DOM_ul, e.firstChild); e.className = e.className.replace(this.REclassMain, this.classMainLive); this.tabShow(defaultTab); if (typeof this.onLoad == 'function') { this.onLoad({tabber:this}); } return this; }; tabberObj.prototype.navClick = function(event) { var rVal, a, self, tabberIndex, onClickArgs; a = this; if (!a.tabber) { return false; } self = a.tabber; tabberIndex = a.tabberIndex; a.blur(); if (typeof self.onClick == 'function') { onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; /* IE uses a different way to access the event object */ if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; } } self.tabShow(tabberIndex); return false; }; tabberObj.prototype.tabHideAll = function() { var i; for (i = 0; i < this.tabs.length; i++) { this.tabHide(i); } }; tabberObj.prototype.tabHide = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } div = this.tabs[tabberIndex].div; if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide; } this.navClearActive(tabberIndex); return this; }; tabberObj.prototype.tabShow = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } this.tabHideAll(); div = this.tabs[tabberIndex].div; div.className = div.className.replace(this.REclassTabHide, ''); this.navSetActive(tabberIndex); if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({'tabber':this, 'index':tabberIndex}); } return this; }; tabberObj.prototype.navSetActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = this.classNavActive; return this; }; tabberObj.prototype.navClearActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = ''; return this; }; function tabberAutomatic(tabberArgs) { var tempObj, divs, i; if (!tabberArgs) { tabberArgs = {}; } tempObj = new tabberObj(tabberArgs); divs = document.getElementsByTagName("div"); for (i=0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); } } return this; } function tabberAutomaticOnLoad(tabberArgs) { var oldOnLoad; if (!tabberArgs) { tabberArgs = {}; } oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); }; } else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); }; } } /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == 'undefined') { tabberAutomaticOnLoad(); } else { if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions); } } //]]> </script> <style type='text/css'> .tabberlive{ margin:0; padding:5px; clear:both; background:#f8f8f8; border:1px solid #DDD; } .tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #ddd; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; margin-right:5px; display:inline; } .tabbernav li a { padding:3px 0.5em; margin-right:1px; border:1px solid #DDD; border-bottom:none; background:#6c6c6c; text-decoration:none; color:#ffffff; outline:none; } .tabbernav li a:hover { color:#6c6c6c; background:#ffffff; border:1px solid #DDD; text-decoration:none; outline:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { background:#ffffff; color:#6c6c6c; border-bottom: 1px solid #ffffff; outline:none; } .tabberlive .tabbertab { padding:5px; border:1px solid #DDD; border-top:0; background:#ffffff; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ list-style:none; margin:0 0 10px 0; padding:0; } .tabbertab .widget-content li { border-bottom:1px solid #ddd; margin:0 5px; padding:2px 0 5px 0; } </style> <style type="text/css"> div.scrolltutor { background-color:#FFFFFF; width:100%; height:300px; overflow:auto; } </style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

 3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class='tabber'>
<div class='tabbertab' id='tab1'>
<h2>MULTI TAB-1</h2>
<div class="scrolltutor">


AREA KONTEN TAB-1


</div>
</div>


<div class='tabbertab' id='tab2'>
<h2>MULTI TAB-2</h2>
<div class="scrolltutor">


AREA KONTEN TAB-2


</div>
</div>

<div class='tabbertab' id='tab3'>
<h2>MULTI TAB-3</h2>
<div class="scrolltutor">


AREA KONTEN TAB-3


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

Catatam :

Silahkan anda ganti tulisan berwarna merah dengan judul tab milik anda, dan warna biru area daftar, artikel, gambar, video, atau apa saja terserah anda.

5. Simpan.

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat multi tab" Diulas Oleh : Noercholis | Selasa, 07 Juni 2011 | 16.36 Description : Multi tab ini berisi beberapa konten yang bisa kita isi apa saja seperti video, gambar, slide foto, daftar isi, daftar link, dll. Dengan ... Label : gadget,Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 1000+ Dari 10 000+ Pengunjung.
Sampai saat ini baru ada : 10 komentar >>> Silahkan tambahkan komentar Anda...