Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Flytande meny på sidan av bloggen

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.

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.

Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

50 comments

  1. SvaraJessica

    Hej!
    Detta har ingen koppling till inlägget ovan men jag undrar hur man får till att lägga in “Nästa sida” på bloggen (som de flesta bloggar har, men inte min;P) så att besökare lätt kan komma vidare till äldre inlägg?


    1. Author
      SvaraLari

      Om du bloggar på blogg.se så går det inte att få till en sådan funktion. Då skall du istället blogga på wordpress eller blogger typ.

      1. Cornelia

        Hej!
        Men det ska väl gå att ha på blogg.se?
        Jag vet flera som bloggar på blogg.se som har en “tidigare inlägg”. Det har inte jag på kategorisidan… Hur får jag en sådan…?


      2. Author
        Lari

        Nej, det går inte att få det på framsidan… utan det är bara under kategorierna som man kan få det på blogg.se än så länge.

  2. SvaraSanna

    Hej!
    Skrev i kommentarsfältet till ditt inlägg “kontakta mig” men vet inte om du såg det, så skriver samma sak här.

    Har placerat två svarta boxar med länkar under min header, och skulle nu vilja att resten av raden även den blir svart i storlek med länkboxarna, alltså inte enbart 2 ensamma boxar till vänster utan att hela raden under headern ska bli svart.

    La först in en storleksanpassad svart smal bild i kodmallen som blev jättebra, förutom att eftersom den är storleksanpassad till hur bloggen ser ut på min skärm, blir den för kort/för lång om man kollar på en dator med större/mindre skärm.

    Finns det ett enklare sätt att gå tillväga här för att få hela menyraden svart och inte bara själva länkboxarna? Svara gärna i bloggen/mail om det finns en lösning!

    Enormt tack på förhand

    Sanna

      1. Sanna

        Har tyvärr inte dykt upp någon kommentar, men skulle verkligen uppskatta hjälp för detta.

      2. Strangerz

        Sanna:

        Byt ut denna kod:

        .mattblacktabs ul{
        margin: 0;
        padding: 0;
        padding-left: 0px; /*offset of tabs relative to browser left edge*/
        font: normal 10px arial;
        list-style-type: none;
        }
        

        till den koden jag gjorde här:

        .mattblacktabs ul{
        margin: 0;
        padding: 0;
        padding-left: 0px; /*offset of tabs relative to browser left edge*/
        font: normal 10px arial;
        list-style-type: none;
        width:100%;
        background:black;
        height:33px;
        }
        
  3. SvaraLinnea

    hej:)
    Jag fixade lite med min blogg och märkte nu att hela sidomenyn har försvunnit och jag vet INTE hur jag ska få tillbaka den 🙁

      1. Fredrika

        Hej, Jag har försökt leta mig fram men hittar verkligen inte hur man breddar bloggen! Snälla, snälla kan du hjälpa mig??

  4. SvaraEmelie

    Om man har laddat ner en “header” till sin blogg som har ändrat alla sina koder, hur gör man då för att få saker som t.ex klocka på sin blogg? Eftersom dom sakerna som du skriver att man ska leta efter inte finns 🙁

  5. Svarapaulina

    Hej hej,
    jag orkade inte hålla på att bygga en egen bloggdesign från grunden så jag valde en av gratisdesignerna på blogg.se, och tänkte då göra den lite mer personlig. 

    Men när jag valt en av designerna (dusty rose), så märkte jag att det blir så här: http://photosbypaulina.blogg.se/images/2011/namnls_181097135.png

    varför? 
    Jag hittar inte koden där man kan flytta på den. Jag har ändrat lite margin, align och sånt där för att kunna se skillnader men jag lyckas ändå inte få upp den. Please help?

    1. SvaraStranger

      Det finns massor av anledningar till detta. För det första så antar jag att du egentligen inte har så stor kunskap när det gäller att koda bloggar. Men det kan vara vad som helst. Det kan vara någonting ivägen (som inte syns). För mycket margin. Padding. Eller whatever. Lättare om man ser koden.

    2. SvaraStranger

      Okej, nu såg jag din källkod och jag kan direkt säga att du inte är vidare värst bra på att koda. Du säger till här:

      #side {
          margin-right:0;
          margin-top: 150px;
          padding: 0px 0px 0px;
          float: left;
          width: 259px;
      }
      

      …att den ska samtidigt vara till höger och vänster. Det går ju inte.

      Prova att ändra på “float:left;”.till “float:right;”.

  6. SvaraLena

    Är det inte bara att lägga till 
    position: fixed;
    I ‘side’ spalten istället (eller lägga till ‘fixed’ om man redan skulle ha position)? Eller är det något jag missat? D:

  7. SvaraS a n n a

    Har en fråga om designen, hur man ändrar en sak: 
    Har frågat på bloggen här:

    Du kan ju kolla, det är om kommentarsrutan, bakom kommentarsrutan, hur byter man färg :S hoppas ni, du seer detta

  8. SvaraJulia

    Om jag vill att menyn inte stannar då? Om jag vill att den scrollas upp tillsammans med resten av bloggen, hur gör jag då?

    1. SvaraStranger
      .floating-menu {
      position:absolute;
      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;
      }
      @media screen {
      body>.floating-menu {
      position:fixed;
      }
      }
      

      Klistra in i din stilmall. Html koden behöver du inte ändra.

      Prova med denna kod om du vill att menyn ska följa med om man skrollar.

      1. Julia

        Glömde visst att jag hade en gammal kommentar här och postade en ny längst ner, haha!

        Hur som helst, tyvärr fungerade inte koden du gav mig. Menyn sitter fortfarande still!

  9. SvaraVictoria Pettersson

    Hej! min blogg har blivit super konstig! (Inte pga dina koder mm) Men jag kan inte få in bilder på bloggen på datorn när jag skaffade blogg.se till min iphone.
    Behöver verkligen hjälp! Vore skit tacksam om du skulle kunna kontakta mig och försöka hjälpa!.

  10. SvaraSunny

    Hej Lari! Jag har en fråga som det vore awesome att få svar på! Jo, jag undrar hur man få såna här “länkar” på sin blogg, alltså såna som man håller musen på och så “fälls” det ner nånting där man t.ex kan välja kategori. Haha, jag är sämst på att förklara vad jag menar, men du har en sån funktion på din hemsida. Om man håller musen på “Bloggdesign” så fälls en sån grej ner. Skulle jättegärna vilja veta hur man gör! 🙂

    1. SvaraStranger

      Det svåra med ditt inlägg är att jag vet inte om allt får plats, men men… Jag kör på ändå.
      Det är bara att klippa o klistra in detta i CSS-mallen:

      #dropdown {
       float: left;
       margin: 0;
       padding: 0;
      }
      #dropdown li {
       background: #F7F0E0;
       border:1px solid #666;
       float: left;
       list-style: none;
       margin: 0;
       padding:0 0 0 10px;
       position: relative;
       height:20px;
       width:100px;
      }
      #dropdown li:hover {
       background: #FF2828;
      }
      #dropdown li a {
       text-decoration:none;
      }
      #dropdown ul {
       background: #F7F0E0;
       display: none;
       margin: 0;
       padding: 0;
       position: absolute;
       top: 20px;
       left: -1px;
       z-index: 500;
      }
      #dropdown ul {
       position: absolute;
      }
      #dropdown li:hover ul {
       display: block;
      }
      

      Här är html koden:

      <ul id="dropdown">
        <li><a href="#">Lank 1</a>
          <ul>
            <li><a href="#">Lank 1 - 1</a></li>
            <li><a href="#">Lank 1 - 2</a></li>
            <li><a href="#">Lank 1 - 3</a></li>
         </ul>
       </li>
       <li><a href="#">Lank 2</a>
          <ul>
            <li><a href="#">Lank 2 - 1</a></li>
            <li><a href="#">Lank 2 - 2</a></li>
            <li><a href="#">Lank 2 - 3</a></li>
          </ul>
        </li>
        <li><a href="#">Lank 3</a></li>
        <li><a href="#">Lank 4</a></li>
      </ul>
      

      Jag orkar inte hålla på att gå in i din källkod på bloggen och fixa så att menyn ser ut så som din gör. Jag har bara skrivit ner ett exempel på hur man gör en “drop down” meny.

  11. SvaraCamilla

    Hej! Jag undrar hur man får bort ovilliga röda prickar som dyker upp i menyn som punkter framför varje ord. Mycket tacksam för svar!

  12. SvaraIda

    Jag har nyss gjort en ny design till min blogg. Gjorde blandannat om menyn lite. Nu fungerar allt som det ska, förutom att menyn krånglar lite…När man går in på min blogg ser man den nya menyn. Sedan när man går in på en annan kategori kommer den gamla menyn fram istället. Hur ska jag göra? Snälla hjälp mig!

    1. SvaraLinn

      Om du har ändrat något i kodmallarna måste du göra det i alla kodmallarna och inte bara i kodmallen “Framsida”. Om du har ändrat samma sak i alla kodmallarna så kan jag inte hjälpa dig..:(

  13. SvaraStranger

    Jag skulle aldrig göra såhär om det är så att ni vill att menyn ska hänga med.

    Jag hade gjort såhär:

    .floating-menu {
    position:absolute;
    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;
    }
    
    @media screen {
         body>.floating-menu {
               position:fixed;
         }
    }
    
  14. SvaraLinnea

    Hej!
    Jag har en fråga, och är vore väldigt tacksam för svar; det funkade jättebra att lägga in koden. Men hur ändrar man det som står högst upp i ruten/menyn “FLYTANDE MENY”? 🙂

  15. Svaraamanda

    obs inte min blogg utan bara testar med desigter osv!

    hur gör man om man vill ha länkarna brevid varandra istället för uppepå varandra? tacksam för svar!

  16. SvaraNora

    det funkar ju inte. la in koden längst ner och gjorde allt som du skrev, men ändå ser det precis likadant ut. vad gör jag för fel?

    1. SvaraNora

      En sak till! Längst ner på min blogg så är det massa text som jag inte har nån aning om hur det kom dit – hur får man bort det???

  17. SvaraSANNA

    HEJSAN!

    Jag behöver hjälp!

    Min blogg meny har hamnat jätte långt ner! Jag vet inte hur jag ska göra för att få den den att sitta där jag vaill att den ska!!!

    snälla om någon vet hur man gör HJÄLP MIG!

    1. SvaraElin

      Hejsan!! Hänt samma sak med mig på min test blogg, ändrar jag designen testar jag alltid på den först. Jag ville att mina inlägg skulle bli bredare vilket jag lätt fixade, men då åkte menyn under alla inlägg. Även fast jag har bredare inlägg vill jag ju fortfarande att menyn ska vara bredvid! Hur gör jag?

  18. SvaraSussi

    Hej Lari. Hur gör jag för att få en egen bild som flytande länk till toppen av bloggen istället för en ruta med länkar?

    1. SvaraSussi

      Fixade det själv. Men vet någon hur man får bilden liiite längre ner och “gungande”, som figuren längst till höger på denna siten: ? Skulle bli väldigt glad om någon hjälpte mig :).

  19. Svaraanonym

    Kan man ändra “textstilen” på den flytande menyn? Och färg på texten? Tacksam för svar!! 🙂

  20. SvaraRosanna

    Hej! Skulle bli jättetacksam mot den som kunde svara på hur man kan ändra färgen på texten (i denna flytande meny). Somsagt- tacksam för svar :'(

  21. SvaraELLI

    Jag kan inte hitta någonstans om detta:

    Om jag har en menyrad/flikrad under headern som jag vill ska vara still i början och när man sedan scrollat ner så “fastnar den kvar” längst upp på sidan och hänger med när man går nedåt sen. Någon som förstår hur jag menar? Att den liksom först ligger kvar under headern och sedan när man rullar ner så hänger den med som en smal menyrad längst upp på skärmen? 🙂

  22. SvaraJulia

    Hejsan!

    Hittade ingen tidigare kommentar om detta, så jag får väl fråga själv!
    Jo, om man inte vill att den flytande menyn “sitter fast” utan följer med resten av bloggens design ifall webbläsarens storlek ändras, hur gör man då? Jag kan lite om HTML och CSS själv, så jag har även försökt att lösa det själv, men till ingen nytta.

    Tacksam för svar,
    Julia

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *