Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

'Back to Top'-Button einbinden

Eine praktische Sache bei Blogs mit unendlichem Scroll oder vielen Posts auf einer Seite ist der 'Back-to-Top'-Link (Tutorial dazu hier). Heute möchte ich euch zeigen wie man den Code so abändert, dass anstatt dem Text ein Bild erscheint. (Siehe den rot markierten Pfeil in der rechten unteren Ecke des folgenden Screenshots).
 1. Schritt

Geht als erstes auf das Layout eures Blogs und erstellt ein neues HTML/JavaScript.

2. Schritt
Fügt folgenden Code in das Gadget ein.
<style>
#floatlink {
position:fixed;
right: 20px;
bottom: 10px;
z-index:10;
font: bold 12px Century Gothic;
letter-spacing: 0.2em;
}

#floatlink a:link {
color:#aaaaaa;
text-decoration:none;}
#floatlink a:hover {
color:#aaaaaa;
text-decoration:none;}
#floatlink a:visited {
color:#aaaaaa;
text-decoration:none;}

</style>


<div id="floatlink">
<a href="#"><img src="DEINE GRAFIKADRESSE" alt="&uarr; NACH OBEN &uarr;" /></a></div>


3. Schritt
Nun ladet ihr irgendwo (zum Beispiel Photobucket, Tinypic, fotos-hochladen o.ä.) euren Button hoch. Am besten mit transparentem Hintergrund und in der Originalgröße in der ihr den Button auf eurem Blog haben wollt.

4. Schritt
Kopiert nun mit einem Rechtsclick die Grafikadresse eures Bildes (Rechtsclick auf das Bild -> 'Grafikadrese kopieren' auswählen) und ersetzt DEINE GRAFIKADRESSE im Code durch die eures Bildes.

Das wars auch schon.

Kommentare:

  1. Super beschrieben, das habe selbst ich hinbekommen :-) Danke schön

    AntwortenLöschen
  2. Genau danach habe ich gesucht. Danke Danke Danke.
    :-*
    Liebe Grüße
    Julia

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.