About Tutorialübersicht Labels Header Goodies Tutorialwünsche

"Back to top"-Pfeil

Mittwoch, 17. Oktober 2012

Auf Wunsch zeige ich euch, wie man einen "Back-to-top"-Pfeil macht.
Ihr findet ihn unten rechts. Wenn ihr draufklickt, kommt ihr wieder nach oben. :-)
Zuerst müsst ihr euch irgendwie einen Pfeil erstellen. Der zum Beispiel so aussehen könnte. (Dürft ihr verwenden)

Dann ladet ihr ihn irgendwo hoch und speichert den Link in eurer Zwischenablage (Strg + C /Command + C)
Diesen Link müsst ihr später unten einfügen.




<style>
#floatbubble {position:fixed; right: 5px; bottom: 0px; width:50px; height: 100px; z-index:100;}
#floatbubble a {display:block; width:50px; height:100px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}
#narrow a:link {background-image:url(LINK ZUM PFEIL); }
</style>
<div id='floatbubble'>
<div id='narrow'><a href="#" rel="nofollow"></a></div>
</div>

Ich habe versucht das übersichtlich zu markieren. Die blauen Sachen dürft ihr ändern.
Erklärung:
right: 5px; bottom: 0px;  - Gibt an, wo sich der Pfeil befinden soll. Anstatt right könnt ihr auch left einfügen und                                      die Zahl verändern
width:50px; height: 100px; - Gibt an, welche Größe euer Button hat. Wenn ihr den, den ich euch erstellt habe,                                          verwendet, dann müsst ihr hier nichts ändern. width ist die Breite und height ist                             .....        die Höhe
LINK ZUM PFEIL - Hier gebt ihr den Link von eurem hochgeladenen Pfeil an.

Das ganze fügt ihr irgendwo in eurem Layout als HTML/Java Script ein. Ich empfehle es sehr weit unten zu machen, da sonst irgendwo eine hässliche Lücke entsteht. :-)

Und schaut doch mal hier vorbei, ich habe kleine Geschenke für euch erstellt, die ihr kostenlos downlaoden dürft. :-)

8 Kommentare:

  1. Danke, das hat wirklich super geklappt :-)

    viele Grüße
    Sophie ♥

    AntwortenLöschen
  2. Huhu :)
    Sehr coole Idee, habe ihn schon länger :) Gibt es auch einen Pfeil nach unten? Hab das auch schon iwo gesehen. Ich hab außerdem noch zwei Fragen,d ie nicth dazu passen ;) Also ich würde gern meine rechte Sidebar fixieren, aber das TUT von CPL funktioniert nicht :( Habt ihr da eine Lösung :)? Und dann noch etwas, ich würde gerne das GFC Teil wegmachen, wie ich das mit dem Followen mache, weiß ich schon, aber ich weiß noch nicht, wie man einen Text hat, der sich selbst ändert, dass da z.B steht: Dieser Blog hat ... wundervolle Follower, dass sich das von alleine ändert :) Geht das :)?

    GLG Lora| www.photoostuff.blogspot.com

    AntwortenLöschen
  3. Oh das ist echt mies -.-
    Dein Pfeil ist wirklich hübsch :) ♥

    AntwortenLöschen
  4. Bei mir bleibt man trotz Klicks auf den Pfeil an der gleichen stelle :(

    AntwortenLöschen
  5. Ihr Tag ist nicht zulässig.: STYLE-Code kann nicht übernommen werden.

    steht da, wenn ich ihn dir senden will o:

    AntwortenLöschen
  6. Das Tutorial ist ja gut,aber bei mir wird immer irgendein Fehler angezeigt,wenn ich es ganz unten im HTML Bereich einfüge,hab es auch wo anderes versucht.Geht nicht.Wäre nett,wenn ihr mir helfen könnten.:)

    -Meltem.
    http://meltyskleinewelt.blogspot.de/

    AntwortenLöschen
  7. ich wollte es rechts auf meinem blog machen, aber leider macht er mir das links hin auf meine social media buttons woran liegt das?

    AntwortenLöschen
  8. Genau den Fehler wie bei Beautysunshine hab ich nun auch.

    AntwortenLöschen