Ett sätt att piffa upp sin bloggdesign och göra den lite mer lättnavigerad är att lägga in en flytande meny som hänger flyter uppe på allt och stannar kvar på samma plats även om man scrollar neråt.

Här kan du se ett exempel: Flytande meny

Att skapa en sådan meny är inte speciellt svårt, och det finns massor av sätt att modifiera och välja vad man vill ha för innehåll.

Jag kommer att visa hur man skapar en meny som ser ut precis som den i exemplet ovan, dvs med runda hörn. Sen så är det upp till dig själv att modifiera utseendet på rutan och likaså innehållet.

Gör så här:

1. Kopiera följande kod.


.floating-menu {
position:fixed;
background:#fff4c8;
border:1px solid #ffcc00;
width:150px;z-index:100;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 3px;
margin-top: 20px;
margin-left: 10px;
}

.floating-menu a, .floating-menu h3 {
display:block;
margin:0 0.5em;
}

2. Klistra in koden längst ner i din stilmall.

3. Om du vill ändra på utseendet så är det i stilmallen du skall ändra.
Det enda du inte kan ändra är position: fixed; men allt annat kan du ändra bäst du vill.

4. Kopiera följande kod:

<div class="floating-menu">
<h3>Flytande meny</h3>
<a href="http://www.designadinblogg.se/gratisdesign">Gratisdesign</a>
<a href="http://www.facebook.com/pages/Designa-Din-Blogg/187430627709">Facebook</a>
<a href="http://www.bloglovin.com/sv/blog/1812/-designa-din-blogg-/follow">Bloglovin</a>
<a href="http://www.designadinblogg.se/category/bloggdesign/blogg-esse/videoinstruktioner/">Videoinstruktioner</a>
<a href="http://www.designadinblogg.se/tjana-pengar-pa-din-blogg-lagg-in-reklam/">Tjäna pengar</a></div>

5. Gå in i dina kodmallar.

bloggdesign blogg.se

6. Klistra in koden precis nedanför <body>

7. Ändra nu länkarna till de länkar som du själv vill ha. Sen är det bara att spara allt och tycka att bloggen blev kanonsnygg.

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.