Trykk på “Design” – “Rediger” – “Maler”.
Søk opp denne koden: <a href=”${EntryPermaLink}”>${EntryTitle}</a>
Så skal du se på denne biten:
<h2>
<a href=”${EntryPermaLink}”>${EntryTitle}</a>
</h2>
Det du skal gjøre, er å sette denne koden <div align=”center”> foran <h2> og denne koden </div> etter </h2>
Da skal det se sånn ut:
<div align=”center”>
<h2>
<a href=”${EntryPermaLink}”>${EntryTitle}</a>
</h2>
</div>
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.
En nokså vanskelig kode, det kan hende at du må finne ut av enkelte ting selv!
}
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 5px 10px;
background-color: #transparent;
color: #123456; /*Endre fargen på teksten her*/
text-decoration: bold;
font-family: Lucida Handwriting; /*Endre skrifttypen her*/
font-size: 15px; } /*Endre størrelsen på skriften her*/
#navbar li ul {
display: none;
width: 8,5em; /* Endre bredden på undermenyen her */
background-color: #FFFFFF;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 1;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #F9BAAA; /*Endre fargen på undermenyen*/
border-bottom: 1px solid #F9BAAA;
color: #000000; } /*Endre tekstfargen på undermenyen her*/
#navbar li li a:hover {
background-color: #; } /*Endre fargen når man holder musen over undermenyen*/
#navbar li{ float: left; }
#navbar{
margin-left: 0px;
}
#navbar {
padding: 5px;
height: 2em;
width: left;
margin: 0px;
text-align: left;
}
#navbar li {
float: left;
list-style: none;
width: 157px;
background-color: #FFFFFF;
}
#navbar li a {
padding: 5px;
display: block;
border-bottom: 2px solid #C4E0FF;
color: #000000;
text-decoration: none;
font-family: arial;
font-size: 15px;
line-height: 15px;
}
#navbar li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
text-align: left;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px dotted #D1D1C6;
color: #727272;
}
#navbar li li a:hover {
background-color: #D1D1C6;
}
#meny {
width: 950px;
margin-left: auto;
margin-right: auto;
}
(fargen og alt sånt har jeg funnet på selv)
Legg inn på: Stilsett/CSS
Også lagrer du. Ingenting vil skje.
Etterpå går du til Maler/HTML og limer inn denne koden:
<ul id=”navbar”>
<li><a href=”link til sida”>Kategori 1</a>
<ul>
<li><a href=”#”>Länk 1</a></li>
<li><a href=”#”>Länk 2</a></li>
<li><a href=”#”>Länk 3</a></li>
</ul>
</li>
<li><a href=”#”>Kategori 2</a>
<ul>
<li><a href=”#”>Länk 4</a></li>
</ul>
</li>
<li><a href=”#”>Länk 5</a></li>
<li><a href=”#”>Kategori 3</a>
<ul>
<li><a href=”#”>Länk 6</a></li>
<li><a href=”#”>Länk 7</a></li>
<li><a href=”#”>Länk 8</a></li>
<li><a href=”#”>Länk 9</a></li>
</ul>
</li>
</ul>
Så bytter du det ut med det du vil.
# = URL
Länk = Navnet/Teksten i drop-down
Kategori = “hovedskriften”
For å endre på størrelse, farger og slikt, må du gå til koden i Stilsettet og endre på den.
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”> 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
Du må gå inn på “design” – “Rediger” – “maler” og søke opp denne linja; CTRL+F:
<tag:entrylist limit=”1000″ maxchars=”200″>
Fjern maxchars=”200″, men husk at > fortsatt må være der. Gjør dette på kategori, innlegg og arkiv malene hvis du vil ha hele innlegg der.
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.
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!
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>
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.
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!
