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!