Special Tab View Untuk Widget Di Blogger Lama Dan Baru

Memang tab viw ini di desain husus hanya untuk di blogger saja, kalo sobat semua bingung dengan judul postingan di atas sobat bisa lihat gambar di bawah ini....

Gimana sob setelah melihat gambarnya tertarik kan? Selain tampilannya indah kita juga dapat menghemat tata letak di blog kita karna dengan menggunakan kode ini kita dapat menyimpan tiga gadget dalam satu kolom benar gak? ia benar liat aja gambar lagi kalo gak percaya tampilannyapun gak bakalan nyeselin deh agar lebih jelas lagi yuk praktek sob.....
Karena ada perbedaan dalam penggunaan tab di blogger lama (template tata-letak) dan di blogger baru (new blogger templates), maka kita akan coba bahas 2 cara yang harus dipergunakan di ke-2 template tersebut.

kode CSS dan Javascript

Penyimpanan kode CSS dan javascript di kedua template tak ada bedanya. Kode CSS disimpan di atas kode ]]></b:skin> dan javascript diletakkan di bawah kode tersebut. Jika ingin kode lebih rapi dan praktis, silahkan upload kode CSS dan javascriptnya di file hosting. Link kode CSS dan javascript diletakkan di bawah kode ]]></b:skin>.

1. Cara I penyimpanan kode CSS dan JavaScript (ada kode ]]></b:skin> di tengah kode di bawah artinya kode yang berada di atasnya simpan di atas kode tersebut dan kode yang di bawahnya simpan di bawah kode tersebut)

.tabberlive .tabbertabhide{display:none;}
.tabber{padding:0;}
.tabberlive{margin:1px 0 10px 0;}
ul.tabbernav{margin:0;padding:3px 0;border-bottom:1px solid #555;}
ul.tabbernav li{list-style:none;margin:0;display:inline;}
ul.tabbernav li a{padding:3px 0.5em;border-bottom:none;text-decoration:none;}
ul.tabbernav li a:link{color:#80AA00;background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/blueGradV100H2.png) top left repeat-x;border-top:1px solid #000;border-left:1px solid #111;border-right:1px solid #555;border-bottom:1px solid #555;font-weight:bold;text-transform:uppercase;font-size:11px;}
ul.tabbernav li a:hover{color:#ccff33;background:url(https://sites.google.com/site/gubhugreyot/bgvert/bgRedGradV55H5.gif) top repeat;}
ul.tabbernav li.tabberactive a{color:#ccff33;background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradOrangeBlackV45H2.gif) bottom left repeat-x;border-top:1px solid #111;border-left:1px solid #111;border-right:1px solid #111;border-bottom:1px solid #333;text-decoration:none;}
ul.tabbernav li.tabberactive a:hover{color:#ccff33;background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradOrangeBlackV45H2.gif) top left repeat-x;border-left:1px solid #111;border-right:1px solid #111;border-top:1px solid #111;}
.tabberlive .tabbertab{background:#07070e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjAwNH9eeWxGCrug7Q-AO-I5_rLysX18JQjS_NzeXiQJM9cj9F95Swifw3ewYzECrkbWt8gtyLsiuPLUYQmJbR-bCzczw0PRw4DNZT0f-sJ-KutHymibfo626J19ezeeDiICsNGp6Y8ZI/s400/blacktoblue.gif) bottom repeat-x;padding:5px 0px;border-top:0px;border-left:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555;}
.tabberlive .tabbertab h2{display:none;color:#fff;}
.tabberlive .tabbertab h3{display:none;}
.tabbertab{margin:0px;padding:0px;}
.tabbertab ul{margin:2px 0 2px 2px;padding: 0;list-style-type:none;}
.tabbertab li{margin:0;padding: 0 0 5px 22px;background: #363E43 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/diamondRedV12H12.gif) 4px 4px no-repeat;overflow: hidden;}

]]></b:skin>

<script type="text/javascript">
//<![CDATA[
//bgsGR_TabberWidget.js
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};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);};}}
if (typeof tabberOptions == 'undefined') {tabberAutomaticOnLoad();} else {if (!tabberOptions['manualStartup']) {tabberAutomaticOnLoad(tabberOptions);}}
//]]>
</script>

1. Cara II penyimpanan kode CSS dan JavaScript

Sobat cuma tinggal simpan kode di bawah ini di bawah kode ]]></b:skin>

<link href='https://sites.google.com/site/buswebhosting/javascript-b-u-s/theant-budiana.blogspot.comTabberWidget.css' rel='stylesheet' type='text/css'/>

<script src='https://sites.google.com/site/buswebhosting/javascript-b-u-s/theant-budiana.blogspit.comTabberWidget.js' type='text/javascript'/>

Setelah itu simpan kode di bawah ini di antara kode <body> dengan </body> yang lebih tepatnya di sidebar.

<div class='tabber'>

<div class='tabbertab'>
<b:section class='sidebarA' id='sidebarA' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/>
</div> 

<div class='tabbertab'>
<b:section class='sidebarB' id='sidebarB' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/> 
</div> 

<div class='tabbertab'>
<b:section class='sidebarC' id='sidebarC' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/> 
</div>

</div>

TEMPLATE LAMA (template tata letak)

Setelah login dan membuka halaman edit HTMl, carilah kode:
<b:section class='sidebar' id='sidebar'

Biasanya di atas dan bawah kode tersebut akan terdapat kode seperti berikut (tak semua blog sama!):

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML12' locked='false' title='Cursor Cinta CSS' type='HTML'/>
<b:widget id='CustomSearch1' locked='false' title='Search here' type='CustomSearch'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
</div>

Buat menjadi seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML12' locked='false' title='Cursor Cinta CSS' type='HTML'/>
<b:widget id='CustomSearch1' locked='false' title='Search here' type='CustomSearch'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>

<div class='tabber'>

<div class='tabbertab'>
<b:section class='sidebarA' id='sidebarA' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/>
</div> 

<div class='tabbertab'>
<b:section class='sidebarB' id='sidebarB' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/> 
</div> 

<div class='tabbertab'>
<b:section class='sidebarC' id='sidebarC' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/> 
</div>

</div>

</div>

TEMPLATE BARU (new blogger template)

Cari kode :
<div class='column-right-outer'>

di bawah kode ini terdapat beberapa kode lain seperti di bawah :

 <div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='1'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>

Buat kode menjadi seperti di bawah ini :

 <div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='1'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>

<div class='tabber'>

<div class='tabbertab'>
<b:section class='sidebarA' id='sidebarA' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/>
</div> 

<div class='tabbertab'>
<b:section class='sidebarB' id='sidebarB' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/> 
</div> 

<div class='tabbertab'>
<b:section class='sidebarC' id='sidebarC' maxwidgets='1' preferred='no'/>
<div style='clear:both;'/> 
</div>

</div>

Setelah semua kode (kode CSS, javascript dan xHTML) tersimpan, buka PAGE ELEMENTS atau Elemen Laman dan lanjutkan dengan menambahkan widget. Lihat hasilnya dengan membuka blog.

Keterangan/Catatan:

• Jika hanya ingin memindahkan widget yang sudah ada ke dalam tab, sampeyan tinggal drag elemen widget di "Elemen Laman" ke dalam tab.
• Untuk membuat widget baru di tab lakukan KLIK pada element Add A Gadget (Tambah Gadget) yang terdapat di tab pada "Elemen Laman".
• Setelah penyimpanan periksa kode HTML tab. Akan terdapat kodelocked='false'. Rubah kodenya menjadi locked='true'.
• 
  

Selamat mencoba, dan jangan lupa untuk berkomentar...