mandag 5. juli 2010
1. Gå til Utforming
2.Gå til rediger HTML
[Last ned en kopi av malen i tilfelle noe skulle gå skeis ]
3. Kopier denne koden:
4. Paste denne koden(den over her) rett etter body CSS som vil se slik ut:
5. Kopier denne koden (tilpass den til dine behov. # erstattes med webadresse, Link1-2-3 osv med teksten du vil ha i fanene.):
6. Paste den overnevnte koden inn rett før koden under her:
7. Ferdig, du kan få andre fane design her.
Du kan endre farger/legge til rammer osv osv i tabs kode delen som du pastet inn under Body css. Her er mulighetne kun begrenset av fantasien (eller kunskapen) din. Prøv deg fram :-)
To eksempler i drift:
http://minlillebloggverden.blogspot.com/
http://lykkeloppis.blogspot.com/
2.Gå til rediger HTML
[Last ned en kopi av malen i tilfelle noe skulle gå skeis ]
3. Kopier denne koden:
#tabsB { float:left; width:100%; background:#F4F4F4; font-size:93%; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url("http://sites.google.com/site/hackbit/tableftB.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url("http://sites.google.com/site/hackbit/tabrightB.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; }
4. Paste denne koden(den over her) rett etter body CSS som vil se slik ut:
body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
5. Kopier denne koden (tilpass den til dine behov. # erstattes med webadresse, Link1-2-3 osv med teksten du vil ha i fanene.):
<div id="tabsB"> <ul> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div>
6. Paste den overnevnte koden inn rett før koden under her:
<div id='crosscol-wrapper' style='text-align:center'>
7. Ferdig, du kan få andre fane design her.
Du kan endre farger/legge til rammer osv osv i tabs kode delen som du pastet inn under Body css. Her er mulighetne kun begrenset av fantasien (eller kunskapen) din. Prøv deg fram :-)
To eksempler i drift:
http://minlillebloggverden.blogspot.com/
http://lykkeloppis.blogspot.com/
Etiketter:
Faner
|
0
kommentarer
Denne artikkelen er en guide til hvordan du kan du legge til faner i de nye malene til blogger.
Det er veldig enkelt
<ul>
<li><a href="http://test.com">test</a></li>
<li><a href="http://eksempel.com" >Eksempel</a></li>
</ul>
Vær oppmerksom på at mellom ul kodene kan du legge til så mange <li> (linker) som du vil.
Tilpass denne koden som du ønsker, og deretter lim den inn i widget-delen.
Lagre widget og nyt fanene.
Senere kommer en guide til hvordan lage mer avanserte faner, dette er for viderekommende i html/css men her er mulighetene uendelige.
- Åpne http://draft.blogger.com/home
- Gå til layout delen og legg til "HTML / JavaScript" rett under "Blog Header"
- Legg til denne koden i widgeten.
<ul>
<li><a href="http://test.com">test</a></li>
<li><a href="http://eksempel.com" >Eksempel</a></li>
</ul>
Vær oppmerksom på at mellom ul kodene kan du legge til så mange <li> (linker) som du vil.
Tilpass denne koden som du ønsker, og deretter lim den inn i widget-delen.
Lagre widget og nyt fanene.
Senere kommer en guide til hvordan lage mer avanserte faner, dette er for viderekommende i html/css men her er mulighetene uendelige.
Etiketter:
Faner
|
0
kommentarer
Abonner på:
Innlegg (Atom)