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 Kommentare

  1. 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/)

    AntwortenLöschen
  2. egal was ich in meinem html code suche,ich finde nichts :(

    AntwortenLöschen
  3. 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

    AntwortenLöschen
  4. Ich finde keine der beiden Dinge, die man suchen soll... ;(

    AntwortenLöschen
  5. Bei mir funktioniert das nicht, dabei habe ich alles so gemacht wie es da steht :( Magst du mal schauen?

    lovingveganfood.blogspot.de

    Danke :)

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

    AntwortenLöschen
  7. Bei mir funktioniert dass aber nicht ! Ich habe alles so gemacht aber es scheint nicht auf ! Hilfe !

    AntwortenLöschen
  8. 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?

    AntwortenLöschen
    Antworten
    1. Die Tastenkombination hilft mir aber auch nicht. Ich finde die Stellen trotzdem nicht.

      Löschen
    2. Die Tastenkombination Strg+F hilft mir auch nicht. Die Stellen werden trotzdem nicht angezeigt.

      Löschen
  9. Bei mir geht es auch nicht, er markiert ebenfalls etwas rot und gibt eine Fehlermeldung bei ]]>

    AntwortenLöschen
  10. 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

    AntwortenLöschen
  11. 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 ;)

    AntwortenLöschen
  12. Klingt vielversprechend! Falls es funktionieren sollte, Hut ab, ich probiers später aus :)

    AntwortenLöschen
  13. 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

    AntwortenLöschen
  14. Bei mir hat es wunderbar geklappt - lieben Dank dafür :)

    http://himm3lblau.blogspot.de/

    AntwortenLöschen
  15. Antworten
    1. 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.

      Löschen
  16. 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!

    AntwortenLöschen
  17. Vielen Dank für dieses Tutorial! :) Dank euch schaut mein Blog um einiges schöner aus! :)

    AntwortenLöschen
  18. 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

    AntwortenLöschen
  19. 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

    AntwortenLöschen
  20. 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/

    AntwortenLöschen
  21. okay, hat sich erledigt! Habe es geschafft :))))

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

    AntwortenLöschen
    Antworten
    1. Ich habe auch das gleiche Problem wie @Michelle.
      Wie kann ich das wieder schwarz machen?

      Löschen
  23. 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 :)

    AntwortenLöschen
  24. 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

    AntwortenLöschen
  25. 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

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

    AntwortenLöschen
  27. Wuhuuu bei mir funktionierts! Ich bin total happy! :))))

    AntwortenLöschen
  28. Mein ganzes Design ist jetzt im arsch... yaaaay

    AntwortenLöschen
  29. Super geklappt das Tutorial, vielen Dank :)

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

    AntwortenLöschen
  30. Hallo Mira! Bei mir hat es geklappt! Vielen Dank!

    AntwortenLöschen
  31. 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

    AntwortenLöschen
  32. 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 :D

    Liebe Grüße,
    Magdalena

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!