Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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(http://3.bp.blogspot.com/_550XeJhg_o8/S4FYZSAGmZI/AAAAAAAAAO4/_akxKT_6QV8/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 «


8 komentar:

  1. thanks mas atas tutorialnya. Blog ku hampir semuanya menggunakan tutorial mas

    BalasHapus
  2. waduh waduhhhhhhhhhh setelah sekian lama aq mencari tak taunya ada di gubuk reyot semua,,,weleh welehhhhhhhhhh makasih banyak kang.salam kenal dari aq,oh iya,aq ijin copas untuk suatu saat,tenang aja aq gak lupa kok cantumin alamat ini di postinganq,heheehee,makasih kang

    BalasHapus
  3. sssaaaaallllllllllllllllluuuuuuuuuuutttttttttttt dengan penampilan dan isi blog nyaaaaaa

    BalasHapus
  4. Aduh gan ane dah terapin semua tutorial di atas tpi yang muncul cuman angka dgn susunan
    . 1
    . 2
    . 3

    mohon penjelasannya kang..

    BalasHapus
  5. cara nya mengganti warna nya itu gimana >>//???
    mohon dijelaskan..

    http://lbukhori.blogspot.com

    BalasHapus
  6. keren, ga ada bosennya menjelajah di blog gubhugreyot, tutornya mantabz2.

    BalasHapus
  7. KEREEEN !!! kok bisa gini sih kang ?
    ajarin dong :D

    BalasHapus

 
GR | Edited by | gubhug reyot