Meny under header

Framgangsmåte:

1. Gå inn på Avansert design > Forsiden. Gå ned til der div-tagen til headeren slutter (</div>)  og lim inn denne koden:

<div id=”menyboks” class=”meny”>
<ul>
 <li><a href=”http://www.dinblogg.no”>&nbsp;Forsiden</a></li>
 <li><a href=”http://www.dinblogg.no”>Om meg</a></li>
 <li><a href=”http://www.dinblogg.no”>Videoer</a></li>
 <li><a href=”http://www.dinblogg.no”>Kontakt</a></li>
 <li><a href=”http://www.dinblogg.no”>Hvorfor Meg</a></li>
 <li><a href=”http://www.dinblogg.no”>Outfits</a></li>
</ul>
</div>

(PS! Bytt ut “http://www.dinblogg.no/” med lenkene til dine sider).

Gjør dette med innlegg, kategorier og arkiv hvis du vil ha det i alle sider på bloggen.
 

2. Lim inn koden nedenfor øverst eller nederst i stilsettet ditt.

#menyboks{
height=”40px”;
background:#ffe3e9;
background-color: #FFBEF0;
width: 958px;
}
.meny ul{
list-style-type:none;
}
.meny li{
display:inline;
}
.meny a{
float:left;
width:137px;
text-decoration:none;
background-color: #FFBEF0;
font-weight:bold;
font-size:11px;
padding:10px;
border-right:1px solid #000000;
font-family:”Verdana”;
}
.meny a:hover{
background: #FFBEF0;
}

Fargene color kan endres, font-family (skrifttype) og annet kan endres som eget behov.

Oppdatert 27.07.2017

Enkel knappemeny

Først må du gå inn på “design”. Trykk på “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:

Trykk CTRL+F, og søk på denne linjen.

<div id=”wrapper” class=”yui-gc”>

 

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>

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://din.blogg.no/”>FORSIDEN</a></li>

GÅ inn som besøkende på din egen blogg og kopier søkelinjen til det innlegget du vil ha og lim det inn der det står URL-ADRESSE.

Endre “Send kommentar”

Gå til Design -> Rediger -> Maler -> Innlegg

Bla ned til du finner “Send kommentar” og bytt ut med det du vil skal stå der.

Tips: Trykk på Ctrl nederst på venstre side av tastaturet. Hold den inne og trykk på F. Så søker du på “Send kommentar”, så finner du det! 

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:
Trykk på Design -> Rediger -> Maler

– Trykk på CTRL + F tasten på tastaturet eller rull ned til du finner det.
– 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 ca slik:
<a href=”${EntryPermaLink}#comment”>${EntryCommentCount} søte små</a>

Mellomrom mellom header og innhold

Har du lyst på mellomrom mellom header og innhold? Da går du inn på “design”, “rediger” også “stilsett”. Det skal ca. se ut som dette:

#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.

Menyen fra høyre til venstre

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;

Forhåndsvis først, så ser du om du har gjort det riktig. Husk å lagre!

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 bare endre ved å skrive 3px og hvis rammen skal være mindre, så skriver du bare 1px. Farger endrer du også fra #000000; (svart) til en annen type farge.

Smal og midtstille bloggen

Smal blogg

Koden:
width: 610px;

Hvor legger jeg den inn?
Du legger den under #header, #wrapper og #footer.

Slik skal det se ut da:

#header {
background-color: #FFFFFF;
height: 236px;
margin-left: left;
margin-right: left;
width: 700px;
}
#wrapper {
background-color: #FFEFFC;
margin-left: left;
margin-right: left;
width: 700px;
}
#footer {
background-color: #FFFFFF;
margin-left: left;
margin-right: left;
width: 700px;
}

Nå er det bare å endre tallet til hva du måtte ønske. 600px eller kanskje 800px. Du bestemmer.


Midtstille bloggen

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;