Montag, 18. Juni 2012

Tutorial, "Nach Oben" Button Stylen

Viele im Netz fragen sich wie man den "Nach Oben" Button individuell anpassen kann. Ganz frei seid ihr zwar nicht, aber ich zeige euch wie man die Schrift und Farbe verändern kann.

1.) Zuerst geht zur Layout und öffnet ein neues Gadget namens "HTML/Javasript" und fügt diesen Code 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="#">&uarr; NACH OBEN &uarr;</a></div>


  12px ist die Grösse der Schrift, einfach die Zahl ändern um es grösser oder kleiner zu machen. Das "px" müsst ihr aber lassen.
Century Gothic ist die Schriftart der "Nach Oben" Button, eigentlich könnt ihr alle Schriftart benutzen die im Vorlagendesigner angeboten wird, einfach Schriftart Name eingeben.
#aaaaaa die Farbe der Schrift
#aaaaaa die Farbe der Hover(Wenn man mit der Maus darüber geht)
#aaaaaa die Farbe der "Nach Oben" Button Wenn ihr den schon benutzt habt Quasi die Farbe für "besuchte Links"
NACH OBEN Könnt ihr beliebig verändern, Ist der Text der angezeigt wird

Eine andere Farbe könnt ihr HIER auswählen und einfach #aaaaaa ersetzen nicht das "#" vergessen!
Wollt ihr eine andere Schrift als im Blogger angeboten wird, dann müsst ihr Zuerst eine auf Google Webfonts aussuchen. Jede Schrift hat rechts unten 3 Links zwar Quick-Use, Pop out und Add to Collection. Drückt auf Quick-Use, scrollt nach unten, dann seht ihr "Add this Code to your Website" kopiert den Code. Der könnte z.B so sein.

<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>

fügt am Ende zwischen ccs' und ">" ein "/" dazu.
Öffnet Vorlage-->HTML bearbeiten und sucht nach </head>, es geht am einfachsten wenn ihr strg(ctrl)+F drückt und das eingibt, dann sucht eure Browser für euch nach der Stelle. Dann einfach den Code oberhalb von </head> rein kopieren.
Jetzt könnt ihr Century Gothic einfach durch die Schriftart Name ersetzen.

Keine Kommentare:

Kommentar veröffentlichen