[BLOGGER] Floatlinks ✤

Ich hab jetzt mal den Übertitel Floatlinks genannt, doch ihr könnt diese Methode genauso gut verwenden, wenn ihr Bilder oder Text irgendwo auf eurer Seite haben wollt, die da auch schön bleiben.
Bei mir sind das die beiden Links oben zu Twitter und Google+ als auch der Scrollsparer, der bei draufklicken direkt wieder zum Seitenbeginn führt.

Doch wie macht man sowas eigentlich?


Ich fang zuerst bei den Bildlinks an, die sind schneller gemacht.

Zu Beginn braucht ihr natürlich ein Bild, welches ihr dann irgendwo hochladen müsst, damit ihr einen Bildlink habt. Ich hab die jetzt einfach mal in einen Post hochgeladen, es geht aber natürlich auch ganz einfach bei Picasa oder sonst wo.

Okay, dann fügt ihr einfach ein neues HTML-Gadget eurem Blog hinzu und tippt folgendes ein.

<div id="tag" style="position:fixed; left:0px; top: 40px; z-index:10;"><a href="Bildlink" target="_blank"><img width="70%" height="70%" src="Ziellink" border="0" /></a></div>

Grün steht für die Links, die angepasst werden müssen. Die rot markierten Werte entsprechen den Einstellungen meines Twitterlinks. Die ersten beiden bestimmen die Position. Falls ihr euer Bild zum Beispiel unten rechts haben wollt, macht es allerdings keinen Sinn die Werte von oben oder links anzugeben. Also müsst ihr left durch right und top durch bottom ersetzen. Die width und height-Werte müssen nur dann angepasst werden, wenn das Bild nicht die richtige Grösse hat. Entspricht das Bild direkt der gewünschten Grösse, könnt ihr die einfach weglassen.

Für Texte schaut der Code folgendermassen aus:
Wenn ihr Font und Farbe nicht definieren wollt:
<style>
#floatlink {
position:fixed;
right: 10px;
bottom: 20px;
z-index:10;
}
</style>

<div id="floatlink">
<a href="#">&uarr; Nach Oben &uarr;</a></div>

In diesem Falle passt sich Schrift, Farbe und Grösse an den Blog selbst an. (Farben immernoch mit der gleichen Bedeutung ^^)


Und wenn ihr doch etwas mehr definieren wollt:
<style>
#floatlink {
position:fixed;
right: 10px;
bottom: 20px;
z-index:10;
font: 30px FontName;
letter-spacing: 0em;
}

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

</style>


<div id="floatlink">
<a href="Link"> TEXT </a></div>


Die verschiedenen Einstellungen bestimmen die Schrift (font) und ihre Grösse. Bei letter-spacing stellt ihr den Abstand zwischen den einzelnen Buchstaben ein. Und beim folgenden geht es um die verschiedenen Farben, die der Link annehmen soll. Zuerst den, wenn der Link noch nie besucht wurde, dann der, wenn die Maus drüberfährt und schlussendlich die Farbe des besuchten Links. Bei mir ist das immer weiss. HTML-Farbcodes findet man im Internet zu Hauf oder auch ganz einfach bei Gimp. Im Color-Tab gibt es die sehr praktische HTML-notation.

Falls ihr die Absicht habt, einen "Nach Oben"-Link auf eurem Blog einzufügen muss bei der gelben Markierung nicht ein Link sondern # eingegeben werden.
Falls ihr jeweils nur Bild oder Text haben wollt, einfach den <a href="Link"> ! </a>-Code rausschneiden. Aber alles was dazwischen steht nicht weglassen, das wird gebraucht ^^

Joa, ich hoffe das hatt euch geholfen. Ich persönlich find Floatlinks nämlich extrem praktisch ^^