mandag 5. juli 2010

Faner (avansert)

22:49 | Lagt inn av Bloggerhjelpen | | Rediger innlegg
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:

#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: | 0 kommentarer

Enkle faner

22:18 | Lagt inn av Bloggerhjelpen | | Rediger innlegg
  Denne artikkelen er en guide til hvordan du kan du legge til faner i de nye malene til blogger.



Det er veldig enkelt

  1. Åpne http://draft.blogger.com/home
  2. Gå til layout delen og legg til "HTML / JavaScript" rett under "Blog Header"
  3. 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: | 0 kommentarer
torsdag 24. juni 2010

Søkefunksjon i Bloggen

00:20 | Lagt inn av Bloggerhjelpen | | Rediger innlegg
Søkefunksjoner i blogger er ofte lite pålitelig og søker kun på forsiden av bloggen din.
Denne lille og enkle koden er løsningen på det problemet:

Så enkelt er det:
1) Gå til Utforming>Legg til gadget
2) Velg html/javascript, som tittel kan du for eksempel skrive "søk", og kopier inn koden under her:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"> <input id="searchButton" value="Go" type="submit"></form>


3) For å endre teksten i søkeknappen endrer du teksten markert i rødt (Go) til hva som enn måtte passe seg.
0 kommentarer
tirsdag 23. februar 2010

Fjerne rammene rundt header

21:17 | Lagt inn av Bloggerhjelpen | | Rediger innlegg
Rammene rundt headeren passer noen ganger bare ikke inn. Heldigvis er det veldig lett å fjerne dem.



Gå til Utforming > Rediger Html. Ta en sikkerhetskopi av bloggen din.
Slett så de to markerte linjene som vist på bildet under.


Lagre så malen og da vil rammene rundt headeren være borte.

Tips: om du vil øke avstanden mellom headeren og bloggen må du endre følgene kode i
#header-wraper:

#header-wrapper {
width:990px;
margin:0 auto 10px; <------- Endre 10 px til 50px
}

50px kan økes eller senkes til det du selv synes blir fint på din blogg.
Etiketter: | 0 kommentarer
søndag 21. februar 2010

Hvordan lage 3 kolonner i blogger.

23:13 | Lagt inn av Bloggerhjelpen | | Rediger innlegg
Hvordan lage 3 kolonner i blogger?

Først må man lage bloggen bredere slik at det er plass til en tredje kolonne, personelig liker jeg å ha den 990px (pixler) bred, så personer som har lav oppløsning på skjermen slipper å scrolle sidelengs når de skal lese bloggen.
Denne bloggen har nå 200(venstre kolonne)+ 30(tomrom) +530(midterste kolonne)+ 30(tomrom) + 200( høyre kolonne)= 990 pixler bred.
Hvor bred du vil ha den enkelte kolonnen er opp til deg selv, så lenge det bli 990 totalt.




Denne guiden er for Minima template, andre templates kan ha avikende html koder en vist i eksempelet under men prinsippet er det samme.

Gå til Utforming og Rediger Html.
Ta sikkerhetskopi av bloggen din, kjekt å ha om noe skulle gå skeis.





Del 1:
Først må vi øke bredden på header plassen. Finn følgene kode og endre width:660px; til width:990px;

#header-wrapper {
width:660px; <--------- Endre til 990px
margin:0 auto 10px;
border:1px solid $bordercolor;
}



Finn så Outer/main/sidebar-wrapper (som vist under her) og endre de som anvist.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <--------- Endre til 990px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px; <----------Endre til 530px
margin-right: 30px; <--------- Legg til denne teksten
margin-left:30px; <--------- Legg til denne teksten
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px; <--------Endre til 200px
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Finn så #footer og endre som anvist:

/* Footer
----------------------------------------------- */
#footer {
width:660px; <-------- Endre til 990px
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Nå har vi endret størrelsene vi trenger for å legge til en ekstra kolonne.

Del 2:

Nå skal vi ligge inn den nye kolonnen. Legg inn følgene kode over #sidebar-wrapper som markert på bildet og endre #sidebar-wrapper til float: right;

#left-sidebar-wrapper { width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }




Nå må vi fortelle blogger at vi har lagt inn en ny kolonne og hvor denne skal ligge.
Scroll nesten helt ned og finn følgene felt:


Lim inn følgene kode der hvor det er markert på bildet ovenfor:


Nå kan du lagre bloggen din og nyte din nye blogg med 3 kolonner!
Etiketter: | 0 kommentarer
Abonner på: Innlegg (Atom)

Blog Archive

Followers

Labels

Totalt antall sidevisninger