Cookie-Hinweis Smartphone

12.06.2014

Nach-oben-Link ohne Script

Der Nach-oben-Link, den ich hier beschreibe, ist ein Link, der an die aktive Adresse ein Doppelkreuz anhängt und deshalb dafür sorgt, dass an den Anfang der gleichen Seite gesprungen wird. Der Link funktioniert ohne Script und nützt deshalb auch den Lesern, die Scripts in ihrem Browser nicht zulassen.


Nutzen kann man den Link in der Webversion von Blogs mit Layout-Vorlagen in einem HTML-Gadget und in der Mobilversion des Blogs auch in Posts, wenn man ihn auch über den HTML-Modus des Blogger-Editors in den Posts einträgt. In den Dynamischen Ansichten eignet sich der Link nur in Posts, wenn man Classic oder Sidebar als Standardansicht eingestellt hat und daneben alle anderen Ansichten ausgeblendet hat. In Postansichten anderer Ansichten und in Adressen, die nach Ansichtswechseln entstehen, funktioniert der Link nämlich nicht.


HTML-Code des Links


Man kann entweder oder verlinken:
  1. Worte <a href="#">nach oben</a>
  2. Sonderzeichen <a href="#">&#9650;</a>
  3. Bild <a href="#"><img src="BILDADRESSE" /></a>

Den Link setzt man in einen Div-Container mit einem Klassennamen, damit man den Link darin speziell gestalten kann. So sieht das beispielsweise komplett aus:

<!-- Nach-oben-Link - - - HTML - - - Gadget -->
<div class="nachoben">
<a href="#">&#9650;</a>
</div>

Wird man den Nach-oben-Link sowohl in ein HTML-Gadget als auch in jeden Post setzen, muss man die Div-Klasse in den Posts anders nennen, weil die Links in Posts sonst nicht anders gestaltet werden können, als der Link, der über das Gadget erscheint. Ich schlage innerhalb von Posts deshalb vorsichtshaber grundsätzlich "nachoben2" als Klasse für den Div-Container vor.

<!-- Nach-oben-Link - - - HTML - - - Posts -->
<div class="nachoben2">
<a href="#">&#9650;</a>
</div>

Wechselt man jedoch beim Bearbeiten eines Posts vom HTML-Modus zum Verfassen-Modus im Blogger-Editor, dann wird von Blogger die Zielangabe für den Nach-oben-Link in dem Post verändert. Vor das Doppelkreuz setzt Blogger dann die Adresse, die zum Dashboard des Blog führt. Man muss das Linkziel in diesem Fall also immer erst korrigieren und dann ohne weiteren Moduswechsel den Post verlassen.

Gestaltung des Links im HTML-Gadget


Setzt man den Link in ein HTML-Gadget, kann man auch die Gestaltungskommandos gleich darunter zwischen Style-Klammern setzen.

<!-- Nach-oben-Link - - - Style -->
<style>
/* Nach-oben-Link-Positionierung */
.nachoben {
position:fixed;
right:10px;
bottom:10px;
}
/* Nach-oben-Link-Gestaltung */
.nachoben a {
padding:3px;
font-size:200%;
color:white !important; /* Falls der Hintergrund hell ist, andere Farbe wählen! */
}
/* Nach-oben-Link bei Maus drüber */
.nachoben a:hover {
text-decoration:none !important;
}
/* Gadget-Nichtanzeige */
#HTML5 { /* Welche Nummer das eigene Gadget hat, muss man im Quelltext nachsehen */
margin:0px;
box-shadow:none;
border:0px;
padding:0px;
background-color:transparent;
}
</style>


So sieht das dann aus:


Gestaltung des Links im Post


Setzt man den Link im HTML-Modus des Blogger-Editors unten in jeden Post, trägt man die dazugehörigen Gestaltungskommandos am besten unter Vorlage > Anpassen > Erweitert > CSS hinzufügen ein. Will man die Gestaltung des Links nämlich mal irgendwann ändern, muss man das nicht in jedem Post tun.

Da man den Nach-oben-Link sowohl in ein HTML-Gadget als auch in jeden Post setzen kann und man den Div-Container in den Posts dann einer anderen Klasse zuordnen muss, als derjenigen, die man für den Link im Gadget verwendet, habe ich die Gestaltungscodes für den Nach-oben-Link in den Posts für die zweite Div-Klasse geschrieben, die ich oben grundsätzlich für die Verwendung des Links in Posts vorgeschlagen habe: .nachoben2.

/* Nach-oben-Link-Ausrichtung */
.nachoben2 {
text-align:right;
}
/* Nach-oben-Link-Gestaltung */
.nachoben2 a {
border-radius:5px;
border:1px solid black;  /* Falls der Hintergrund dunkel ist, andere Farbe wählen! */
padding:3px;
color:black;  /* Falls der Hintergrund dunkel ist, andere Farbe wählen! */
}
/* Nach-oben-Link bei Maus-drüber */
.nachoben2 a:hover {
text-decoration:none;
}


So sieht das dann aus:



Will man den Link in jeden Post setzen, dann kann man das für neue Posts ganz bequem automatisch über die Post-Vorlage machen. Die findet man unter Einstellungen > Posts und Kommentare > Posts > Vorlage veröffentlichen Wenn man in der Vorlage über dem Link-Code auch zwei Leerzeilen einträgt und darüber ein X, dann sieht man auch im Verfassen-Modus des Blogger-Editors später immer sofort, wo man seinen eigentlichen Post-Inhalt schreiben kann.

Aber auch wenn das soweit sehr bequem ist, muss man dennoch stets daran denken, dass man vor dem Veröffentlichen/Aktualisieren die Korrektheit des Linkziels kontrollieren und ggf. korrigieren muss. Da darf nur ein Doppelkreuz als Ziel stehen.

Man wird sich deshalb zuletzt immer im HTML-Modus des Editors befinden müssen, wenn man veröffentlicht/aktualisiert.


Ute Ziemes, sg.utez.de,

0 Kommentare:

Kommentar veröffentlichen