Sonntag, 11. März 2012

Tutorial: Sidebar fixieren

Ich hatte jetzt mal Lust ein Tutorial zu machen, da mir zur Zeit nicht einfällt was ich posten könnte.
Es haben einige gefragt, ob ich weiß wie man die Sidebar "fixiert", also, dass sie beim runterscrollen sich nicht bewegt und dazu mach ich jetzt ein Tutorial :)

Gleich im Vorraus: Die Sidebar darf nicht länger als der Bildschirm sein!

 Schritt 1:

Als erstes geht ihr auf Design und dann auf HTML bearbeiten.


Schritt 2:

Dort sucht ihr dann nach:

]]></b:skin>


Das sollte dann ungefähr so aussehen wie bei mir.
Um die "Suchleiste" (unten rot umrandet auf dem Bild) zu bekommen, drückt ihr Strg + F dann findet ihr die Stelle schneller ;)

Schritt 3:



Wenn ihr eure Sidebar auf der linken Seite habt, dann fügt ihr das hier (vor ]]></b:skin>) ein:

}#sidebar-left-1{position:fixed;}

Wenn ihr eure Sidebar auf der rechten Seite habt, dann fügt ihr das hier (vor ]]></b:skin>) ein:

}#sidebar-right-1{position:fixed;}

Und wenn ihr links und rechts eine habt fügt ihr beide einfach so ein:

}#sidebar-right-1{position:fixed;}
}#sidebar-left-1{position:fixed;}


und dann einfach auf " Vorlage speichern" und fertig :)

20 Kommentare:

  1. Danke für den tollen Kommentar hat mir echt geholfen ;)
    und einen neuen Follower hast du auch ^^

    LG Meroda
    http://berlin-fashion-fou.blogspot.com

    AntwortenLöschen
  2. Ich hab es sonst nie hinbekommen und mit deiner erklärung auf anhieb:)
    Danke danke danke;*
    grüße marie:) http://maries-photographie.blogspot.de/

    AntwortenLöschen
    Antworten
    1. wow, das freut mich :)
      schön, dass ich dir helfen konnte ;)

      <3

      Löschen
  3. ich habe dabei leider ein problem :/
    in google chrome wird meine sidebar zwar fixiert angezeigt aber an der gegenüberliegenden seite.. :s
    kannst du mir da irgendwie helfen?

    AntwortenLöschen
    Antworten
    1. mir ist gesagt worden, dass man statt der 1 einfach eine 0 bei google chrome eingeben muss :))

      zb hier:
      }#sidebar-left-1{position:fixed;}

      mit der 0 siehts dann so aus:

      }#sidebar-left-0{position:fixed;}

      Löschen
    2. Ich hatte das Problem auch, dass meine linke Sidebar auf der gegenüberliegenden Seite angezeigt wurde.
      Habe das so gelöst, dass ich ihr einfach einen festen Platz zugewiesen habe, eben an der Stelle, an der sie auch wirklich sein soll.

      also:

      #sidebar-left-1 {
      position:fixed;
      top:??px;
      right:??px;
      left:??px;
      }

      (anstelle der ?? die entsprechenden Zahlen)

      Löschen
  4. ähm.. kannst du mal erklären, wie man diese Auswahl da oben hinmachen kann ? :o
    bei dir ist das jetzt dieses :
    Posts. Tutorials.<3 to do. Blogvorstellung. Gästebuch.

    ich hab das schon oft versucht so zu machen, aber ich Kriegs einfach nicht hin ! ._.

    AntwortenLöschen
    Antworten
    1. das sind einfach die ganz normalen seiten.
      wahrscheinlich hast du das jetzt sowieso schon rausbekommen. tut mir leid, dass ich erst jetzt antworte, dein Kommentar ist irgendwie untergegangen :/
      aber falls du das hier liest und es noch nicht weißt, dann meld dich einfach nohcmal bei mir :)

      Löschen
  5. Ich habe das problem das meine sidebar dann ueber meinem post bereich liegt.. was dann?D:

    AntwortenLöschen
    Antworten
    1. ich weiß grad nicht was du meinst :o willst du mir vlt einen screenshot schicken? :)

      Löschen
  6. WOW bei mir hat es sonst nie geklappt, nicht mal bei copy paste love, ich hab bestimmt alles probiert und jetzt geht esss! danke danke danke:)

    AntwortenLöschen
  7. also ich seh es zwar aber meine leser sagen das es total komisch aussieht und nicht funktioniert :(((

    AntwortenLöschen
  8. bei mir geht das irgendwie nicht:/ kann es daran liegen, dass ich meinen header nicht ganz entfernt habe, sondern nur ein sehr schmales weißes bild benutzt habe?

    AntwortenLöschen
  9. ok hat doch funktioniert:D aber irgendwie ist meine Breite der Sidebar ganz komisch. Meine Bildunterschrift geht bis zum Rand des Computerbildschirms? aber trotzem danke!xx

    AntwortenLöschen
  10. Juhu, mit deiner Anleitung hat's endlich funktioniert, vielen lieben Dank <3

    AntwortenLöschen
  11. hey, hat geklappt. danke :)

    allerdings muss die geschweifte klammer vorne weg.
    (das gehört noch zu #Header1 ...)

    die änderung der breite wird hier erklärt:
    http://www.5202.de/2012/11/blogger-linke-sidebar-fixieren.html

    liebe grüße :)

    AntwortenLöschen