Designhjälp för din blogg

Ändra utseende på sökrutan och sökrutetexten

Kategori: Övrigt

1. Gå in i din Stilmall (Kugghjulet -> Design -> Redigera HTML -> Stilmall)


Längst ned i din stilmall lägger du in följande:

.sokknapp {
background:#ffffff url();
color:#666;
font-family:tahoma;
font-size:11px;
text-transform: uppercase;
border:1px solid;
height:30px;
width:40px;
}

.sokruta {
background:#ffffff url();
color:#666;
font-family:tahoma;
font-size:12px;
border:1px solid;
height:30px;
width:150px;
}

.sokrubrik {
font-size: 15px;
color: #fff;
margin: 0px; font-weight:normal;
font-family: 'Armata', sans-serif;
text-transform: uppercase;
}


2. Spara

3. Gå nu in i din HTLM-mall (Kugghjulet -> Design -> Redigera HTML (Startsida))

4. Ta bort <section id="search">Här står det lite olika beroende på vilken design du använder dig av</section>

5. Klista in följande exakt på samma ställe:

<section id="search">
<div class="sokrubrik">Sök i bloggen</div>
<form action="http://www.google.se/search" name="search" method="get">
<input type="search" class="sokruta" name="q" value="" size="12" maxlength="64" />
<input type="hidden" name="sitesearch" value="{{ blog.url }}" />
<input type="submit" class="sokknapp" value="Sök" />
</form>
</section>


6.
Spara

7. Nu kan du gå in i din stilmall igen och ändra utseende på knappen genom att ändra i koderna som du skrev in i steg 1.

Här kommer lite hjälp med att ändra utseendet:

sokknapp {
background:#ffffff url(); <----- Ändra bakgrundsfärg på sökknappen
color:#666;  <----- Ändra textfärg på sökknappen
font-family:tahoma;
font-size:11px;
text-transform: uppercase;
border:1px solid;
height:30px; <----- Ändra höjd på sökknappen
width:40px; <----- Ändra längd på sökknappen
}

.sokruta {
background:#ffffff url(); <----- Ändra bakgrundsfärg i sökrutan
color:#666;
font-family:tahoma;
font-size:12px;
border:1px solid;
height:30px; <----- Ändra höjd på sökrutan
width:150px; <----- Ändra längd på sökrutan
}

.sokrubrik {
font-size: 15px; <----- Ändra storlek på texten "Sök i bloggen".
color: #fff; <----- Ändra färg på texten "Sök i bloggen".
font-weight:normal;
font-family: 'Armata', sans-serif; <----- Ändra typsnitt på texten "Sök i bloggen".
text-transform: uppercase; 
}



Hos blogghjalparn.blogg.se finner du textguider om HTML & CSS. Guiderna riktar sig till bloggare som vill ha hjälp med sin bloggdesign. Man kan själv läsa sig till hur man ska göra eller så kan man beställa sin egna design alternativt köpa en redan färdig design.

Copyright © 2017 Blogghjälparn

BLOGGHJÄLPARN


Senaste inläggen

Portaler & Listor
Webbdesign