Cookie-Hinweis Smartphone

11.02.2014

Blende auf linke Hälfte der Navbar legen

Während man die rechte Hälfte der Navbar für An- und Abmeldung und schnellen Zugriff auf Admin- oder Autorenbereiche vom Blog aus gut gebrauchen kann, weil das eine komfortable Ergänzung zur Zugriffsmöglichkeit über das Dashboard ist und auch die dort angezeigte Mailadresse einem zweifelsfrei zeigt, in welchem Googlkonto man gerade angemeldet ist, kann man nach meinem Geschmack von der linken Hälfte der Navbar jedoch nur den Link zu Blogger und das Suchfeld gebrauchen. Was von der Navbar angezeigt werden soll und was nicht, kann man sich im Gadget selbst aber leider nicht aussuchen. Von dort aus kann man die Navbar nur komplett einblenden oder komplett ausblenden.

Man kann aber eine Blende mit oder ohne Inhalt auf die linke Hälfte der Navbar legen. Auch nur auf einen Teil der linken Hälfte, wie beispielsweise dort:


Die Blende sollte man jedoch nur dann eintragen, wenn man entweder eine benutzerdefinierte Mobilvorlage nutzt und deshalb die Anzeige der Blende in der Mobilversion des Blogs mittels CSS verhindern kann oder wenn man die mobile Ansicht des Blogs nicht freigegeben hat. Denn die Blende liegt sonst auch in der Mobilversion des Blogs und da stört sie.
Nachtrag 06.02.2016:
Man kann die unten stehenden Codes auch statt für eine Navbar-Blende für einen Navbar-Ersatz nutzen. Dazu muss man die Breite nur auf 100% setzen.

Für diesen Fall findet man in dem Post Im "navbar"-Abschnitt ein Feld zum "Gadget hinzufügen" ergänzen  Web  |  Mobil  , als Alternative zum Eintrag der Codes direkt in das HTML, beschrieben, wie man leicht abweichenden Code auch in ein HTML-Gadget eintragen kann, das man im Navbarbereich hinzugefügt hat, nachdem man ihn für das Hinzufügen weiterer Gadgets vorbereitet hat.



Hier im Post werden für verschiedene Navbar-Blenden Code-Muster genannt, es wird beschrieben, was man wie vorbereiten muss, bevor man die Codes einträgt und wo man den Code für die Blende eintragen muss.


Navigation innerhalb des Posts





Allgemeines zur Blende und den Code-Mustern


Der für die Blende notwendige Code besteht aus zwei Teilen, zum einen aus einem Div-Container, in den man eventuell noch Inhalt setzt, wie etwa Suchfeld, Text oder Links oder Kombinationen davon und zum anderen aus einem Bereich, um die Blende und ihren eventuellen Inhalt zu stylen, also aus CSS-Kommandos, die man zwischen Style-Klammern setzt. Man könnte die Style-Codes ohne Style-Klammern drumrum auch alternativ unter "CSS hinzufügen" eintragen. Hier in den Code-Mustern habe ich sie aber so geschrieben, dass man sie ins HTML direkt unter den Div-Container setzt.

Da der Code für die Blende im HTML über der Navbar eingetragen wird, würde die Blende ohne Gestaltungskommandos nicht auf der Navbar sondern über ihr stehen, nämlich so:



Die grundlegenden Style-Kommandos für die Blende habe ich von den grundlegenden Style-Kommandos der Navbar abgekupfert und im Wesentlichen nur die Breite von 100% auf 50% verringert und die Blende auf die nächst höhere Schicht, nämlich z-index: 11; gelegt. Die Inhalte habe ich nicht, wie in der Navbar in eine Tabelle gesetzt, daher weicht die Gestaltbarkeit dafür von der Navbar ab. Die Codes für die Blenden funktionierten bei Tests nicht von einem HTML-Gadget aus. Daher habe ich unter "HTML bearbeiten" eine Stelle gesucht und gefunden, von wo aus sie funktionieren.

Die Blende ist, genau wie die Navbar, insgesamt 30px hoch, wovon 1px die untere Rahmenlinie ist, der Inhalt ist also maximal 29px hoch.

Das erste Gestaltungskommando in den Code-Mustern ist zum Selektor .mobile und dafür da, dass die Blende in der Mobilversion des Blogs nicht angezeigt wird. Das Kommando kann nur in einem Blog wirken, dessen Mobilvorlage erfolgreich auf "Benutzerdefiniert" gestellt ist.

In den Code-Mustern ist Text zwischen den folgenden Zeichen eine Anmerkung des Verfassers, wie man sie im HTML notiert:
<!-- HTML-Anmerkung -->
Sie wird nur im Quelltext, nicht auf der Blogseite angezeigt. Weitere Minuszeichen dürfen da links und rechts nicht stehen und zwei hintereinander sollte man auch innerhalb der Anmerkung vermeiden.

Text zwischen den folgenden Zeichen ist dort eine Anmerkung des Verfassers, wie man sie im CSS oder innerhalb von Style-Klammern notiert:
/* CSS-Anmerkung */
Sie wird nur im Quelltext, nicht auf der Blogseite angezeigt. Weitere Sternchen dürfen da nicht stehen.

Wenn die Blende Inhalt hat, ist das Kommando whitespace:nowrap; übrigens deshalb wichtig, weil sonst Teile des Inhalts bei schmalem Monitor/Display in eine nächste Zeile umbrechen könnten.


Blende wählen


Folgend habe ich zu sechs verschiedenen Blenden Beispielbilder und Code-Muster gelistet.


Blende nur mit Hintergrundfarbe oder Hintergrundbild

Bilder von Beispielen:
Blende mit Hintergrundfarbe

Blende mit Hintergrundbild

Die Codes unterscheiden sich nur in der background-Zeile. Ich nutze in allen Code-Mustern die background-Zeile für eine Hintergrundfarbe, sie kann aber gegen eine background-Zeile für ein Hintergrundbild getauscht werden.


background-Zeile für Hintergrundfarbe:

    background: none repeat scroll 0% 0% HINTERGRUNDFARBE;

Die exakt gleiche Hintergrundfarbe wie die der rechten Hälfte der Navbar ausfindig zu machen, ist je nach Navbartyp nicht leicht. Der Farbpicker "Rainbow" kann die Farbe, die man da sieht, im Navbarbereich nicht ermitteln. Bei den Navbars die hell oder dunkel transparent auf einem Hintergrundbild stehen, ist eh jeder Pixel anders gefärbt. Die scharze Navbar ist mit dem Farbwert black gut bedient. Wenn man einen Screenshot  von der Navbar macht und als png-Datei (damit die Farbwiedergabe möglichst authentisch ist) speichert und diese in einen Post-Entwurf lädt und dann den Farbpicker benutzt, müsste man aber die Farbe treffen oder sehr nah an sie rankommen.


background-Zeile für Hintergrundbild:

    background: url("BILDADRESSE") repeat fixed right center FARBWERT;

Als Hintergrundbild eignet sich ein mindestens 29px hohes und 1800px breites Bild (1800px Breite um ganz sicher alle möglichen Monitorbreiten zu bedienen). Mit einem etwas abgewandelten Background-Code könnte man auch ein ganz kleines Bild nehmen, das sich andauernd in alle Richtungen wiederholt.

Die orange gefärbten Werte in der background-Zeile für ein Hintergrundbild waren speziell bei meinem Hintergrundbild mit dem ich getestet habe, passend. Man kann da andere wählen. Infos dazu: SELFHTML: Hintergrundfarben und -bilder Hier fixed statt scroll zu benutzen, was man eigentlich für mit wegscrollende Bilder nutzt, war kein Problem und brachte bei meinem Bild ein besseres Ergebnis.


Komplettes Code-Muster dazu (mit background-Zeile für Hintergrundfarbe):

<!-- Navbarblende Anfang HTML -->
<aside>
<div class="navbarblende">
</div>
</aside>
<!-- Navbarblende Ende HTML -->

<style>
/* Navbarblende Anfang CSS */
.mobile .navbarblende {
    display: none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
}
/* Navbarblende Ende CSS */
</style>



Blende mit Text darin

Bild eines Beispiels:

Code-Muster dazu:

<!-- Navbarblende Anfang HTML -->
<aside>
<div class='navbarblende'>
  <div class='navbarblendetext'>
TEXT, DER DA STEHEN SOLL
  </div>
</div>
</aside>
<!-- Navbarblende Ende HTML --> ;

<style>
/* Navbarblende Anfang CSS */
.mobile .navbarblende {
    display:none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
    white-space: nowrap;
}
.navbarblendetext {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin-left: 7px;
    padding-top: 7px;
    color: TEXTBEREICH-SCHRIFTFARBE;
}
/* Navbarblende Ende CSS */
</style>



Blende mit Links darin

Bild eines Beispiels:
Dazu ist der Code

Dazu müsste der Code etwas geändert werden


Man kann statt Worten auch kleine Bilder verlinken, höher als maximal 25px sollten sie aber nicht sein. Auch müssten die Abstände dann im Code-Muster angepasst werden. Wort- und Bild-Links mischen geht, ist wegen der Abstände aber schwierig, wenn die Worte nicht genauso hoch sind wie die Bilder. Um Bilder zu verlinken ersetzt man die Linkzeilen im Code-Muster mit einer solchen Zeile:

<li><a href="LINKADRESSE" target="_blank"><img border="0" src="BILDADRESSE" /></a></li>

Allzuviele Links kann man in einer halben Navbar nicht unterbringen, zumal sie keine feste Breite hat, sondern 50% der jeweiligen Fensterbreite einnimmt.

Code-Muster dazu:

<!-- Navbarblende Anfang HTML -->
<aside>
<div class='navbarblende'>
  <ul>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
 </ul>
</div>
</aside>
<!-- Navbarblende Ende HTML -->

<style>
/* Navbarblende Anfang CSS */
.mobile .navbarblende {
    display: none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
    white-space: nowrap;
}
.navbarblende ul {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 6px 0px 5px 10px;
    padding: 0px;
    list-style: none;
    font-size: 13px;
    font-weight: bold;
}
.navbarblende li {
    float: left;
}
.navbarblende a {
    padding-right: 1em;
    color: LINKFARBE;
    text-decoration: none;
}
.navbarblende a:hover {
    color: LINKFARBE BEI HOVER;
    text-decoration: underline;
}
/* Navbarblende Ende CSS */
</style>



Blende mit Suchfeld darin

Hinweis vorweg: Den Formular-Code für das Suchfeld, den ich darin verwende, hatte ich dort vorgestellt: Ersatz für das defekte Suchfeld-Gadget - siehe Punkt 2.

Bild eines Beispiels:


Die Formularanteile passend zu stylen und optimale Abstände dafür zu kommandieren ist ein Höllengefummel, deshalb rate ich, daran nichts zu ändern. Will man es etwas weniger hoch und weniger auffällig haben, kann man alternativ das Code-Muster für die Formularteile aus der übernächsten Blende nutzen.

Unproblematisch ist es aber, die Breite des Suchfelds zu beeinflussen. Im Formular steht size='25' für die angezeigte Breite des Bereichs im Suchfeld, in die man den Suchbegriff tippen kann. Durch Eintrag eines höheren oder niedrigeren Wertes als 25 kann man diesen Bereich breiter oder schmaler machen. Im Style-Bereich kann man außerdem unter .navbarblende #search-box die seitlichen Innenabstände größer oder kleiner machen, also die Werte von padding:right und padding:left ändern.

Beim Textschatten im Suchbutton handelt es sich um eine Linie um die Buchstaben herum. Man kann ihn weglassen. Dazu muss man die komplette Zeile löschen. Will man ihn nutzen, dann muss man da immer die gleiche Farbe eintragen.

Code-Muster dazu:

<!-- Navbarblende Anfang HTML -->
<aside>
<div class='navbarblende'>
  <form action='/search' id='searchthis' method='get'>
    <input id='search-box' name='q' size='25' type='text'/>
    <input id='search-btn' type='submit' value='Suchen'/>
  </form>
</div>
</aside>
<!-- Navbarblende Ende HTML -->

<style>
/* Navbarblende Anfang CSS */
.mobile .navbarblende {
    display: none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
    white-space: nowrap;
}
.navbarblende form {
    display: inline-block;
}
.navbarblende #search-box {
    margin-right: 2.5px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    background-color: SUCHFELD-HINTERGRUNDFARBE;
    font-size: 14px;
    font-weight: bold;
}
.navbarblende #search-btn {
    height: 25px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 0px 25px;
    background-color: SUCHBUTTON-HINTERGRUNDFARBE;
    color: SUCHBUTTON-SCHRIFTFARBE;
    text-shadow: -1px 0px SUCHBUTTON-TEXTSCHATTENFARBE, 0px 1px SUCHBUTTON-TEXTSCHATTENFARBE, 1px 0px SUCHBUTTON-TEXTSCHATTENFARBE, 0px -1px SUCHBUTTON-TEXTSCHATTENFARBE;
    font-size: 15px;
    font-weight: bold;
}
/* Navbarblende Ende CSS */
</style>



Blende mit Text und Suchfeld darin

Bild eines Beispiels:


Code-Muster dazu:

<!-- Navbarblende Anfang HTML -->
<aside>
<div class='navbarblende'>
  <span class='navbarblendetext'>
TEXT, DER VOR DEM SUCHFELD ERSCHEINEN SOLL
  </span>
  <form action='/search' id='searchthis' method='get'>
    <input id='search-box' name='q' size='20' type='text'/>
    <input id='search-btn' type='submit' value='Suchen'/>
  </form>
</div>
</aside>
<!-- Navbarblende Ende HTML -->

<style>
/* Navbarblende Anfang CSS */
.mobile .navbarblende {
    display: none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
    white-space: nowrap;
}
.navbarblendetext {
    margin: 0px 5px 0px 5px;
    background-color: TEXTBEREICH-HINTERGRUNDFARBE;
    color: TEXTBEREICH-SCHRIFTFARBE;
    font-size: 14px;
}
.navbarblende form {
    display: inline-block;
}
.navbarblende #search-box {
    margin-right: 2.5px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    background-color: SUCHFELD-HINTERGRUNDFARBE;
    font-size: 14px;
    font-weight: bold;
}
.navbarblende #search-btn {
    height: 25px;
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 0px 25px;
    background-color: SUCHBUTTON-HINTERGRUNDFARBE;
    color: SUCHBUTTON-SCHRIFTFARBE;
    text-shadow: -1px 0px SUCHBUTTON-TEXTSCHATTENFARBE, 0px 1px SUCHBUTTON-TEXTSCHATTENFARBE, 1px 0px SUCHBUTTON-TEXTSCHATTENFARBE, 0px -1px SUCHBUTTON-TEXTSCHATTENFARBE;
    font-size: 15px;
    font-weight: bold;
}
/* Navbarblende Ende CSS */
</style>



Blende mit Suchfeld und Links darin

Bild eines Beispiels:


Code-Muster dazu:

<!-- Navbarblende Anfang HTML -->
<aside>
<div class='navbarblende'>
  <form action='/search' id='searchthis' method='get'>
    <input id='search-box' name='q' size='20' type='text'/>
    <input id='search-btn' type='submit' value='Suchen'/>
  </form>
  <ul>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
 </ul>
</div>
</aside>
<!-- Navbarblende Ende HTML -->

<style>
/* Navbarblende Anfang CSS */
    .mobile .navbarblende {
    display: none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    left: 0px;
    width: 50%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
    white-space: nowrap;
}
.navbarblende ul {
    position: absolute;
    z-index: 11;
    right: 10px;
    width: 50%;
    height: 29px;
    margin: 6px 0px 5px 10px;
    padding: 0px;
    list-style: none;
    font-size: 13px;
    white-space: nowrap;
}
.navbarblende li {
    float: right;
}
.navbarblende a {
    padding-right: 1em;
    color: LINKFARBE;
    text-decoration: none;
}
.navbarblende a:hover {
    color: LINKFARBE BEI HOVER;
    text-decoration: underline;
}
.navbarblende form {
    float: left;
    margin-top: 4.5px;
    margin-left: 2.5px;
    display: inline-block;
}
.navbarblende #search-box {
    margin-right: 2.5px;
    padding-right: 5px;
    padding-left: 5px;
    box-shadow: 0px 0px 0.05px SUCHFELD-SCHATTENFARBE inset;
    border: none;
    border-radius: 5px;
    background-color: SUCHFELD-HINTERGRUNDFARBE;
    font-size: 13px;
}
.navbarblende #search-btn {
    margin-top: 0px;
    margin-right: 10px;
    padding: 1px;
    box-shadow: 0px 0px 2.5px SUCHBUTTON-SCHATTENFARBE inset;
    border: none;
    border-radius: 5px;
    background-color: SUCHBUTTON-HINTERGRUNDFARBE;
    color: SUCHBUTTON-TEXTFARBE;
    font-size: 13px;
}
.navbarblende #search-btn:hover {
    color: SUCHBUTTON-TEXTFARBE BEI HOVER;
}
/* Navbarblende Ende CSS */
</style>



Blende mit Links erst hinter dem Original-Suchfeld
Da die Breiten für das Blogger-Logo und das Suchfeld in der Navbar in Pixel angegeben sind, kann man die Blende auch erst dahinter setzen.

Bild eines Beispiels:

Weil im Beispiel die Blendenfarbe identisch mit der Navbarfarbe ist, habe ich dort die 50px im Border-Radius auf Null gestellt.


Code-Muster dazu:

<!-- Navbarblende Anfang HTML -->
<aside>
<div class='navbarblende'>
  <ul>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
    <li><a href='LINKADRESSE' target='_blank'>LINKTEXT</a></li>
 </ul>
</div>
</aside>
<!-- Navbarblende Ende HTML -->

<style>
/* Navbarblende Anfang CSS */
.mobile .navbarblende {
    display: none;
}
.navbarblende {
    position: absolute;
    z-index: 11;
    top:0px;
    left: 188px;
    width: 40%;
    height: 29px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid BLENDE-RAHMENFARBE;
    border-radius: 0px 0px 50px 0px;
    background: none repeat scroll 0% 0% BLENDE-HINTERGRUNDFARBE;
    white-space: nowrap;
}
.navbarblende ul {
    position: absolute;
    z-index: 11;
    left: 0px;
    height: 29px;
    margin: 6px 0px 5px 10px;
    padding: 0px;
    list-style: none;
    font-size: 13px;
}
.navbarblende li {
    float: left;
}
.navbarblende a {
    padding-right: 1em;
    color: LINKFARBE;
    text-decoration: none;
}
.navbarblende a:hover {
    color:LINKFARBE BEI HOVER;
    text-decoration: underline;
}
/* Navbarblende Ende CSS */
</style>



Umsetzung


Allgemeine Hinweise zu Änderungen unter "HTML bearbeiten"

Nimmt man Änderungen unter "HTML bearbeiten" vor, ist es wichtig, dass man parallel dazu keine anderen Abteilungen geöffnet hat und "HTML bearbeiten" auch erst dann öffnet, wenn man Änderungen unter anderen Abteilungen bereits abgeschlossen hat. Das geöffnete HTML ändert sich nämlich nicht, wenn man parallel in einer anderen Abteilung etwas ändert. Ändert und speichert man dann das HTML, dann speichert man eine geänderte frühere Version und verwirrt letztlich das Programm. Paralleles Bearbeiten in den verschiedenen Abteilungen ist deshalb eine typische Misserfolgsursache und bringt verschrobene Ergebnisse. Zumindest ist das dann so, wenn man "Layout" und "CSS hinzufügen" und "HTML bearbeiten" gleichzeitg geöffnet hat. Es gibt Kombinationen, wo das nicht so ist. Vorsichtshalber sollte man aber immer erst eine Abteilung schließen, bevor man in einer anderen etwas macht.

Alle unten stehenden Schritte müssen deshalb unbedingt nacheinander durchgeführt werden und die einzelnen Abteilungen müssen immer erst verlassen werden, bevor man von da aus in die nächste wechselt.


Notwendige Vorbereitungen

Vor allem anderen muss man im gewählten Code-Muster erstmal die groß und rot geschriebenen Begriffe durch seine gewünschten Farbwerte ersetzen, damit man überhaupt erst einen fertigen, brauchbaren Code hat.

Die orange gefärbten Werte in den Code-Mustern kann man lassen wie sie sind oder ändern. Beim Bildcode bestimmen sie im wesentlichen den Bildausschnitt. Beim Border-Radius für die Blende ist die Frage, ob man ihn haben will. Er mildert den Disharmonie-Eindruck bei eventuellen Farbbrüchen ab. Braucht man den Radius nicht, dann kann man die Zeile löschen oder den Wert 50px in 0px ändern. Schriftgröße und Schriftgewicht kann man ändern, dannn muss man aber auch den Abstand nach oben korrigieren, damit der Inhalt wieder vertikal mittig steht.

Grundsätzlich ist es ratsam, den Eintrag der Blende zunächst in einem Testblog auszuprobieren. Am besten in einem Testblog, das genauso gestylt ist wie das eigentliche Blog; denn da kann man kontrollieren, ob die Farben, die man für die Blende ausgesucht hat, tatsächlich passend sind.

Wie bei allen Arbeiten unter "HTML bearbeiten" sollte man vorsichtshalber eine Backup-Datei des aktuellen Designs runterladen. Das geht über den Button "Backup/Wiederherstellung" oben rechts unter "Vorlage".


Code für die Blende einfügen
  • Unter "Vorlage" "HTML bearbeiten" anklicken. Steht im geöffneten "HTML bearbeiten"-Feld kaum etwas, dann muss man ein wenig scrollen, damit alles angezeigt wird. Dort muss man den Code für die Blende, bei dem man alle groß geschriebenen Platzhalter bereits durch entsprechende Angaben ersetzt hat, zwischen den beiden Zeilen, die im folgenden Bild markiert sind, einfügen:

    Also zwischen diesen beiden Zeilen:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    DAZWISCHEN DEN DIV-CONTAINER SETZEN
        <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
  • Danach oben links auf "Vorlage speichern" klicken und warten bis das erledigt ist.
  • Schließlich ganz oben auf "Blog anzeigen" klicken und kontrollieren, ob die Blende wunschgemäß aussieht. Falls nicht, kann man nun noch was ändern und speichern.
  • Sobald unter "HTML bearbeiten" alles okay und gespeichert ist, kann man den Tab/das Fenster mit der Blog-Ansicht schließen und muss man im Tab/Fenster, in dem "HTML bearbeiten" geöffnet ist, auf "Zurück" klicken.


Ute Ziemes, sg.utez.de,

0 Kommentare:

Kommentar veröffentlichen