Cara Tambah Sebuah Tabbed Navigation Widget Untuk Blogger

The tabviews adalah elemen yang memungkinkan kita untuk kelompok dalam wadah berbagai gadget tunggal dan ini dapat dipilih melalui tab. 
Fungsi utamanya adalah untuk menghemat ruang pada blog untuk menghindari gadget tersebar dalam kategori yang sama sehingga Anda dapat mengelompokkan beberapa gadget menjadi satu. Ada beberapa metode untuk membuat tabviews, beberapa memerlukan jQuery, MooTools lainnya, atau script lain. 

Untuk menambahkan widget ini ke blog Anda, cukup ikuti langkah-langkah berikut: 

Langkah 1. Dari Anda Blogger Dashboard , pergi ke Template dan klik pada tombol Edit HTML 

Langkah 2. Memperluas gaya template, dengan mengklik panah ke samping sebelum <b:skin> ... </ B: skin> 

Langkah 3 Cari menggunakan CTRL + F untuk tag berikut.: 

 ]]> </ B: skin>

. Langkah 4 Tepat di atas itu, tambahkan kode berikut: 

 / * Tabview untuk Blogger
----------------------------------------------- * /
. Tabviewcont {
margin: 15px 0;
padding: 0;
clear: both;
}

. Tabviewnav {
margin: 0 0 0 14px;
padding: 3px 0; / * Jika Anda menggunakan perubahan Template Blogger 0 dengan 15px * /
font-size: 12px; / * Ukuran font dari teks di dalam tab * /
font-weight: bold;
}
. Tabviewnav li {
list-style: none;
margin: 0;
display: inline;
}
. Tabviewnav li a {
padding: 3px 6px;
margin-right: 1px;
background: # F6F6F6; / * Warna latar belakang dari tab * /
border-radius: 5px 5px 0 0;
-Moz-border-radius: 5px 5px 0 0;
-Webkit-border-radius: 5px 5px 0 0;
text-decoration: none;
color: # 222222;
}
. Tabviewnav li a: hover {
color: # 222222;
background: # ebebeb; / * Warna latar belakang dari tab pada mouseover * /
text-decoration: none;
}
. Tabviewnav li.tabviewactive a,
. Tabviewnav li.tabviewactive a: hover {
background: # ebebeb; / * Warna latar belakang dari aktif tab * /
color: # 222222;
}
. Tabviewcont. Tabviewtab {
padding: 5px;
border: 1px solid # eeeeee; / * Border sekitar wadah * /
background: # fff; / * Warna latar belakang dari gadget * /
}
. Tabviewcont. H2 tabviewtab,
. Tabviewcont. Tabviewtabhide {
display: none;
}
. Tabviewtab. Widget-konten ul {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}
. Tabviewtab. Widget-konten li {
border-bottom: 1px solid # ccc;
margin: 0 5px;
padding: 2px 5px 0 0;
}

. Langkah 5 Cari </ head> tag dan tepat di atas itu, paste script ini: 

 <script type='text/javascript'>
/ / Tabview untuk mengelompokkan gadget

/ / <! [CDATA [
document.write ('<style type="text/css"> tabview. {display: none;} <\ / style>'); fungsi tabviewObj (argsObj) {var di argsObj) {ini [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'); ini . tab = new Array (); if (this.div) {this.init (this.div); this.div = null}} tabviewObj.prototype.init = function (e) {var this.onLoad == 'function') {this.onLoad ({tabview: ini})}} return this; tabviewObj.prototype.navClick = function (event) {var rVal, seorang diri, tabviewIndex, onClickArgs, a = ini , jika (a.tabview!) {return false} diri = a.tabview, tabviewIndex = a.tabviewIndex, a.blur (); if (typeof false}} self.tabShow (tabviewIndex); return false}; tabviewObj.prototype.tabHideAll = function () {var div, jika {return false} div = this.tabs [tabviewIndex] div (this.tabs [tabviewIndex]!);. jika {div.className + = '' + ini (div.className.match (this.REclassTabHide)!) . classTabHide} this.navClearActive (tabviewIndex);} return this; tabviewObj.prototype.tabShow = function (tabviewIndex) {var div, jika {return (this.tabs [tabviewIndex]!)this.onTabDisplay == 'function') {this.onTabDisplay ({'tabview': ini, 'index': tabviewIndex})} return ini}, fungsi tabviewAutomatic (tabviewArgs) {var tempObj, divs, i; (! tabviewArgs) jika {tabviewArgs = {}} tempObj = newtabviewObj (tabviewArgs)}}} function ini kembali tabviewAutomaticOnLoad (tabviewArgs) {var oldOnLoad, jika (tabviewArgs!) {tabviewArgs = {}} oldOnLoad = window.onload, jika (typeof
/ /]]>
</ Script>

. Langkah 6 Terakhir, cari baris ini: 

 <div class='column-right-inner'>

Atau jika Anda menggunakan template lama dari Blogger, cari baris ini: 

 <div id='sidebar-wrapper'>

. Langkah 7 Paste di bawah salah satu dari dua baris, kode ini: 

 <div class='tabview'>
<b:section class='tabviewtab' id=' Tab1 'maxwidgets='1'/>
<b:section class='tabviewtab' id=' Tab2 'maxwidgets='1'/>
<b:section class='tabviewtab' id=' tab3 'maxwidgets='1'/>
</ Div>

Langkah 8. Simpan perubahan, dan pergi ke Layout dan di sana Anda akan melihat area baru untuk menambahkan gadget. 

Anda hanya perlu klik pada Tambah Gadget untuk menambahkan gadget ke tab yang sesuai, atau tarik gadget Anda sudah memiliki ke bagian itu. 

Jika Anda ingin menambahkan tab lebih, maka tambahkan saja sebelum terakhir </ div> baris seperti ini: 

 <b:section class='tabviewtab' id=' Tab4 'maxwidgets='1'/>

Perhatikan bahwa setiap baris yang Anda tambahkan harus memiliki ID berbeda, misalnya Tab5, tab6, dll. 

Anda dapat menambahkan beberapa tab, ulangi langkah terakhir dan juga ingat untuk mengubah nama ID. 

Ingat bahwa jika sidebar Anda terlalu sempit, maka Anda seharusnya tidak menaruh banyak tab, atau judul tab yang sangat panjang. 

Anda juga harus mencatat bahwa gadget ini tidak mempercepat kecepatan loading blog, hanya untuk gadget kelompok menjadi satu, bahkan, tergantung pada blog-mungkin memerlukan waktu untuk memuat dan lebar tabview.