Cara membuat multi tab | OOM RIO

Home » Cara membuat tab menu Accordion » multi tab » tab menu » Tutorial blog » Cara membuat multi tab

Tuesday, June 7, 2011

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 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.

Judul: Cara membuat multi tab; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Related Posts

0 comments:

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).

Subscribe to: Post Comments (Atom)

Link Exchange

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Silahkan copy kode baner dibawah ini, dan taruh di web atau blog anda :