Created (c) by Princexells Seyka (Princelling Saki)

Cara Termudah Pasang Tab View dengan JQu



Sebenarnya trik ini aku ambil dari template Blogger "Dark Orange" yang dipakai kawanku Vinn, Tab menunya sangat menarik dan pemasangannya pun terbilang cukup mudah.

Langsung deh aku eksekusi tuh template.

Ternyata template tersebut menggunakan script JQuery dari Google.

Pertama, masuk ke Tata Letak -> Edit HTML

Pasang script JQuery dibawah ini diatas </head>

<!-- jQuery Call -->




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>



<!-- End of jQuery Call -->
Jika kamu udah pernah memasang JQuery sebelumnya, maka lewati saja langkah diatas.

Kamu Copy lagi kode ini dan paste dibawah kode JQuery tadi



<script type="text/javascript">

var starttab=0;

var endtab=2;

var sidebarname="tabsidebar";


</script>

<script type="text/javascript" src="http://mangetsu.googlecode.com/files/blogger-tab-view.js"></script>
var starttab=0; dan var endtab=2; menunjukkan bahwa jumlah widget yang akan dijadikan tab berjumlah 3 (dari 0 ke 2

Copy kode CSS dibawah ini dan paste diatas ]]></b:skin>



/* 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;

}





Selanjutnya, cari lagi kode

<b:section id='sidebar1' preferred='yes'>

Gandi id='sidebar' menjadi id='tabsidebar'



Simpan Template

Secara otomatis, semua widget di sidebar akan ditampilkan dalam bentuk tab.

Kalau ada yang kurang jelas silahkan bertanya! Oh iya, sebelum ada yang komplain, perlu aku beritahukan bahwa tab baru muncul setelah loading blog selesai, jadi buat blog yang loadingnya amat sangat lama sekali, sebaiknya jangan pakai trik yang ini





Artikel Terkait Lainnya :

DAFTAR ISI BLOG
TRICK BLOG


Tidak ada komentar:

Posting Komentar

 

© Copyright JASA PEMBUATAN WEBSITE 2010 -2011 | Design by Andra Ghotic's Center | Published by Andra Templates | Powered by .