PHYLOPOP.com - Isi kotak tab atau tampilan tab adalah cara yang bagus untuk memaksimalkan penggunaan layar real estat berharga di blog Anda.
Ada cukup beberapa tutorial di luar sana yang menunjukkan cara membuat tab dengan CSS dan jQuery. Namun, sebagian dari mereka meminta Anda untuk mengubah blog Anda kode template. Selain itu Anda juga harus secara manual menambahkan isi setiap tab.
Untungnya, dengan tutorial ini Anda tidak harus pergi ke semua yang masalah. Yang harus Anda lakukan adalah menambahkan kode tabber kami ke dalam widget HTML / Javascript. Setelah ditambahkan, maka akan mengubah widget yang ada Blogger blog menjadi tab, secara otomatis!
Berikut adalah beberapa fitur dari kotak isi tab:
- Mengakomodasi terbatas jumlah widget.
- Menjaga penampilan asli widget tab '.
- Sepenuhnya widgetized untuk kemudahan instalasi dan penghapusan. Jika Anda tidak menyukai apa yang dilakukannya, cukup menghapus HTML / Javascript gadget.
Instalasi
- Pergi ke Layout dan klik Tambah Gadget A.
- Pilih HTML / Javascript widget.
- Biarkan kosong kotak judul.
- Copy kode berikut dan paste di dalam kotak isi.
01 | <style type="text/css"> |
02 | .tabber { |
03 | padding: 0px !important; |
04 | border: 0 solid #bbb !important; |
05 | } |
06 | .tabber h2 { |
07 | float: left; |
08 | margin: 0 1px 0 0; |
09 | font-size: 12px; |
10 | padding: 3px 5px; |
11 | border: 1px solid #bbb; |
12 | margin-bottom: -1px; /*--Pull tab down 1px--*/ |
13 | overflow: hidden; |
14 | position: relative; |
15 | background: #e0e0e0; |
16 | cursor:pointer; |
17 | } |
18 | html .tabber h2.active { |
19 | background: #fff; |
20 | border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/ |
21 | } |
22 | .tabber .widget-content { |
23 | border: 1px solid #bbb; |
24 | padding: 10px; |
25 | background: #fff; |
26 | clear:both; |
27 | margin:0; |
28 | } |
29 | .codewidget, #codeholder { |
30 | display:none; |
31 | } |
32 | </style> |
33 |
34 | <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> |
35 | <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script> |
36 | <script type="text/javascript"> |
37 | $(document).ready(function() { |
38 | $('#codeholder').bloggerTabber ({ |
39 | tabCount : 3 |
40 | }); |
41 | }); |
42 | </script> |
43 |
44 | <!-- to make sure the widget works, do not alter the code below --> |
45 | <div id='codeholder'><p>Get this <ahref="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div> |
- Kode baris 36 adalah untuk memuat perpustakaan 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 memudar berjalan, kemungkinan itu didukung oleh jQuery.
- Tentukan jumlah widget yang ingin Anda berubah menjadi tab sejalan 41.
- Kotak standar warna latar belakang putih (# fff). Anda dapat mengubahnya dalam baris kode 27. Terapkan warna yang sama untuk latar belakang tab aktif dan batas bawah (sesuai 21 dan 22).
- Posisi gadget HTML / Javascript di atas gadget yang ingin Anda tabify.
- Klik Simpan dan melihat blog Anda.
Setelah Instalasi
- Pastikan Anda judul widget masing-masing yang ingin Anda tabify. Tabber tidak akan berfungsi dengan baik tanpa judul widget.
- Kurangi lebar tab sehingga semua tab masuk ke dalam satu baris. Hal ini dapat dicapai dengan menggunakan judul widget pendek.
- Anda mungkin harus mengurangi lebar dari widget tabified untuk menempatkan mereka ke dalam kotak.
- Jangan lupa untuk menguji pada Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" kesalahan di IE untuk beberapa non-desainer template. Jika itu yang terjadi, widget ini bukan untuk Anda :(
Menikmati!
Posting Komentar