Hover-Menü mit Unterkategorien in Blogger erstellen

Um so ein Menü wie auf dieser DEMOSEITE in Deinen Blog einzubinden gehe wie folgt vor:

“Am Ende dieses Tutorials findest Du auch ein Video Tutorial zum Einbinden aller Notwendigen HTML Codes in Deinen Blogger Blog”

Bevor wir anfangen beachte bitte, dass Du aus Sicherheitsgründen immer eine Kopie des bestehenden HTML Source Codes vornehmen solltest bevor Du Änderungen am Code selbst vornimmst.

1. Sicherheitskopie

Gehe im Blogger Dashboard zu “Vorlage” dann oben rechts auf “Backup/Wiederherstellung”.

Klick auf “Vollständige Vorlage herunterladen”. Dies speichert Dein Template als .xml Datei und ist damit jederzeit wieder heraufladbar und stellt Deinen Blog in der letzten Version wieder her.

2. Einfügen von Notwendigen HTML Codes um das neue Menü zu erstellen.

Gehe im Blogger Dashboard auf “Vorlage” dann “HTML bearbeiten”. Mach einen Haken in die kleine Box oben “Widget Vorlagen komplett anzeigen”.

Drücke/Halte nun die “STRG” und  die “F” Taste. Ein kleines Eingabefeld öffnet sich auf der rechten oberen Seite.

Kopiere folgenden roten Code von hier ]]></b:skin> und füge diesen in das kleine Suchfeld ein. Dieser Code sollte nun im Haupteditor orangefarben unterlegt sein.

Kopiere nun den kompletten HTML Code aus der unteren Box und füge diesen direkt vor dem ]]></b:skin>  Code ein.

/* ----- NAVBAR MENU ----- */ #NavbarMenu { width: 850px; height: 30px; background:#FFFFFF url(http://visualbasix.com/image/plainbgrnd.png) repeat-x top; color: #3D81EE margin: 0 auto 0; padding: 0; font: bold 18px Calibri, Calibri, Calibri; /*--- Hier unten können Sie die obere und untere Linie des Hauptrmenüs ändern/entfernen---*/ border-top: 1px solid #000000; border-bottom: 1px solid #000000; } #NavbarMenuleft { width: 950px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited  /*--- Hier unten können Sie die Textfarbe des Hauptrmenüs ändern---*/ { color: #000000; display: block; text-transform: capitalize; margin: 0; padding: 1px 15px 8px; /*--- Hier unten können Sie die Textgröße und Schriftart des Hauptrmenüs ändern---*/ font: normal 20px Calibri, Calibri; } #nav li a:hover, #nav li a:active { /*--- Hier unten können Sie die mouseover Textfarbe des Hauptrmenüs ändern---*/ background:#FFFEFC; color: #000000; margin: 0; padding: 1px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited /*--- Hier unten können Sie die Farbe der Trennlinien des Untermenüs ändern---*/ {background: #FFFFFF url(http://visualbasix.com/image/plainbgrnd.png) repeat-x top; width: 150px; color: #000; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFFEFC; border-left: 1px solid #FFFEFC; border-right: 1px solid #FFFEFC; /*--- Hier unten können Sie die Textgröße und die Schriftart des Untermenütextes ändern---*/ font: normal 16px Calibri, Calibri; } #nav li li a:hover, #nav li li a:active { background: #FFFEFC; /*--- Hier unten können Sie die mouseover Textfarbe des Untermenüs ändern---*/ color: #000000; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -34px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

Wenn dieser Code nun eingefügt wurde gehe wieder zu dem kleinen Eingabefeld auf der rechten oberen Seite. Dort dürfte noch das alte “Snippet” ]]></b:skin>  verweilen.

Kopiere diesen roten </Header> Text und füge diesen in die Box ein. Dieses Snippet sollte nun in dem Editor auch orangefarben unterlegt sein.

Kopiere nun den unteren Code aus der Box und füge diesen direkt vor dem </header> Snippet ein.

<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href=' http://visualbasix.info '>Seite 2</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 2a</a></li> <li><a href='http://visualbasix.info'>Unterseite 2b</a></li> <li><a href='http://visualbasix.info'>Unterseite 2c</a></li> <li><a href='http://visualbasix.info'>Unterseite 2d</a></li> <li><a href='http://visualbasix.info'>Unterseite 2e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 3</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 3a</a></li> <li><a href='http://visualbasix.info'>Unterseite 3b</a></li> <li><a href='http://visualbasix.info'>Unterseite 3c</a></li> <li><a href='http://visualbasix.info'>Unterseite 3d</a></li> <li><a href='http://visualbasix.info'>Unterseite 3e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 4</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 4a</a></li> <li><a href='http://visualbasix.info'>Unterseite 4b</a></li> <li><a href='http://visualbasix.info'>Unterseite 4c</a></li> <li><a href='http://visualbasix.info'>Unterseite 4d</a></li> <li><a href='http://visualbasix.info'>Unterseite 4e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 5</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 5a</a></li> <li><a href='http://visualbasix.info'>Unterseite 5b</a></li> <li><a href='http://visualbasix.info'>Unterseite 5c</a></li> <li><a href='http://visualbasix.info'>Unterseite 5d</a></li> <li><a href='http://visualbasix.info'>Unterseite 5e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 6</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 6a</a></li> <li><a href='http://visualbasix.info'>Unterseite 6b</a></li> <li><a href='http://visualbasix.info'>Unterseite 6c</a></li> <li><a href='http://visualbasix.info'>Unterseite 6d</a></li> <li><a href='http://visualbasix.info'>Unterseite 6e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 7</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 7a</a></li> <li><a href='http://visualbasix.info'>Unterseite 7b</a></li> <li><a href='http://visualbasix.info'>Unterseite 7c</a></li> <li><a href='http://visualbasix.info'>Unterseite 7d</a></li> <li><a href='http://visualbasix.info'>Unterseite 7e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 8</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 8a</a></li> <li><a href='http://visualbasix.info'>Unterseite 8b</a></li> <li><a href='http://visualbasix.info'>Unterseite 8c</a></li> <li><a href='http://visualbasix.info'>Unterseite 8d</a></li> <li><a href='http://visualbasix.info'>Unterseite 8e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 9</a> <ul> <li><a href='http://visualbasix.info'>Unterseite 9a</a></li> <li><a href='http://visualbasix.info'>Unterseite 9b</a></li> <li><a href='http://visualbasix.info'>Unterseite 9c</a></li> <li><a href='http://visualbasix.info'>Unterseite 9d</a></li> <li><a href='http://visualbasix.info'>Unterseite 9e</a></li> </ul> </li> <li><a href='http://visualbasix.info'>Seite 10</a></li> </ul> </div> </div> <!-- end navbar -->

Klick nun auf “Vorschau” und Dein Menü dürfte oben erscheinen. Wenn das Menü so erst einmal zufriedenstellend ist, klick auf “Vorlage speichern” und dann auf “Blog anzeigen”.

Und hier ist das Video Tutorial zum Einbinden des HTML Code in Blogger:

3. Das Verwalten/Erstellen/Verteilen von Links, Labels, Kategorien und Unterkategorien

Hier werden Fragen beantwortet die sich mit dem gestalterischen Teil des HTML Codes befassen. Sollten Sie fragen zur Bearbeitung oder Erweiterung des HTML Codes haben senden Sie Ihre Anfrage bitte mit dem Hilfe Formular.


Leserfragen:

1. Frage: Wie kann ich das Menü zentrieren, also in die Mitte setzen?

Antwort: Gehe zurück zum HTML Editor unter Vorlage und setze folgenden Code, wie im Video gezeigt ein. Kopiere folgenden Code:

margin-left:auto;

margin-right:auto;