Buat Tab View di blog mudah dan Menarik :Jika Anda mencari dari Google Anda akan menemukan banyak cara untuk membuat tab Sidebar tapi Sulit untuk menerapkan di blogger, karena kita harus memodifikasi HTML atau XML di Sidebar Bagian. Trik ini sangat mudah hanya meletakkan CSS dan JS. JS akan otomatis membuat struktur untuk tab.
Mudah untuk menginstal.
- Tidak perlu edit html di bagian Sidebar.
- Otomatis tempat widget Anda handpicked di dalam tab.
- Kebebasan untuk mengatur apa yang tinggal dari widget tab.
- Widget biasanya diedit dari bagian Elemen Halaman.
Tempatkan Style CSSMU.
Gaya tab dapat dengan mudah diubah kapan saja hanya dengan menggunakan CSS, tapi ini bukan alasan utama untuk tutorial ini, Terserah anda untuk mengubah atau tidak, menggunakan keahlian Anda sendiri CSS. Kami telah membuat tata letak umum untuk itu, untuk menginstal tempatkan yang tepat kode berikut sebelum ]]></ b:>
/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
Install J-Query library
Script ini membutuhkan jQuery JavaScript library, jika Anda sudah memilikinya terinstal, Anda dapat mengabaikan langkah ini, jika Anda tidak hanya paste kode di bawah ini tepat sebelum </ head >.
<! - JQuery Call ->
< script src ='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type ='text/javascript' /> <Script src = 'tipe http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' text = / javascript '/>
<! -- End of jQuery Call --> <Panggil! - Akhir jQuery dari ->
Atifkan J-Query library
Ok sekarang Anda sudah memastikan bahwa Anda telah jQuery terinstal, anda perlu menginstal script yang akan melakukan eksekusi, tempatkan yang tepat kode berikut sebelum </ head >.
<script type= "text/javascript">
var starttab=0; var starttab = 0;
var endtab=2; endtab var = 2;
var sidebarname= "sidebar1" ; sidebarname var = "sidebar1";
</script> </ Script>
<script type= "text/javascript" src= "http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js" ></script> <script type= "text/javascript" src= "http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"> </ script>
Setelah melakukan kegiatan copas diatas Anda akan mendapatkan beberapa baris yang dapat disesuaikan, yaitu:
var starttab= 0 ; var starttab = 0;
var endtab= 2 ; endtab var = 2;
var sidebarname=” sidebar “; sidebarname var = "sidebar";
starttab adalah nomor awal untuk widget yang Anda pilih, itu mulai menghitung dari 0.. endtab adalah nomor Anda terakhir disertakan untuk widget sidebarname adalah di sidebar id Anda, umumnya hanya "sidebar".
Bagaimana??? mudah kan???. demikian tutorial mengenai Buat Tab View di blog mudah dan Menarik,, terimakasih