Något som är ganska så vanligt på bloggar och communityn, är att man har sin sökruta i headern istället för i menyn.

Jag tänkte visa hur man på ett enkelt sätt kan flytta upp sökrutan så den hamnar var man vill i headern.

Om du tycker det är knepigt, så rekommenderar jag dig att kika på videoinstruktionen som du hittar här precis till höger.

Gör så här:

1. Gå in i din stilmall.



2. Lägg till följande kod längst ner i stilmallen och spara den sedan. Koden används för att postitionera sökrutan i din header.

3. Gå nu in i dina kodmallar.

4. Leta upp kodavsnittet som ser ut så här och radera det:

<div>Sök i bloggen</div>
<form action=”${AppUrl}index.bd?fa=search.do” name=”search” method=”post”>
<input type=”hidden” name=”bl_id” value=”${BlogID}” />
<input type=”text” name=”criteria” value=”" size=”12″ maxlength=”64″ />
<input type=”submit” value=”Sök” />
</form>

5. Leta nu upp kodavsnittet som ser ut så här:

<div id=”header”>
<h1><a href=”${BlogUrl}”>${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

6. Lägg till följande kod på raden under <h2>${BlogDescription}</h2>

7. Spara din kodmall och gå sedan in i din stilmall igen.

8. Klicka på förhandsgranska för att se var din sökruta har hamnat. Om den ligger fel i headern, så ändrar du det genom att ändra värdena i koden du la till längst ner i stilmallen i steg 2.

.sökruta{
postition: absolute;
top: 110px;
left: 820px;
}

Testa dig fram tills det att du har fått sökrutan där du vill. Sen är det bara att spara din stilmall och göra om punkt 3-6 i dina andra kodmallar.

Om du inte vill ha med själva rubriken där det står ”Sök i bloggen” så raderar du denna kod från koden du la till i steg 6: <div class=”navheader”>Sök i bloggen</div>

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.