Cara Menambah Element Halaman Atau Kolom Full Widget Pada Sidebar

Cara Menambahkan Elemen Halaman Atau Kolom Full Widgets Pada Sidebar. Untuk anda yang menginginkan untuk menambahkan elemen halaman atau kolom dengan full widget pada sidebar template blog, Bisa dengan mudah anda lakukan dengan membaca serta menyimak di artikel yang saya buat ini.



Menambah Element halaman atau kolom dengan full widget pada sidebar blog, hanya cukup dengan menambahkan beberapa tambahan seperti CSS, XHTML dan JavaScript saja, dan mengikuti beberapa langkah yang akan saya bahas di artike tentang Cara Menambah Element Halaman Atau Kolom Full Widget Pada Sidebar yang saya tulis ini.

Langsung saja, jika anda tertarik untuk menambah element halaman atau kolom full widget pada sinebar, bisa anda ikuti beberapa langkah dibawah ini,

Cara Menambah Element Halaman Atau Kolom Full Widget Pada Sidebar

1. Masuk ke Dasbor Blog anda
2. Pilih Template -> Edit HTML
3. Cari kode </head> (gunakan Ctrl+F untuk memudahkan pencarian)
4. Letakkan kode dibawah ini tepat sebelum kode </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview-v2.js.js' type='text/javascript'/>

5. Selanjutnya cari kode <div id='sidebar-wrapper'> 
6. Letakkan kode dibawah ini tepat dibawah kode <div id='sidebar-wrapper'>

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

7. Sekarang tambahkan kode CSS berikut diatas ]]></b:skin>

/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#F2F2F2;
border:1px solid $tbbxbrcolor;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
}
.tabbernav {
margin:0px;
padding: 5px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:7px 0.5em;
margin-right:4px;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:7px;
border-top:0;
background:$tbbxcolor1;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */

Dalam kode CSS diatas terdapat 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 jadi anda akan mudah mengganti warna tab konten langsung pada dashboard anda.

8. Selanjutnya tambahkan juga kode dibawah ini pada bagian atas template variable definitions

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

9. Terakhir Simpan Template.
10. Selesai, dan lihat hasilnya...


Semoga dengan yang saya share artikel tentang Cara Menambah Element Halaman Atau Kolom Full Widget Pada Sidebar, ini bisa berguna dan bermanfaat untuk anda, Selamat Mencoba.!