Special Tab View Untuk Widget di Blogger Baru dan Blogger Lama

Ini adalah Tab View atau Tab Content yang memang didesain secara khusus untuk widget di blogger atau blogspot. Sampeyan dapat menyimpan semua jenis widget yang tersedia tanpa kecuali. Semua widget seperti labels, archive, profile, recent posts hingga widget follower dapat dimasukkan dalam tab hingga halaman blog sedikit lebih simple karena 3 widget langsung terwadahi dalam sebuah tab. Tentang penampilan tab kita tak perlu kuwatir karena tab untuk widget ini telah dipermak sedemikian rupa hingga tak akan terlihat mengecewakan ketika dipajang di blog. Desain tab telah dilengkapi dengan beberapa background image hingga membuat tampilannya terlihat cantik.

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

Cara I: Menyimpan Kode CSS dan Javascript

.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/AVvXsEg-xhP8jYnuK9WQ7qoNq6D39XuROVIh8Y2FHLLEqDT4T6-voi5ZLpNfoYY68u4vs58XGHnIIFGKygp8u_RLPpb1X3ldEqNcVpgmyhOsfUIkg8-ZCD_Z0adrVE59YMGZ57EMRlOry8ZaAe4/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>

Cara II: Menyimpan Kode CSS dan Javascript

]]></b:skin>

<link href='https://sites.google.com/site/gubhugreyot/.../...Widget.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/gubhugreyot/.../...Widget.js' type='text/javascript'></script>

Jika ingin menggunakan cara ke-2 maka silahkan download link kode CSS dan javascriptnya melalui link di bawah ini:

xHTML

xHTML ini disimpan di bagian di antara tag pembuka <body> dan tag penutup </body> atau 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 kode 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 kode locked='false'. Rubah kodenya menjadi locked='true'.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «