Posts Subscribe to this blogComments

Tuesday, December 13, 2011

SPECIAL TAB VIEW UNTUK WIDGET DI BLOGGER LAMA DAN BLOGGER BARU

11:17 PM Posted by Unknown
Labels:
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>.
  • 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/AVvXsEjMi5Q1EAf9lFbPFEM2wEXalJI-JBj7zAbryhfTmknQe0-qbGBtra9BMr1D27kb6ExcYSqZiTJEBGpwmfux4mZbRc3J1aToPemZ1zDK1O5X5wRBZteBhO7yoGl0sF_1kGlTZ1DqrWUSlw4/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 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...
Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.

0 comments:

Comments
0 Comments
Facebook Comments Post by Blog Urang Sunda

Post a Comment

Subscribe to: Post Comments (Atom)

Sponsor BUS

Dapatkan juga sponsor untuk Blog anda dengan klik gambar di bawah, untuk mengetahui caranya KLIK DISINI. Kalo mau yang lebih tinggi penghasilannya KLIK DISINI Adsense Indonesia

Buat Blog

Alexa Rank

 

Info My Blog

cobi?
Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net
Google PageRank Checker Powered by MyPagerank.Net
SEO Stats powered by MyPagerank.Net
web log free

Recent Comment

| BLOG URANG SUNDA © 2009. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Brian Gardner | Back To Top |