Mini-Menü fixiert eingebaut

Anleitung um ein kleines Icon-Menü im Blog einzubauen.
Um zum Beispiel Sozial Network Icons (Facebook, Twitter etc.) oder auf bestimmte Blog-Seiten zu verlinken.

Beispiel:

  1. RSS-Feed rss_icon
  2. Home (Startseite) home_icon
  3. Kontakt kontakt_icon

Für das Menue ein div-Container namens mini-nav und dort die drei links einfügen.
In dem Link wird statt eines Textes das Icon aus dem Theme eingefügt.

<div id="mini-nav">
<a title="News abonnieren (RSS-Feed)" href="/feed/"><img src="http://blog.funkygog.de/wp-content/themes/funkygog-Theme/images/rss_icon.gif" alt="RSS Feed abonnieren" /></a>
...
</div>

Es erscheinen somit: rss_icon home_icon kontakt_icon

Es empfiehlt sich, diesen Code in der footer.php einzutragen um die Ladezeit der Website nicht zu beeinträchtigen.

Styling Angaben

Angabe in der style.css:
#mini-nav {
left:23px;
position:fixed;
top:37px;
width:20px;
}
#mini-nav img, a img {
margin:1px;
border:0 none;
}

Anmerkung zu position:fixed
fixed = absolute Positionierung, bezogen auf den sichtbaren Bildausschnitt im Browserfenster. Dieser Bereich bleibt beim Scrollen stehen. [mehr Infos]

Falls ein Styling für den Druckbereich vorliegt (z. B. print.css)
empfiehlt es sich das Mini-Menü im Ausdruck zu deaktivieren:
#mini-nav {
display: none;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.