Kada vam je dizajn bloga zasnovan na temi sa 2 kolone znate i sami koliko je stvari koje treba da idu u Sidebar i kada ih sve dodate sajt dobija mnogo na dužini što naravno nije praktično jer posetioci vašeg sajta moraju da skroluju stranicu kako bi došli do npr. Arhive. Dodavanjem tabova u sidebar organizovaćete prostor i svakako učiniti korisnicima sajt preglednijim.
INSTALACIJA TABOVA
Otvorite stranicu za izmenu HTML koda teme koja se nalazi na Design > Edit HTML. Pre nego što napravite bilo kakvu izmenu sačuvajte kopiju teme za slučaj nepredviđenih problema.
KORAK 1
U prvom koraku potrebno je da odgovarajući CSS dodate u temu, ukoliko koristite spoljni CSS možete CSS dodati u njega, time automatski ne morate praviti ovaj korak uputstva. Ukoliko vam je pak CSS na Bloggeru otvorite Design > Edit HTML u kodu pronađite kod ]]></b:skin> i odmah iznad njega dodajte sledeći kod.
[code language=”css”].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;
}[/code]
KORAK 2
Pošto ovaj princip tabova koristi jQuery skriptu morate kod za njeno učitavanje dodati u vaš HTML kod. Ukoliko ovu skriptu koristite već za nešto u okviru dizajna ne morate je ponovo učitavati., pogotovo ukoliko se radi o identičnoj verziji skripte, dupliranje iste bi uticalo na to da vam sajt ne radi na Internet Explorer browserima.
Pronađite opet kod ]]></b:skin> i odmah ispod njega dodajte sledeći kod.
Sada je potrebno da dodate skriptu koji će omogućiti prikazivanje tabova u vašem sidebaru. U kodu pronađite oznaku </head> i pre nje dodajte sledeći kod.
Po žleji i potrebi možete da napravite neke izmene u ovom delu koda:
var startab=0;prvi startni tab koji će se prikazivati u u tabovima
var endtab=2;poslednj tab koji će se prikazivati, ukoliko želite pokazivanje 4 taba promenite broj sa 2 na 3
var sidebarname=”sidebartab“;možete da date ime koje god želite samo vodite računa da se već nešto ne zove tako
[code language=”html”]<div id=’sidebar’>
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebartab";
</script>
<script type="text/javascript" src="http://files.oopsea.com/todor/js/tabbloggerforbeinsight-min.js"></script>[/code]
KORAK 4
Jedino što je preostalo kada je u pitanju prepravka HTML koda je da dodate gde želite da vam se tabovi prikazuju. Pronađite u vašoj temi kako vam se zove DIV sidebara … najčešće je sidebar ili sidebar-wrapper. Pokušajte prvo tako da ga locirate tražeći u kodu nešto nalik ovom <div id=’sidebar-wrapper’> ili <div id=’sidebar’>. Ukoliko ne pronađete možete da probate neki Developer tool koji radi inspekciju elemenata pa će vam pokazati sve potrebne informacije o Divu. Ukoliko koristite Firefox koji na standardnim verzijama nema integrisan Developer tool, možete instalirati odlični dodatak Firebugi pomoću njega naći sve potrebe informacije.
Kada ste locirali Sidebar u skladu sa tim gde želite da dodate tabove, dodajte sledeći kod <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>. vodeći računa da id=’sidebar’ bude unikatan i da ste isto tako nazvali sidebarname u KORAK 3.
PRIMER: Ukoliko želite da tabovi budu odmah na vrhu sidebara, možete kod dodati odmah na samom početku divizije kao što to izgleda u primeru.
Ukoliko ste sve prepravili, snimite temu i prebacite se na Page Elements. Dodajte gadget koje želite da se prikazuju i poređajte ih po redosledu koji želite. Ako ste podesili startni tab 0 i krajnji tab 2, prikazivaće vam se 3 gadgeta, preostali gadgeti će se prikazivati samostalno. Naravno možete povećati broj gadgeta povećavanjem broja endtab na reimo 3 i u tom slučaju u tabovima imaćete prva 4 gadgeta.
CSS tabova naravno možete menjati kako bi prilagodili izgled vašem dizajnu. Sačuvajte sve skripte i slike koje su korišćene u ovom primeru i prebacite na vaš hosting.
