RAMME RUNDT BLOGGEN
Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:
border: 2px solid #000000;
Hvor legger jeg den inn?
Du legger den inn under #wrapper og #footer. Ca. sånn her skal det se ut:
(Du kan også legge koden inn under #header, hvis du vil ha en ramme rundt headeren også).
#wrapper {
background-color: #FFFFFF;
border: 2px solid #000000;
}
#footer {
background-color: #FFFFFF;
border: 2px solid #000000;
Istedet for solid, som betyr helstrukken linje rundt bloggen, kan du putte inn disse:
dotted
dashed
solid
double
groove
ridge
inset
outset
border-bottom = ramme eller strek kun på bunnen
bordet-top = ramme eller strek kun på toppen
border-left / border-right = ramme eller strek kun til venstre eller høyre
For å få tykkere ramme, så kan du for eks. skrive 3px og hvis rammen skal være mindre, så skriver du bare 1px.
MENYEN FRA HØYRE TIL VENSTRE
Hvordan gjør jeg dette?
Du limer bare inn koden i Stilsettet.
Koden du skal legge inn er:
}
#main {
float: right;
}
#side {
float: left;
Hvor legger jeg den inn?
Du legger den inn under #wrapper.
Slik skal det se ut sånn ca:
#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;
Da er det bare å lagre!
MIDTSTILLE BLOGGEN DIN
Koden du skal bruke:
margin-left: auto;
margin-right: auto;
Hvor legger jeg den inn?
Den skal du legge inn under #header, #wrapper og #footer.
Slik skal det se ut:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
SMAL BLOGG
Koden:
width: 700px;
Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.
Slik skal det sånn ca. se ut da:
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 700px;
}
Nå er det bare å endre tallet til hva du måtte ønske. 600px eller kanskje 800px. Du bestemmer. Jo mindre tallet foran "px" er, jo smalere blir bloggen. Og omvendt.
ENDRE "X ANTALL KOMMENTARER"
Vil du at for eksempel at det skal stå "2 søte små" istedenfor "2 kommentarer", så gjør du dette:
Design -> Rediger -> Maler
- Trykk på CTRL + F tasten på tastaturet.
- Søk på: <a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>
- Det du skal gjøre er å endre litt på koden, sånn at den blir cirka slik:
<a href="${EntryPermaLink}#comment">${EntryCommentCount} søte små</a>
MINDRE/STØRRE SKRIFT PÅ INNLEGGENE DINE
Koden du skal bruke:
font-size: 10pt;
Hvor skal jeg legge den inn?
Den skal du legge inn under wrapper.
Slik for eks. skal det se ut:
#wrapper{
background-color: #FFFFFF;
font-size: 10pt;
}
Det eneste du trenger å gjøre nå er å endre tall, vil du ha større skrift skriver du for eksempel 12, eller hvis du vil ha mindre skrift, så skriver du f.eks 8 eller mindre.
ENKEL KNAPPEMENY
Først må du gå inn på "design" så "rediger" og så "stilsett". Helt nederst i stilsettet ditt setter du inn denne koden:
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}
.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
</style>
Nå må du lagre stilsettet (selv om det ikke vises noe på forhåndsvisningen, ikke vær redd). For at disse skal vises må du nå gå inn i "maler". Finn så denne linja:
<div id="wrapper" class="yui-gc">
(Hvis du ikke finner den, trykk CTRL + F, og søk på den)
Rett under den linja setter du inn denne koden:
<div class="mattblacktabs">
<ul>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
<li><a href="URL-ADRESSE">Valgfritt</a></li>
</ul>
</div>
Pass på at dette alltid står på slutten av koden:
</ul>
</div>
Så må du redigere litt i koden. La oss si at du vil ha en "knapp" som heter f.eks FORSIDEN og som linker til fremsiden din. Da må du skrive inn url-adressen til fremsiden din, der jeg har skrevet URL-ADRESSE, og skrive FORSIDEN der det står Valgfritt. for eksempel slik:
<li><a href="http://www.kunmin.blogg.no/">FORSIDEN</a></li>
PENERE KNAPPEMENY
Først må du gå inn på "design" så "rediger" og så "stilsett". Helt nederst i stilsettet ditt setter du inn denne koden:
<div id="wrapper" class="yui-gc">
(Hvis du ikke finner den, trykk CTRL + F, og søk på den)
Under den legger du denne koden:
<div class="underlinemenu">
<ul>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
<li><a href="BLOGGURL">VALGFRITT</a></li>
</ul>
</div>
Lagre denne koden i alle kategoriene! Så er det bare å lagre !
(Det er mange som ikke skjønner hvordan de linker til noen plass på knappene, det har jeg nå prøvd å utdype i dette avsnittet.)
HVORDAN LINKER JEG TIL ET ELLER FLERE INNLEGG PÅ BLOGGEN MIN, TIL EN AV MENYKNAPPENE?
Url-adressen finner du ved å gå inn på din blogg (OBS: som besøkende!!!) og klikke deg dit du vil linke knappen til. Da ser du url-adressen i søkelinja. La oss si at du vil ha en knapp som står "Konkurranser" på, der ALLE konkurransene du har, ligger inne på. Altså FLERE INNLEGG PÅ KNAPPEN. Da MÅ du ha en KATEGORI som heter Konkurranser. Når du har laget kategorien, går du på framsiden av bloggen din og trykker på kategorien "konkurranser". Når siden er ferdig opplastet der, kan du trygt og godt kopiere URL-linken oppe i søkefeltet, og lime den inn i koden. På denne måten får du da alle innleggene du lager i kategorien "konkurranser", inn på menyknappen. Hvis du BARE vil ha 1 INNLEGG PÅ KNAPPEN, går du rett inn på innlegget og kopierer linken til bare innlegget, og legger inn i koden.
Når det er gjort er det bare å lagre. Så må du sette inn alt dette i alle malene. "Forsiden" er den du har satt det inn i nå, men du må gjøre det i Innlegg, Kategori og Arkiv også. Du kommer inn på disse malene ved å gå til "Maler" og velge rett over koderuten. Da er det bare å lagre alt.
MELLOMROM
Har du lyst på mellomrom mellom header og innhold? Da går du inn på "design", "rediger" også "stilsett". Sånn ca sånn skal det se ut:
#header {
background-color: #FFFFFF;
background-image: url(''HER ER URL'EN TIL DIN HEADER);
height: 480px;
background-repeat: repeat;
margin: 0px 0px 10px 0px; <--- HER!
Sett inn denne koden margin: 0px 0px 10px 0px; slik som jeg har gjort over. Vil du ha større eller mindre mellomrom, bare endrer du der det står 10px, til f.eks 5px eller 20px.
FARGE BAK OVERSKRIFT
Lyst på farge bak overskriftene dine?
Det eneste du trenger å sette inn er: h2 { background-color: #FFCCCC; }
selvfølgelig der det står #FFCCCC; setter du inn den fargekoden du har lyst på.
Det skal ca se sånn her ut:
a { color: #000000}
a:link { color: #000000}
a:visited { color: #000000}
a:active { color: #000000}
h1, h2, h3, h4, h5 { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; }
#header h1, #header p { display:none }
#header { color: #000000; }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }
h2 { background-color: #FFCCCC; } <---- HER !
h1, h2, h3, h4, h5 { font-family: Trebuchet MS, Helvetica, sans-serif; }
^alt dette ligger UNDER #footer
FÅ BORT NAVNET OVER HEADEREN
Koden:
#header h1, #header p { display:none }
Hvor skal jeg legge den inn?
Den skal du legge nesten helt nederst i stilsettet ditt.
Slik skal det ca se ut;
#header { color: #FFFFFF; }
#header h1, #header p { display:none }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #FFFFFF; }
FÅ BORT LINKEN (BLOGG.NO) UNDER HEADEREN DIN
Slik gjør du det:
Design -> Rediger -> Maler.
CTRL + F. Søk på denne linjen:
<div class="breadcrumbs"><a href="http://blogg.no/">blogg.no</a> » ${BlogTitle}</div>
Fjern hele den linjen.
Etter du har tatt bort den, så skal du lagre malen, og da skal linken under headeren være borte.
RAMME RUNDT HVERT INNLEGG
Koden:
.entry {
border: 1px solid #708090;
background: #FFFFFF;
text-align: center;
}
Du skal nemlig legge koden der #footer { slutter, altså nedenfor tegnet: }
FÅ BORT RAMMEN RUNDT PROFILBILDET DITT
Koden du skal bruke:
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
Forklaring:
200 = Der kan du velge hvor stort bildet skal være.
URL = Der skal du sette inn adressen for profilbildet ditt.
Hvor skal jeg legge inn koden?
Design -> Rediger -> Maler.
Søk (CTRL + F) på "profile".
Slik skal det ca. se ut:
<div id="profile" class="clearfix">
<div>
<a href="${ProfileUrl}" title="${ProfileName}">
<img style="float: left; border: 0;" src="URL-ADRESSEN TIL BILDET DITT" height="200">
</a>
</div>
FJERNE "SISTE KOMMENTARER", "AKIV"...
Du må først gå til maler (Design -> Rediger -> Maler).
Når du har gjort det så søker du på f.eks. 'siste kommentarer'. Da skal du finne dette fram i maler:
<h3>Siste kommentarer</h>
<ul>
<tag:commentlist global="true" limit="10" sort="desc">
<li>${CommentAuthorLinkIf} om ${CommentArticleLink}</li>
</tag:commentlist>
</ul>
</div>
---
Dette skal du fjerne rett og slett. Det samme gjør du med 'Arkiv', 'Kategorier' osv. Du fjerner de du vil.
Etter det så trykker du på Lagre Malen, og da skal de være borte.
BAKGRUNN SOM STÅR "FAST"
Koden: background-attachment:fixed;
Hvor skal jeg legge den?
For at bakgrunnen din skal stå fast, legg den under #wrapper {, men hvis du ønsker at headeren din skal sitte fast, legger du den under #header {
NY FARGE NÅR DU LEGGER MUSEPEKEREN OVER LINKER
Vil du ha ny farge på linker når du holder musa over?
Sånn ser det ut nå:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #000000;}
a:active {color: #000000;}
Den eneste koden du skal endre på, er "a:hover". Slik at det ser sånn ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #FFFFFF;}
a:active {color: #000000;}
Du kan jo selvfølgelig ha andre farger, det er bare å sette inn en annen fargekode!
MELLOMROM MELLOM BOKSTAVENE NÅR DU LEGGER MUSEPEKEREN OVER LINKEN
Alt du trenger å gjøre er å legge inn denne koden:
a:hover {letter-spacing:2px}
Sånn at det ser ca sånn her ut:
a:link {color: #000000;}
a:visited {color: #000000;}
a:hover {letter-spacing:2px}
a:active {color: #000000;}
Der det står 2px kan du endre til f.eks 1px eller 5px. Dette bestemmer hvor stort mellomrommet mellom hver bokstav da skal være.
