Man kann im HTML zwar alternativ einen Div-Container mit Klassen-Name oder ID direkt oberhalb des navbar-Abschnitts eintragen, um dennoch etwas im oberen Bereich des Blogs anzeigen zu lassen, das sich auf die gesamte Screenbreite auswirkt, wer das aber lieber in ein HTML-Gadget setzen und vom Layout aus verwalten würde, der kann das ermöglichen, wenn er die folgenden Schritte durchführt:
Anleitung:
- Unter Vorlage > HTML bearbeiten etwas runter scrollen, bis zu der folgenden Zeile:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
In dieser Zeile die '1' in '4' ändern und 'no' in 'yes' - Auf "Vorlage speichern" klicken und warten bis das erledigt ist.
- Auf "Zurück" klicken.
- Sollte das Programm melden, es wäre etwas nicht gespeichert, kann das ignoriert werden.
- Auf "Layout" klicken.
- Neben der Browser-Eingabe-Zeile auf den "Aktuelle Seite neu laden"-Pfeil klicken; denn eventuell wird erst dadurch die Anzeige im Layout aktualisiert, so dass das "Gadget hinzufügen"-Feld im navbar-Bereich zu sehen ist
Die HTML-Gadgets sind automatisch so eingestellt, dass man sie überhaupt verschieben kann. Will man auch die Navbar verschieben können, muss man unter "HTML bearbeiten" in der obersten Zeile des Navbar1-Widgets hinter locked das Wort "true" gegen "false" tauschen. Da die Navbar aber "absolute" positioniert ist, wird es wohl egal sein, wo sie innerhalb des Abschnitts "navbar" einsortiert ist.
 |
| navbar-section unter "HTML bearbeiten" (Pfeile ungeklickt) mit HTML-Widget und Navbar |
 | ||||||||
| navbar-Abschnitt unter Layout mit hinzugefügtem HTML-Gadget |
Nutzen
Nun kann man sich mit einem HTML-Gadget eine eigene Navbar bauen oder einen eigenen Cookie-Hinweis oder beides, wenn man mit CSS tüfteln kann oder zwei Gadgets verwendet.Man kann das Navbar-Widget weiterhin aktiviert lassen und weitere Gadgets darunter setzen. Aber wegen des CSS des Navbar-Gadgets (z.B. seiner absoluten Ausrichtung) ist das schwieriger zu gestalten als wenn man per HTML-Gadget einen Navbar-Ersatz anzeigen lässt. Ratsamer ist es deshalb, die Navbar auf "Aus" zu stellen.
Fügt man mehere Gadgets hinzu und will Gadget-Titel eintragen, damit man unter "Layout" sofort sieht um welches Gadget es sich handelt, muss man per CSS den Titel ausblenden, weil er sonst auch im Blog angezeigt würde.
So kann man Gadget-Titel in dem navbar-Bereich grundsätzlich ausblenden:
#navbar .HTML .title {
display:none;
}
Anregungen für Code:
Wenn man nur eine Blende über die linke Häfte der Navbar setzen will, findet man dort Code für diesen Zweck: "Blende auf linke Hälfte der Navbar legen" Web | Mobil nachlesen. Wenn man die 50% für die Breite auf 100% setzt, kann man das auch für einen kompletten Navbarersatz nutzen. Wenn man das CSS aus diesen Beispielen nicht in das Gadget, sondern unter "CSS hinzufügen" einträgt, muss man dort die Style-Klammern weglassen. Die Codes sind zwar ursprünglich dafür gemacht, sie direkt in das HTML oberhalb des navbar-Abschnitts einzutragen, wirken wegen ihrer absoluten Positionierung aber innerhalb des Navbar-Bereichs genauso, wenn man das positionierende Style-Kommando nicht nur für .navbarblende, sondern auch für das HTML-Gadget einträgt. Hier im Blog zum Beispiel so:
#HTML13, .navbarblende {
Navbar und verlinkte Navbarblende oder Navbarersatz sind "absolute" ausgerichtet und befinden sich auf einer höheren Schicht. Will man weitere HTML-Gadgets einsetzen, rutschen diese deshalb nicht automatisch darunter. Man muss für folgende Gadgets deshalb entweder einen passenden Abstand nach oben definieren oder diese Gadgets ebenfalls "absolute" positionieren.
Hat man die Navbar auf "Aus" gestellt und setzt mehrere HTML-Gadgets ein, ist es das Beste, sie nicht "absolute" zu positionieren. Sie stellen sich dann automatisch untereinander. Allerdings muss man bedenken, dass für Widgets ein Abstand vorgegeben ist. Mit dem folgenden CSS-Kommando kann man ihn im navbar-Abschnitt jedoch grundsätzlich außer Kraft setzen.
#navbar .widget {
margin:0px;
}
Will man für ein bestimmtes Gadget dennoch einen Abstand haben, könnte es sein, dass man dem Kommando für dieses Gadget ein !important anhängen muss.
Setzt man nur ein "relative" positioniertes Gadget ein und floatet die Inhalte, dann könnte das folgende Kommando ergänzend wichtig sein, damit die Breite des Blogtitels nicht beeinträchtigt wird.
.header-inner {
clear:both;
}
 |
| Navbarersatz mit Suchfeld, Cookie-Hinweis und Links - "relative" positioniert |
Anzeige in der Mobil-Version des Blogs
HTML-Gadgets werden in der Mobil-Version des Blogs nicht standardmäßig angezeigt. Ist die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt, kann man jedoch im HTML eintragen, dass das Gadget auch in der Mobil-Version angezeigt werden soll. Dazu muss man unter "HTML bearbeiten" via "Weiter zum Widget" zum entsprechenden Gadget springen und dort in der obersten Zeile das im folgenden Beispiel rot gefärbte ergänzen.
<b:widget id='HTML2' locked='false' mobile='yes' title='Navi' type='HTML'>
Man kann für die Mobil-Version auch andere CSS-Kommandos eintragen. Den Abschnitten, die man ansteuert, muss zu dem Zweck ein .mobile vorangesetzt werden.
Will man ein Gadget nur in der Mobilversion anzeigen, sollte man nicht das Kommando mobile="only", welches Fehler produziert, verwenden, sondern ebenfalls mobile="yes" und zusätzlich mittels CSS das Gadget in der Web-Version ausblenden.
Beispiel:
#HTML2 {
display: none;
}
Soll ein bloginterner Link in der Web-Version als Web-Link angezeigt werden und in der Mobil-Version mit der mobilen Adresse, dann kann man ihn zweimal in das Gadget, direkt hntereinander eintragen und dem a des ersten Links die Klasse "desktop" zuweisen und dem a des zweiten Links die Klasse "smartphone". Dann kann man mittels CSS in der Web-Version nur den einen und in der Mobil-Version nur den anderen Link anzeigen lassen.
Beispiel:
HTML
<a class="desktop" href="http://sg.utez.de/2014/02/blende-auf-linke-haelfte-der-navbar-legen.html">Blende auf ...</a><a class="smartphone" href="http://sg.utez.de/2014/02/blende-auf-linke-haelfte-der-navbar-legen.html">Blende auf ...</a>
CSS
a.desktop {
display: block;
}
.mobile a.desktop {
display: none;
}
a.smartphone {
display: none;
}
.mobile a.smartphone {
display: block;
}
 |
| Aus dem Navbarersatz in der Mobil-Version nur den Cookie-Hinweis mit mobilem Link übernommen. |
Ute Ziemes, sg.utez.de,
0 Kommentare:
Kommentar veröffentlichen