Flikar på din blogg
Tänkte visa hur man får flikar på sin blogg. :P
# 1. Gå till din Stilmall.
Kopiera koden här under med Ctrl C
# 1. Gå till din Stilmall.
Kopiera koden här under med Ctrl C
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.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; /*Ändra till right om du vill ha flikarna till höger*/
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 */
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.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; /*Ändra till right om du vill ha flikarna till höger*/
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 */
}
# 2. Klistra in koden längst ner i din Stilmall
# 3. Tryck Spara.
# 4. Gå till din Kodmall och lägg följande kod precis under <div id="content">
# 2. Klistra in koden längst ner i din Stilmall
# 3. Tryck Spara.
# 4. Gå till din Kodmall och lägg följande kod precis under <div id="content">
<div class="mattblacktabs">
<ul>
<li><a href="adressen till sidan">Länk 1</a></li>
<li><a href="adressen till sidan">Länk 2</a></li>
<li><a href="adressen till sidan">Länk 3</a></li>
<li><a href="adressen till sidan">Länk 4</a></li>
<li><a href="adressen till sidan">Länk 5</a></li>
</ul>
</div>
# 5. Sen tryck Spara och se efter om det funkade.
Hur man ändrar länkar, färger och allt sånt där förväntar jag mig att ni redan vet hur man gör..
Lycka till! ;)
OBS! Ibland funkar det och ibland inte.
# 5. Sen tryck Spara och se efter om det funkade.
Hur man ändrar länkar, färger och allt sånt där förväntar jag mig att ni redan vet hur man gör..
Lycka till! ;)
OBS! Ibland funkar det och ibland inte.
2010-08-17 
15:03:06
Ram runt hela Bloggen.
Tänkte förklara enkelt hur man får en Ram runt hela sin blogg. Går snabbt.
1. Gå till din Stilmall
2. Tryck F3 och skriv i sökrutan "Wrapper"
Då ska du komma till #Wrapper {
Sen lägger du till: border: 2px solid black;
2px: Är storleken på ramen, Tjockleken på ramen finns från 1-7.
Solid: Är ramens utseende. Det finns att välja mellan Dotted, Dashed..m.m
Black: Är färgen på ramen. Går självklart ändra färg.
Lägg in ram koden nånstans, t.ex under Width.
( Jag brukar lägga den allra längst ner i Wrapp koden. )
Så, Förhandsgranska och kolla om det funkade, o sen tryck Spara! :)
1. Gå till din Stilmall
2. Tryck F3 och skriv i sökrutan "Wrapper"
Då ska du komma till #Wrapper {
Sen lägger du till: border: 2px solid black;
2px: Är storleken på ramen, Tjockleken på ramen finns från 1-7.
Solid: Är ramens utseende. Det finns att välja mellan Dotted, Dashed..m.m
Black: Är färgen på ramen. Går självklart ändra färg.
Lägg in ram koden nånstans, t.ex under Width.
( Jag brukar lägga den allra längst ner i Wrapp koden. )
Så, Förhandsgranska och kolla om det funkade, o sen tryck Spara! :)
Ikoner vid Meny länkarna (arkiv)
Nu ska jag försöka förklara för er hur man får ikoner (små bilder)
vid Arkiv, Kategori länkarna.
Det är egentligen inte så svårt, kanske lite för nybörjare men det gör inget.
Alla har ju varit nybörjare, eller hur?
...Det du ska börja med är att gå till din Kodmall.
...Tryck F3 så sökrutan kommer upp, så du enklare hittar.
...Skriv i sökrutan "Arkiv" så hittar den åt dig.
Nu när du är vid Arkiv, så ska du först leta efter en ikon bild du vill ha.
här är en bra sida med många ikoner --> http://icons.primail.ch/
När du valt en ikon så kopierar du adressen till den bilden
som t.ex " Http://Google.se/bilder/icecream.gif "
Spara bildens adress nånstans, som i WordPad eller anteckningar.
Nu ska du lägga in bildens adress i bildkoden.
(Du kanske redan vet hur man gör men endel kanske inte vet.)
Här är bildkoden: <img src="....">
Där punkterna är ska du sätta in bild adressen " Http://Google.se/bilder/icecream.gif ".
Så ska det sen se ut såhär: <img src="Http://Google.se/bilder/icecream.gif">
Sen så letar du efter <li>
( som finns precis under <tag:archivelist> )
Sätt " <img src="Http://Google.se/bilder/icecream.gif"> "
emellan <li>....<a href="${ArchiveLink}">
Så det ser ut såhär:
<li><img src="Http://Google.se/bilder/icecream.gif"><a href="${ArchiveLink}">
Nu är du klar! Nu är det bara att klicka spara och se om det funkade. :)
Vill du göra samma sak på Senaste inlägg, Kategorier m.m
så gör du exakt samma sak fast på "Senast inlägg" och "Kategorier" förstås.
Titel text!
Tänkte slänga in ett inlägg om hur du får en Titel text över Browsern och vid dina flikar på internet..
Ska försöka förklara så bra som det går, om inte..så försök tills det fastnar. :P
( Jag använder mig utav Mozilla firefox 3.6 )
Till att börja med, här är koden.
<script type="text/javascript">document.title=" ";</script>
1. Kopiera koden med Ctrl C och gå in på din Kodmall.. klistra in den UNDER <Body>
SÅHÄR SKA DET SE UT NU
2. Och där det står "Här ska titel texten vara!" DÄR skriver du in din text.
3. Sen är det bara trycka på Spara och kolla om det funkade, klart!
Ska försöka förklara så bra som det går, om inte..så försök tills det fastnar. :P
( Jag använder mig utav Mozilla firefox 3.6 )
Till att börja med, här är koden.
<script type="text/javascript">document.title=" ";</script>
1. Kopiera koden med Ctrl C och gå in på din Kodmall.. klistra in den UNDER <Body>
SÅHÄR SKA DET SE UT NU
2. Och där det står "Här ska titel texten vara!" DÄR skriver du in din text.
3. Sen är det bara trycka på Spara och kolla om det funkade, klart!
