[Tutorial] Back to the Top - Pfeil

Freitag, 17. April 2015


Hey meine lieben,

heute kommt mal wieder ein kleines Tutorial für euch. Dieses habe ich auf dem Blog von der lieben Mira gefunden. Leider habe ich es da nicht ganz verstanden und brauchte mehrere Anläufe um es richtig hinzubekommen. Jetzt dachte ich mir, erzähl ich euch es in meinen eigenen Worten.

Es geht um den Back to the Top - Pfeil. Soll heißen man scrollt auf den Blog immer weiter nach unten, und um dann wieder nach ganz oben zu kommen, klickt man einfach rauf und man ist sofort wieder oben. Ich hoffe ihr wisst was ich meine. Ich kann es nicht wirklich erklären. Einfach bei mir ausprobieren (steht unten rechts bei mir ;))

1. Schritt:
Zu aller erst müsst ihr das Feld HTML/Javaskript öffnen: Layout -> Gadget hinzufügen -> HTML/Javaskript; ihr könnt es an einer beliebigen Stelle positionieren

2. Schritt:
Folgenden Code müsst ihr in das Feld eingeben:

<style>
#floatlink {
position:fixed;
right: 40px;
bottom: 10px;
z-index:10;
font: bold 18px Georgia;
letter-spacing: 0.2em;
}


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


</style>

<div id="floatlink">
<a href="#">&uarr; NACH OBEN &uarr;</a></div>


Kurze Erklärung zum Code:
fixed = der Pfeil bleibt immer an der selben Stelle, egal wo man auf dem Blog ist
Right/Bottom: das ist jeweil der Abstand zum rechten und unteren Rand (könnt ihr nach belieben ändern)
Font: Hier könnt ihr die Größe und die Schrift wählen, einfach nach euren Vorstellungen ändern
Letter-Spacing: das ist der Abstand zwischen den Buchstaben, kann auch individuell angepasst werden
Color: das ist die jweilige Farbe, die ihr haben wollt (alle Farbcodes könnt ihr über Google rausfinden)
Nach oben: Da könnt ihr euren jeweiligen Text eingeben 

Ich hoffe die Erklärung war für euch verständlich. Wie der Code unverändert aussieht, könnt ihr ja auf meinen Blog sehen. Ich habe die Farbe an mein Blogdesign angepasst.

3. Schritt:
Speichern und das war es auch schon. Blog laden und ausprobieren ob alles funktioniert. Bei Blogger müsste alles klappen. Wenn nicht einfach Bescheid sagen, ich versuche dann zu helfen.

Was sagt ihr zu diesem kleinen Tutorial? War es hilfreich?

Kommentare

  1. so cute!! http://pitufinisima.blogspot.com.es/

    AntwortenLöschen
  2. Nice blog Rabea :)

    Follow me on GFC, I always follow back.
    WWW.HEKYMA.COM

    AntwortenLöschen
  3. Great post, honey! <3

    http://nastyadeutsch.blogspot.ru/

    AntwortenLöschen
  4. Nice post!

    kiss
    food&emotions
    http://fefoodemotions.blogspot.pt

    AntwortenLöschen
  5. I unfollowed you, and followed you again, please see if it works now, number 832.
    http://retro-electric.blogspot.com

    AntwortenLöschen
  6. Hallo,

    Oh mein Gott ich bin so froh das ich dir folge, wirklich du bist glaube ich die einzigst die extra dazu ein Post verfassen tut und uns allen zeigt wie es Funktioniert mit den Codes und so. Ich würde mich freuen, wenn du vielleicht mir erklären magst wie du das mit dem Datum in der Mitte Platzieren hast.
    Würde mich sehr freuen um eine Rückmeldung.

    xoxo Juana

    http://juana-whispers.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Ich bin froh dir damit helfen zu können :)

      Löschen
  7. Cute:) kiss

    http://denimakeup95.blogspot.it/

    AntwortenLöschen
  8. ein sehr schäner informativer Post...klasse
    lg missteina von
    www.beautiful-way-of-life.blogspot.de

    AntwortenLöschen
  9. Toller Post!
    Dein Blog gefällt mir wirklich gut <3

    Liebe Grüße

    http://nilooorac.blogspot.de

    AntwortenLöschen
  10. You have such a great blog - its really cute :) i'm going to friend you on google connect :)

    TIFFANYXOXO.COM

    AntwortenLöschen
  11. Ich finde diese Postreihe soooo schön. Danke für deine Mühe! =)
    liebst Elisabeth-Amalie

    AntwortenLöschen
  12. Hello guapa..te just read in my blog I follow from ya..te hope back into the mine to follow you me too right?
    Kisses !!

    AntwortenLöschen

Ich freue mich über jedes Kommentar! Ich freue mich auch über Lob oder Kritik. Verbesserungsvorschläge und Ideen für neue Post sind natürlich auch immer willkommen.


Lasst mir doch euren Link zu eurer Homepage da, ich schaue gerne vorbei :)

________________________________________________________________________________

I´m happy for every Comment on my Blog! I am also glad to hear your opinion and if you have suggestions for improvement please tell me this.

Leave me the link to your website so i can take a look on that :)

Love <3

Related Posts Plugin for WordPress, Blogger...

Template Created By Dinosaur Stew || All Rights Reserved