“Nach oben” Button, “Back to Top” Button für Blogger Blogspot

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.

Nach oben Button, Back to Top Button, Blogger Blogspot


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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<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(http://1.bp.blogspot.com/-ghX0YgC6_QI/T0PzAY66oHI/AAAAAAAAAsc/M6hVxOSDPnU/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: http://1.bp.blogspot.com/-ghX0YgC6_QI/T0PzAY66oHI/AAAAAAAAAsc/M6hVxOSDPnU/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:

Anonym 6. März 2012 um 15:10

Gibt es da performance probleme?

BloggerLatein 6. März 2012 um 15:28

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.

Anonym 2. Mai 2012 um 20:34

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?

BloggerLatein 2. Mai 2012 um 23:58

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

Maren Arzt 31. Juli 2012 um 18:35

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.

BloggerLatein 1. August 2012 um 16:32

@Maren Arzt

Grundlagen >> nach unten scrollen >> das 11. Gadget von oben

VG

Maren Arzt 2. August 2012 um 21:04

super, es hat funktioniert. vielen Dank für die schnelle Antwort!

David H 16. September 2012 um 08:58

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

BloggerLatein 16. September 2012 um 09:20

@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

David H 16. September 2012 um 09:39

Hallo,


vielen Dank! Das funktioniert perfekt. Ich hatte nur positive Werte ausprobiert…


Grüße

Anonym 21. Juli 2013 um 01:35

Funktioniert prima! Danke

Lary // Lary-Tales 21. April 2014 um 19:19

Oh, es hat super funktioniert. Hatte erst zwei andere Methoden versucht, aber deine ist Klasse! Freu mich total.

LG Lary

Kommentar veröffentlichen