dan tepat dibawah sana tambahkan kode berikut

<br /> <div class="tabber"> <br /> <b:section class="tabbertab" id="tab1" maxwidgets="1"><br /> <b:section class="tabbertab" id="tab2" maxwidgets="1"><br /> <b:section class="tabbertab" id="tab3" maxwidgets="1"><br /> </b:section></b:section></b:section></div>


Kode diatas telah ditambahkan 3 tab, jika Anda ingin lebih banyak tab tinggal di tambah seperti kode diatas yaitu mengubah id untuk tab4 dan seterusnya karena bagian ID harus unik. Sekarang kita perlu tambahkan beberapa kode CSS untuk struktur dan gaya tab dan kemudian salin kode CSS berikut dan paste di template anda.
<br /> /* start tab styles */<br /> .tabberlive{<br /> margin:0;<br /> padding:5px;<br /> clear:both;<br /> background:$tbbxbgcolor;<br /> border:1px solid $tbbxbrcolor;<br /> }<br /> .tabbernav {<br /> margin:0;<br /> padding: 3px 0;<br /> border-bottom: 1px solid $tbbxbrcolor;<br /> font-family:Arial,Helvetica,sans-serif;<br /> font-size:12px;<br /> font-weight:bold;<br /> }<br /> .tabbernav li {<br /> list-style:none;<br /> margin:0;<br /> display:inline;<br /> }<br /> .tabbernav li a {<br /> padding:3px 0.5em;<br /> margin-right:1px;<br /> border:1px solid $tbbxbrcolor;<br /> border-bottom:none;<br /> background:$tbbxcolor2;<br /> text-decoration:none;<br /> color:$tbbxcolor1;<br /> }<br /> .tabbernav li a:hover {<br /> color:$tbbxcolor2;<br /> background:$tbbxcolor1;<br /> border-color:$tbbxbrcolor;<br /> text-decoration:none;<br /> }<br /> .tabbernav li.tabberactive a,<br /> .tabbernav li.tabberactive a:hover {<br /> background:$tbbxcolor1;<br /> color:$tbbxcolor2;<br /> border-bottom: 1px solid $tbbxcolor1;<br /> }<br /> .tabberlive .tabbertab {<br /> padding:5px;<br /> border:1px solid $tbbxbrcolor;<br /> border-top:0;<br /> background:$tbbxcolor1;<br /> }<br /> .tabberlive .tabbertab h2,<br /> .tabberlive .tabbertabhide {<br /> display:none;<br /> }<br /> .tabbertab .widget-content ul{<br /> list-style:none;<br /> margin:0 0 10px 0;<br /> padding:0;<br /> }<br /> .tabbertab .widget-content li {<br /> border-bottom:1px solid $tbbxbrcolor;<br /> margin:0 5px;<br /> padding:2px 0 5px 0;<br /> }<br /> /* end tab styles */<br />
Kode CSS diatas adalah kode 4 variable dengan nama tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 sehingga kita dapat dengan mudah mengubah warna dari tab kotak isi dari dalam tab warna font dan lebar dari kotak tab dengan tinggi dan lebar #sidebar-wrapper dapat kita atur sesuai dengan keinginan kita. Sekarang kita tambahkan kode terakhir untuk mendefinisikan variabel salin dan sisipkan kode berikut ini di bagian atas template Anda dengan seluruh definisi variable
<br /> <variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"><br /> <variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"><br /> <variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"><br /> <variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa"><br /> </variable></variable></variable></variable>
Sekarang simpan template Anda dan masuk ke tab elemen seperti gambar berikut ini.