Många frågar hur man ska göra för att skapa egna små rutor antingen i menyn eller någon annanstans på sin blogg, och det är inte så knepigt, bara man vet hur man gör.

Så här kan det se ut som ett exempel (en tjuvkik på nya designen, om än väldigt liten tjuvkik):

Det finns två sätt man kan göra det hela på, nämligen genom att man använder sig av en bild uppe och nere, eller så använder man sig bara av rutor med färg.

Jag har använt mig av bilder, för att få runda hörn.

Dessa bilder har jag använt mig av då:

Övre bilden —–>

Nedre bilden —–>

Hur gör man då? Jo, så här:

1. Skapa dina bilder om du använder dig av sådana. Ladda upp dem på din blogg och spara adressen till dem.

2. Gå in under din stilmall.

Lägg till följande koder:

.topp{
background: url(adressen till din övre bild);
font-family: arial, verdana;
font-size: 11px;
color: #fff;
padding: 2px 0px 0px 10px;
height: 20px;
}
.mitten{
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #000000;
padding: 3px;
margin: 0px;
border-right: 2px solid #616d76;
border-left: 2px solid #616d76;
background: #FFFFFF;
}
.botten{
background: url(adressen till din nedre bild) no-repeat;
height: 10px;
margin: 0px;
}

3. Nu kan du ändra lite saker i dessa koder:

.topp{
background: url(adressen till din övre bild); <— Lägg till adressen till din övre bild
font-family: arial, verdana; <— Typsnittet på texten i rubriken
font-size: 11px; <— Storlek på texten
color: #fff; <— Färg på texten
padding: 2px 0px 0px 10px; <—- Avstånd till kanten
height: 20px; <—- Ange höjden på din bild
}
.mitten{
font-family: verdana, arial, sans-serif; <—- Typsnitt på texten i rutan
font-size: 10px; <—- Storlek på texten
color: #000000; <—- Färg på texten
padding: 3px; <—- Avstånd från kanten
margin: 0px;
border-right: 2px solid #616d76; <—- Ändra utseendet på kantlinjen till höger
border-left: 2px solid #616d76; <—- Ändra utseendet på kantlinjen till vänster
background: #FFFFFF; <—- Bakgrundsfärgen på mittenrutan
}
.botten{
background: url(adressen till din nedre bild) no-repeat; <—- Lägg till adressen till din nedre bild
height: 10px; <—- Ange höjden på din bild
margin: 0px;
}

Om du inte använder dig av bilder, utan bara vill använda dig av färger, så skall du ändra background: url(); till en färg istället: background: #cccccc; t ex. Detta gör du i så fall både på topp och botten.

Spara din stilmall!

4. Gå nu in i dina kodmallar.
bloggdesign designa din blogg ändra namn på länkar

5. Lägg in följande kod där du vill ha din ruta: 

<div class="topp">
Rubriken här
</div>
<div class="mitten">
Själva innehållet i rutan här
</div>
<div class="botten">
</div>

Nu har du din ruta på plats, och du kan nu lägga in den text som du vill ha. Jag har skrivit i koden du klistrade in var du ska skriva vilken text.

Exakt var du ska placera koden för rutorna, det måste du själva klura ut. Om du inte klarar det, då har du nog inte tillräcklig kunskap för att göra detta.

Om Lari

Lari Salminen har skrivit 877 inlägg.

Grundare av Designa Din Blogg. Jobbar heltid som brandman på Medelpads Räddningstjänstförbund och driver den här sidan på fritiden som en hobby.