“Nach oben” Button, “Back to Top” Button für Blogger Blogspot
Woher bekommt man einen “Nach oben” Button ? Wie baut man einen “Back to Top” Button ein? Woher bekommt man Gadgets für Blogger Blogspot?
Schreibt man sehr lange Posts bzw. Artikel und mit der Zeit kommen noch etliche Kommentare dazu, dann kann eine Seite sehr lang werden. Hat man die Anzahl der Posts auf der Startseite des Blogs oder auf den Label-Seiten (Kategorien) nicht eingeschränkt, werden diese Seiten auch sehr lang.
Lange Seiten bedeuten für einen Leser ständiges Scrollen nach unten und wieder nach oben. Für Nutzer mit kleinen Bildschirmen kann dies schnell nervend werden und vielleicht verlässt der eine oder andere deshalb frühzeitig den Blog.
Der “Nach oben” Button (Back to Top) wird über ein HTML/JavaScript Gadget eingebettet. Der Button wird erst beim Scrollen nach unten rechts neben dem Blog sichtbar.
Code für den Nach Oben Button in einen Blogspot Blog einbetten
Gadget für HTML/JavaScript in der alten Blogger Oberfläche hinzufügen
- bei blogger.com einloggen und entsprechenden Blog aufsuchen
- Design >> Seitenelemente >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code des “Nach oben” Buttons einfügen >> Speichern
- Blog neu laden und der Button sollte zu sehen sein
Gadget für HTML/JavaScript in der neuen Blogger Oberfläche hinzufügen
- bei blogger.com einloggen und entsprechenden Blog aufsuchen
- Layout >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code des “Nach oben” Buttons einfügen >> Speichern
- Blog neu laden und der Button sollte zu sehen sein
Code
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style>
#back-top {
position: fixed;
bottom: 10px;
margin-left: 35%;
}
#back-top span {
width: 40px;
height: 40px;
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EordWzX0YCzwOHmIkCn6H6cSwhnCiO4GoLCa7zYzCtEBhI7ABESZs1VI8X9w8ZsOR4W9GYNrkHS6UE1UGWYAL1en15q7lSQR2w7Dwtv_uAVMk1IJtEvT_tuKB976dta49RcMIQFnkSXh/s1600/bt.png)
}
</style>
<div id="back-top" style="display: block;" >
<a href="#top"><span></span></a>
</div>
Veränderbare Werte
- bottom: 10 px ist der Abstand unterhalb des Buttons
- margin-left: 35% der Abstand des Buttons zu seiner linken Seite (zwischen Blog und Button), man kann den Wert auch in Pixel angeben (z.B. 50px)
- width: 40px ist die Breite des Buttons
- height: 40px ist die Höhe des Buttons
Die URL (der Link) zum Button: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2EordWzX0YCzwOHmIkCn6H6cSwhnCiO4GoLCa7zYzCtEBhI7ABESZs1VI8X9w8ZsOR4W9GYNrkHS6UE1UGWYAL1en15q7lSQR2w7Dwtv_uAVMk1IJtEvT_tuKB976dta49RcMIQFnkSXh/s1600/bt.png
Um einen anderen Button anzeigen zu lassen wird die URL (der Link) mit der neuen URL ersetzt. Die Breite (width: 40px) und die Höhe (height: 40px) sind für den neuen Button eventuell auch anzupassen.
Artikel als PDF herunterladen
12 Kommentare:
Gibt es da performance probleme?
Da ein Javascript hinzugefügt wird, kann es zu einer Ladezeitverzögerung kommen.
Einfach austesten, falls es integriert wird, kann die Ladezeit vor und nach Einbau mit Tools wie:
www.webpagetest.org
http://tools.pingdom.com/fpt/
https://developers.google.com/pagespeed/
getestet werden.
Tolle Sache. Vielen Dank!
Leider verträgt sich das Script nicht mit Lightbox. Diese wird durch das o.a. Code ausser Kraft gesetzt.
Gibt es da eine Möglichkeit, beides auf einer Seite laufen zu lassen?
Ich habe es noch einmal an einigen Testblogs probiert. Und ich konnte keine Probleme mit Lightbox erkennen. Es hat auch mit unterschiedlichen Vorlagen und verschiedenen Browsern funktioniert.
Bei den Tests traten erst Probleme mit Lightbox auf als ich JavaScript im Browser deaktivierte (über Adblock). Nutzt Du einen Adblocker (JavaScript deaktiviert?)oder hast Du irgendwie JavaScript deaktiviert? Dann aktiviere es mal und schaue mal ob es dann funktioniert.
Tritt das Problem bei mehreren Browsern, auch Google Chrome, auf?
Nutzt Du eine Vorlage von Blogger, Dynamische Ansichten oder eine Vorlage von Drittanbietern? Versuche es mal mit unterschiedlichen Vorlagen, es könnte auch an der Template Vorlage liegen.
Sonst fällt mir auf die Schnelle keine Lösung ein, sorry.
vg
Hallo,
ich bin bis "Gadget hinzufügen" gekommen. aber wo kann ich da html/Java auswählen?
ich habe bei dem Pop Up die Rubriken Grundlagen, Video Specials, Besonders beliebt, Weitere Gadgets, Eigene hinzufügen.
unter "Eigene hinzufügen" kann ich nur eine Internetseite eingeben.
@Maren Arzt
Grundlagen >> nach unten scrollen >> das 11. Gadget von oben
VG
super, es hat funktioniert. vielen Dank für die schnelle Antwort!
Hallo,
gibt es eine Möglichkeit, den "Back-to-top"-Button auf der linken Seite eines Blogs einzubinden? Eine Änderung des Wertes "margin-left: 35%" führte nicht zum Erfolg.
Grüße
@David H
Richtige Zeile und im Test funktioniert es. Nutze mal einen negativen Wert und ändere diesen Wert; vielleicht reicht ca. -50%
margin-left: -50%;
VG
Hallo,
vielen Dank! Das funktioniert perfekt. Ich hatte nur positive Werte ausprobiert…
Grüße
Funktioniert prima! Danke
Oh, es hat super funktioniert. Hatte erst zwei andere Methoden versucht, aber deine ist Klasse! Freu mich total.
LG Lary
Kommentar veröffentlichen