Red Riding Hood Dropdown Menu

Koder till hur man kan bygga upp ens meny

Förlåt för segt svar, men jag glömde att skriva klart mitt svar (inlägget).
Min meny är inte så speciell egentligen. För den är väldigt enkelt uppbyggd. Alla koder finns enkelt att hitta på Designa din blogg (DDB) och google. Men eftersom jag fick förfrågan tänkte jag ge er lite koder/länkar till koder som kan hjälpa er på traven att göra en egen meny. (Detta är koderna som gäller blogg.se)
Ett tips ifall du ska bygga upp en ny design är att göra den på en underblogg.

Länk till Hur du flyttar upp din meny över headern

Kod för boxarna:
Jag skapat olika boxar i menyn med bilder, men det finns ett mycket enklare sätt. En enkel html kod, lägg först in denna kod under #side i din stilmall:

#box {
width: 212px;  <- Bredden på min meny
padding: 10px 10px 10px 10px;  <- Avstånd
background: #FFFFFF; <- Färg på bakgrunden
border: 1px solid #FF4A7D; <- Färg på ramen (om du inte vill ha ram, ta bort)
}

Om du vill ha runda hörn på din box (som jag har) lägg då till dessa koder. 5px styr hur runda hörn du vill. (högre tal ger rundare, och mindre tal mindre. Men det säger väl sig själv)

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}

Glöm inte att ta bort (background: #FFFFF;) under din #side eller helt enkelt byta #FFFFFF till transparent. Om du inte gör det kommer inte boxarna synas. Klicka spara och hoppa vidare till din kodmall.
Gå ner till <div id="side"> och där under lägger du in boxarna så du vill ha dom.

<div id="box">
INNEHÅLLET SOM DU VILL HA I DIN BOX </div><br />

Så om du t.ex. vill lägga senaste inlägg i en box så lägger du in (exempel från min kodmall) :
<div>
</div>
<div>
<div>Senaste</div>
<ul>
<tag:recentlist limit="15">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
</center>
</div>
<div>
</div>
<br/>

<div id="box">
<div class="navheader">Senaste</div>
<ul>
<tag:recentlist limit="15">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
</div><br />
<br/>
<br/> = enter, mellanrum neråt. Ju mer desto mer mellanrum.
Hur enkelt som helst. Nu är det bara att göra detta så du har allt i boxar. Glöm inte att ändra samma sak i inläggssidan, kategorisidan, arkivsidan också!

Kod för länkknappar:
Om du inte förstår vad jag menar med länkknappar är det de "knappar" jag har längst upp i min meny.
Om du bara vill lägga in en bild (t.ex min gif-bild) behöver du bara kopiera LÄNK TILL BILDEN-koden.

<a href="LÄNK TILL VART DEN SKA LEDA" target="_blank">
<img src="LÄNK TILL BILDEN">
</a>

Länk till Personlig text i menyn (DDB)
Efter att du har lagt in texten där du vill så får du fixa textens utseende genom html-koder. Detta kan du hitta genom google, DDB.

Länk till Ordna dina månader i ditt arkiv som du vill (DDB)

Länk till Hur du skapar en personlig meny (DDB)
Om du ska göra detta måste du vara JÄTTENOGA med vilka koder du raderar och var du lägger till det. För hela bloggdesignen kan bli konstig ifall du tar bort fel.


Det var lite hjälp för er som sökte efter de! Kanske inte så många koder som jag faktiskt skrev ut och förklarade, men som sagt: Google is your friend! Och i mitt fall så att DDB hjälpt mig 8 av 10 fall.

Är väldigt tacksam för kritik och eran åsikt. Ska jag fortsätta? Vill ni att jag ska förklara mer koder? Och till er som har fråger: fortsätt fråga. Jag svarar på alla jag kan. Ska göra mitt bästa att ge er läsare den förklaring ni vill ha! Det är underbart när jag faktiskt får respons på det jag skriver.


Scroll down to comment





RSS 2.0
Comments



Comment here:

Name:
Loyal reader?

Mail: (won't be published)

URL/Blog: (if you have one)

Comment:

Trackback