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; 
}


Kommentarer
madde

25 November 2015 kl. 12:22

Hej!
Jag har lite problem med min blogg. Har ganska lätt för HTML, men kan verkligen inte hitta problemet här.
Går man in på min bloggs startsida ser allt helt normalt ut, men väljer man en kategori, månad från arkivet eller ett inlägg så hoppar hedern till vänster och menyn åker ner.
Går detta att åtgärda, och isånafall hur?

Supertacksam för hjälp!


Malin Sahlén

11 December 2015 kl. 20:23

Hej!

Jag undrar ifall ni möjligen har gjort ett inlägg med förklaring hur man gör en drop down header? Jag skulle vilja ha en drop down header. Vill ha en likadan som www.kenzas.se har och om du inte gjort ett sådant inlägg skulle jag bli jätteglad om du vill visa hur man gör en. Tack på förhand!

Kärlek


emiden

11 September 2016 kl. 13:19

emil


Kommentera här:













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