Flytande meny på sidan av bloggen
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="https://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="https://www.designadinblogg.se/category/bloggdesign/blogg-esse/videoinstruktioner/">Videoinstruktioner</a> <a href="https://www.designadinblogg.se/tjana-pengar-pa-din-blogg-lagg-in-reklam/">Tjäna pengar</a></div>
5. Gå in i dina kodmallar.
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.