Allgemein

Back to Top (Version 2)

Hallo ihr Lieben,

willkommen zu einem neuen Post auf Copy Paste Love. Heute werde ich euch zeigen, wie man einen Back-to-Top Button zu seinem Blog einfügt. Es taucht erst auf, wenn man ein wenig gescrollt hat, hat einen schicken Hover-Effekt und scrollt sanft hoch. Der Code ist von Matt Varone, hier könnt ihr es euch anschauen. Dieses Tutorial wurde so geschrieben, dass ihr es in Blogger einfügen könnt.

Was ihr braucht:

  • einen Blogger-Blog oder eins, wo ihr auf das HTML zugreifen könnt
  • eventuell ein wenig Kenntnisse in Gimp, Photoshop oder ähnliches.
Anleitung:
 
1. Öffnet euren Dashboard –> Vorlage –> HTML bearbeiten.
2. Sucht nach ]]></b:skin> und fügt folgendes darüber ein. GANZ WICHTIG: Vergewissert euch, dass vor dem #toTop die eckige schließende Klammer } ist. Wenn ihr diese aus Versehen löscht, funktioniert das Tutorial nicht!!!
#toTop {
 display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 width:51px;
 height:51px;
 border:none;
 text-indent:100%;
 background:url(http://www.../img/ui.totop.png) no-repeat left top;
}

#toTopHover {
 background:url(http://www.../img/ui.totop.png) no-repeat left -51px;
 width:51px;
 height:51px;
 display:block;
 overflow:hidden;
 float:left;
 opacity: 0;
 -moz-opacity: 0;
 filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
 outline:none;
}


3. Sucht nach </body> und fügt folgendes darüber ein:
<!-- jquery --> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <!-- easing plugin ( optional ) --> <script src="http://lab.mattvarone.com/projects/jquery/totop/js/easing.js" type="text/javascript"></script> <!-- UItoTop plugin --> <script src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js" type="text/javascript"></script> <!-- Starting the plugin --> <script type="text/javascript"> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>
4. Speichern. Jetzt fehlt nur noch das Bild für den Knopf. Ihr könnt das Originalbild oder meine Version benutzen, dafür kopiert ihr nur die Bild-Adresse und fügt diese in Schritt 2 im markierten Codebereich ein. Wer gut mit Photoshop oder ähnliches klar kommt, kann sich auch einen eigenen Button erstellen – schaut euch einfach die Beispiele an!

Gutes Gelingen!

43 Comments

  1. Lui♥

    18. August 2013 at 15:23

    Hey!
    Ich liebe deine Tutorials und habe so gut wie jedes davon schon ausprobiert:-)
    Es macht echt Spaß, dein Blog zu lesen!
    LG Luisa (http://admire-inspire-afire.blogspot.de/)

  2. Evelyn Wiedemann

    18. August 2013 at 15:36

    egal was ich in meinem html code suche,ich finde nichts 🙁

  3. Poppy Moore

    18. August 2013 at 15:47

    Hey,
    habe es ausprobiert und hat leider nicht funktioniert!
    In diesem Teil:

    $().UItoTop({ easingType: 'easeOutQuart' });

    Ist die Hälfte des Codes Rot geworden, kann es sein das da etwas nicht stimmt?

    LG

  4. Melanie Isabell

    18. August 2013 at 16:03

    Ich finde keine der beiden Dinge, die man suchen soll… ;(

  5. Carry S.

    18. August 2013 at 17:52

    Bei mir funktioniert das nicht, dabei habe ich alles so gemacht wie es da steht 🙁 Magst du mal schauen?

    lovingveganfood.blogspot.de

    Danke 🙂

  6. » cerezah

    18. August 2013 at 18:24

    Hallo,
    Funktioniert nur wenn man die vollständige Adresse der .js Datei eingibt, mit der kurzen js./.. gehts bei mir nicht.
    lg
    Mary

  7. me_xenia

    18. August 2013 at 18:38

    Bei mir funktioniert dass aber nicht ! Ich habe alles so gemacht aber es scheint nicht auf ! Hilfe !

  8. lovemira

    18. August 2013 at 18:50

    Huhu, ich hab den Code nochmal geändert, jetzt sollte es gehen!

    @all, die es nicht finden: Das, was ihr suchen müsst, ist bei jedem Code dabei! Schaut euch nochmal das hier an:

    Neuer HTML-Editor – Wie suche ich richtig?

    1. Joe

      19. August 2013 at 11:05

      Die Tastenkombination hilft mir aber auch nicht. Ich finde die Stellen trotzdem nicht.

    2. Joe

      19. August 2013 at 11:06

      Die Tastenkombination Strg+F hilft mir auch nicht. Die Stellen werden trotzdem nicht angezeigt.

    3. Poppy Moore

      20. August 2013 at 18:55

      Super jetzt ging es 😉

  9. Sichtbar

    19. August 2013 at 14:01

    Bei mir geht es auch nicht, er markiert ebenfalls etwas rot und gibt eine Fehlermeldung bei ]]>

  10. Moni M

    20. August 2013 at 10:53

    Huhu! 🙂

    Erstmal vielen lieben Dank für die vielen tollen Tutorials. 🙂 Einige konnte ich schon erfolgreich umsetzen und bin richtig happy! 🙂 Allerdings will dieses Tut nicht so klappen. Kann das an den verschiedenen Vorlagen liegen?

    Viele liebe Grüße

  11. Jenny

    20. August 2013 at 16:52

    tolles tutorial, allerdings würde mich interessieren wie man sich ein eigenes Bild erstellt, da der Hintergrund ja tranzparent sein muss. Würde mich freuen wenn ihr mir helfen würdet 😉

  12. Sandra PusteBlume.~

    21. August 2013 at 13:34

    Klingt vielversprechend! Falls es funktionieren sollte, Hut ab, ich probiers später aus 🙂

  13. FairyFaraway

    23. August 2013 at 16:22

    ok das muss ich auch mal versuchen- gucke schon lange nach solchen Optionen!! Vielen Dank!! Liebe Grüße Anina
    P.S. bei mir gibt es bald ein GIVE AWAY von Victorias Secret, schau doch mal vorbei 😉 FairyFaraway

  14. Anonym

    23. August 2013 at 19:31

    Bei mir hat es wunderbar geklappt – lieben Dank dafür 🙂

    http://himm3lblau.blogspot.de/

  15. Vanny

    27. August 2013 at 11:58

    Es passiert… gar nichts…

    1. lovemira

      27. August 2013 at 12:12

      Du hast auch einen kleinen fatalen Fehler gemacht. Bei Schritt 2 hast du beim einfügen eine }-Klammer verschluckt. Die muss du wieder nach dem margin:0 einfügen.

  16. Fräulein Mimi

    13. September 2013 at 19:40

    Also ich liebe ja solche kleinen Spielereien 🙂 Ich finde sie machen die Arbeit mit HTML und CSS erst richtig interessant. Das was du da angestellt hast ist mir zwar von der Theorie her noch zu hoch, aber Spaß macht's trotzdem und ist wirklich easy peasy 🙂

    Danke dir fürs Erklären!

  17. die Küchenchefin

    26. September 2013 at 20:35

    Vielen Dank für dieses Tutorial! 🙂 Dank euch schaut mein Blog um einiges schöner aus! 🙂

  18. Sarah Morgan

    1. October 2013 at 14:29

    Hallo, ist es auch irgendwie möglich den Button auf der linken Seite zu haben?
    Alles andere hat super funktioniert! 😉 Dankeschön

    Liebe Grüße

  19. Farina

    2. October 2013 at 15:39

    Ich habe alles so gemacht wie es dort stand, sogar drei mal auf die }- Klammern geachtet & mir selbst bei Photoshop ein Bild erstellt. Es klappt aber nicht. Auch nicht wenn ich das Bild was du hier vorschlägst benutze. Ich weiß wirklich nicht was ich noch machen soll

    1. lovemira

      2. October 2013 at 16:02

      Hey, es funktioniert doch`? :O

  20. Clari ssa

    3. October 2013 at 14:33

    Hey, habe es gerade auch ausprobiert 🙂 Habe alles gemacht, was du beschrieben hast. In meiner Vorschau funktioniert es, aber im richtigen Blog dann nicht mehr. Zudem dauert das speichern auch richtig lange. Woran könnte es liegen? Liebste Grüße :))

    http://derblogvonmissstrawberry19.blogspot.de/

  21. Clari ssa

    3. October 2013 at 15:42

    okay, hat sich erledigt! Habe es geschafft :))))

  22. Michelle

    23. October 2013 at 22:30

    Hey, es funktioniert, aber der Pfeil ist weiß, genau wie mein Hintergrund, wie kann ich die Pfeilfarbe ändern? 🙂 Guck selbst .. http://wayfarerr.blogspot.de/

    1. Malak Hijabi

      22. November 2013 at 13:41

      Ich habe auch das gleiche Problem wie @Michelle.
      Wie kann ich das wieder schwarz machen?

  23. Von Mri

    15. December 2013 at 0:41

    Huhu 🙂
    Bei mir hatte es zwischenzeitlich funktioniert, aber dann habe ich weiter am Layout beim Testblog gebastelt, und nun geht es nicht mehr. Habe schon nach der geschweiften Klammer geguckt und den ganzen Code noch einmal ersetzt… Ich könnte mir vorstellen, dass es an der fehlenden Einleitung ( "]]>") bei "]]>" liegt. Irgendwie habe ich nämlich nur ""… Wenn ich das ändern möchte, sagt mir der Editor, "The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section."
    Nu hab ich leider null Ahnung… Hast du irgendwelche Ideen was ich noch probieren könnte?
    Verträgt sich das Skript vielleicht mit irgendwas anderem nicht?
    Liebe Grüße
    Marie 🙂

  24. mara

    24. January 2014 at 18:52

    Hei liebe Mira…
    Also, bei mir hat es super und gerade auf Anhieb geklappt!
    Das 'Weiche' finde ich so toll!
    Danke tausendmal, echt! 🙂

    Alles, alles Liebe,
    mara <33

    maristicated.blogspot.ch

  25. Josie Papaya

    25. January 2014 at 19:22

    Bei mir funktioniert das nicht so ganz. Erstens taucht bei mir der Button erst ganz unten auf der linken Seite auf und zweitens sind meine hochgeladenen Bilder nicht zu sehen, da steht nur TO TOP 🙁
    Hab ich was falsch gemacht? Schau es dir mal am besten an, wenn du willst.
    http://liacc.blogspot.de

    LG Josie

  26. lydia lucia

    28. February 2014 at 5:29

    Danke für das Tutorial! Es ist wunderschön, dass der Pfeil erst mit dem scrollen auftaucht!

  27. Lisa Marie

    23. May 2014 at 19:10

    Wuhuuu bei mir funktionierts! Ich bin total happy! :))))

  28. Ines Caranaubahx

    27. July 2014 at 20:08

    Mein ganzes Design ist jetzt im arsch… yaaaay

  29. Milly

    17. November 2014 at 16:03

    Super geklappt das Tutorial, vielen Dank 🙂

    http://www.schnecks-paradies.de/

  30. Franziska S.

    1. January 2015 at 17:20

    Hallo Mira! Bei mir hat es geklappt! Vielen Dank!

  31. fairytale

    20. March 2015 at 21:12

    Hallöchen!
    Funktioniert leider nicht mehr, da zwei der Code-Seiten nicht mehr verfügbar sind. Kann das behoben werden? Fand das Tut genial und hat auch alles funktioniert, bis vor kurzem. 🙂

    Gruß Fairytale

    1. fairytale

      7. April 2015 at 16:53

      Funktioniert wieder! 😉

  32. Anonym

    28. March 2015 at 18:30

    Bei mir sieht man es nicht 🙁

  33. Anonym

    28. March 2015 at 18:51

    Bei mir sieht man es nicht 🙁

  34. Magdalena

    25. September 2015 at 20:06

    Hallo! Tolles Tutorial! Hat funktioniert. Ich würde allerdings im Tutorial noch ergänzen, dass man – wenn man das Bild selber in Gimp/Photoshop/Illustrator macht, dies in 51x51px machen muss, denn sonst wird es nicht angezeigt, außer man ändert Länge und Breite im Code. Diesen Fehler habe ich nämlich gemacht 😀

    Liebe Grüße,
    Magdalena

Leave a Reply to lydia lucia Cancel