Tutorial Blogger | Tab Widget Vs Multi Tab Box Post

Tutorial Blogger | Tab Widget Vs Multi Tab Box Post. Konten Box tab atau tab view adalah cara yang bagus untuk memaksimalkan penggunaan layar real estat berharga di blog Anda.

Ada cukup banyak tutorial di luar sana yang menunjukkan cara membuat tab dengan CSS dan jQuery. Namun, sebagian besar dari mereka mengharuskan Anda untuk mengubah blog Anda kode template. Di atas semua itu Anda juga harus secara manual menambahkan isi dari setiap tab. 

Untungnya, dengan tutorial ini Anda tidak perlu pergi ke semua masalah itu. Semua harus Anda lakukan adalah menambahkan kode tabber kami ke widget HTML / Javascript. Setelah ditambahkan, maka akan mengubah widget yang ada Blogger blog ke dalam tab, otomatis!

Berikut adalah beberapa fitur dari kotak isi tab:

1. Mengakomodasi terbatas jumlah widget.
2. Menjaga penampilan asli widget tab .
3. Sepenuhnya widgetized untuk kemudahan instalasi dan penghapusan. Jika Anda tidak menyukai apa yang dilakukannya, cukup menghapus HTML / Javascript gadget.  

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'>
<p>
Get this <a href="http://cms.indotrading.biz/2012/10/tutorial-blogger-tab-widget-vs-multi.html" target="_blank">tabber widget</a></p>
</div>

Instalasi

1. Pergi ke Layout dan klik sebuah Tambahkan Gadget .
2. Pilih HTML / Javascript widget.
3. Biarkan kosong kotak judul.
4. Copy kode berikut dan tempel di dalam kotak konten.
5. Posisikan gadget HTML / Javascript di atas gadget yang ingin Anda tabify.
6. • Baris kode 34 adalah untuk memuat library jQuery. Hapus baris ini jika Anda sudah dimuat di tempat lain di blog Anda. Petunjuk: Jika blog Anda memiliki slider, pengendara sepeda atau sesuatu dengan efek fading berjalan, kemungkinan besar hal ini didukung oleh jQuery.
   • Tentukan nilai dari  tabCount sejalan 39. Nilai ini sama dengan jumlah widget (di bawah widget tabber) bahwa Anda ingin berubah menjadi tab.
   • Kotak warna default latar belakang putih (# fff). Anda dapat mengubahnya dalam baris kode 25. Terapkan warna yang sama untuk latar belakang tab aktif dan batas bawah (di baris 19 dan 20).
7. Klik Simpan dan melihat blog Anda.

Pasca-instalasi

• Pastikan Anda setiap judul widget yang ingin Anda tabify. Tabber tidak akan bekerja dengan baik tanpa judul widget.
• Mengurangi lebar tab sehingga semua tab masuk ke dalam satu baris. Hal ini dapat dicapai dengan menggunakan judul widget singkat.
• Anda mungkin perlu untuk mengurangi lebar dari widget tabified untuk menyesuaikan mereka ke dalam kotak.
• Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" error di IE untuk beberapa non-desainer template. Jika itu yang terjadi, widget ini bukan untuk Anda: (
• Nikmati!
• Berlangganan gratis
• Dapatkan artikel terbaru kami dikirim ke kotak masuk email Anda.