Home » » Cara Mudah Tab Widget

Cara Mudah Tab Widget

Caranya:
1. Pergi ke Design> Page Elements dan klik Tambah Alat.
2. Pilih HTML / Javascript widget.
3. Kosongkan kotak tajuk.
4. Salin kod di bawah dan paste di dalam kotak kandungan.


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}
18html .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 <a href="http://easybloggertrick.blogspot.com/2012/03/how-to-tabbed-content-widget-for.html" target="_blank">tabber widget</a></p></div>

Selaras kod 36 adalah untuk memuatkan perpustakaan jQuery. Keluarkan baris ini jika korang sudah dimuatkan di tempat lain di blog anda. Petunjuk: Jika blog anda mempunyai penggelungsur, sepeda atau sesuatu dengan kesan pudar berjalan, kemungkinan ia powered by jQuery.

Nyatakan bilangan widget yang anda mahu untuk berubah menjadi tab dalam 41 baris.
Warna latar belakang kotak lalai adalah putih (# fff). Korang boleh menukar selaras kod 27. Menggunakan warna yang sama untuk latar belakang dan tab aktif dan sempadan bawah (di baris 21 dan 22).

5. Letakkan alat HTML / Javascript di atas alat yang korang ingin tab.

tabbed contents view elements 

6. Klik save dan view blog korang.

Sebelum install

Pastikan korang letak tajuk setiap widget yang anda mahu untuk tab. Tabber tidak akan berfungsi dengan betul tanpa tajuk widget.
Mengurangkan lebar tab supaya semua tab muat ke dalam barisan satu. Ini boleh dicapai dengan menggunakan tajuk widget pendek.
Korang mungkin perlu untuk mengurangkan lebar widget tabified ini sesuai untuk mereka ke dalam kotak.
Jangan lupa untuk menguji dalam Internet Explorer. Widget ini boleh menyebabkan "Operasi dihenti paksa" kesilapan dalam IE untuk beberapa template bukan pereka. Jika itulah kesnya, widget ini bukan untuk korang: (


Terima kasih kerana membaca Cara Mudah Tab Widget. Jika berguna, tolong kongsikan di media sosial.

« Previous
« Prev Post
Next »
Next Post »

Tips Berkaitan:



0 Komen:

Catat Ulasan