Mittwoch, 2. Mai 2012

Blogger Navbar entfernen / löschen

Wie man die Blogger (Blogspot) Navbar ausblenden kann, habe ich bereits in einem früheren Beitrag erklärt. Heute möchte ich mich damit beschäftigen, wie man die Blogger (Blogspot) Navbar entfernen / löschen kann.
Neu: Diese Variante funktioniert jetzt auch mit der aktuellen Blogger-Oberfläche (April 2013)!


Was jedem klar sein sollte, wenn man die Navbar entfernt, sind natürlich auch ihre Funktionen deaktiviert – seit neuestem sind die Funktionen beim Entfernen / Löschen der Navbar weiterhin aktiv. Aber keine Sorge, man kann die Navbar auch wieder aktivieren.

Wichtig: bevor man Änderungen am HTML-Code vornimmt, sollte man die Blog-Vorlage sichern.


A. Navbar entfernen / löschen

A.I. HTML-Code der Navbar finden

Um die Navbar entfernen / löschen zu können muss man den Html-Code der Blogger-Vorlage bearbeiten. Dazu wählt man in der Blog-Verwaltung den Reiter „Vorlage“ und dort dann „Html bearbeiten“.

Zunächst muss man im Fenster „Vorlage bearbeiten“ nach folgender Zeile im Html-Code suchen:
<body expr:class='&quot;loading&quot;

Oder man klickt auf den Knopf „Zu Widget wechseln“ und wählt dort im Drop-Down-Menü „Navbar 1“ aus.
Man sieht dann die folgenden Zeilen Html-Code oder so Ähnliche:
</head>

<body expr:class='&quot;loading&quot; data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>...</b:widget>
</b:section>

A.II. HTML-Code der Navbar entfernen / löschen

Um die Navbar zu entfernen, muss man nun einfach die „b:section“ der Navbar, also folgende Zeilen Html-Code löschen:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>...</b:widget>
</b:section>

Im Ergebnis sollte der Html-Code dann ungefähr so aussehen:
</head>

<body expr:class='&quot;loading&quot; data:blog.mobileClass'>
Danach nur noch auf den Knopf „VORLAGE SPEICHERN“ klicken und man hat die Navbar erfolgreich entfernt. Wenn man den Blog das nächste Mal aufruft oder neu lädt, ist die Blogger-Navbar verschwunden.


B. Entfernte / gelöschte Navbar wieder aktivieren

Um die Navbar wieder zu aktivieren, muss man die zuvor entfernten Zeilen Html-Code wieder an der selben Stelle einfügen – also direkt unter:
<body expr:class='&quot;loading&quot; data:blog.mobileClass'>
Wichtig: der zuvor entfernte Html-Code ist in Wahrheit ein klein wenig länger, dass kann man selber testen, indem man den obigen Html-Code aus dem Fenster „Html bearbeiten“ ausschneidet und in ein Textverarbeitungsprogramm einfügt. Daher ist es wichtig, den langen Html-Code in die Vorlage einzufügen, ansonsten funktioniert es nicht. Ihr könnt den Code einfach von hier kopieren und bei euch in die Vorlage einfügen.
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'> <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt; function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener(&#39;load&#39;, function(){ object[attribute] = val; }, false); } else { window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; }); } } &lt;/script&gt; &lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; gapi.load(&quot;iframes-styles-bubble&quot;, function() { if (window.iframes &amp;&amp; iframes.open) { iframes.open( &#39;//www.blogger.com/navbar.g?targetBlogID\0752538882192893880242\46blogName\75alkuadmerdafgen\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://alkuadmerdafgen.blogspot.com/search\46blogLocale\75de\46v\0752\46homepageUrl\75http://alkuadmerdafgen.blogspot.com/\46readAccessMode\75PRIVATE\46vt\0757179718354883425611&#39;, { container: &quot;navbar-iframe-container&quot;, id: &quot;navbar-iframe&quot; }, { }); } }); &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt; (function() { var script = document.createElement(&#39;script&#39;); script.type = &#39;text/javascript&#39;; script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;; var head = document.getElementsByTagName(&#39;head&#39;)[0]; if (head) { head.appendChild(script); }})(); &lt;/script&gt; </b:includable> </b:widget> </b:section>
Dann nur noch auf den Knopf „VORLAGE SPEICHERN“ klicken und die zuvor entfernte Navbar ist automatisch wieder aktiviert.


C. Alternative

--> Man kann die Blogger (Blogspot) Navbar auch ausblenden <--
Das ist insbesondere dann weitaus einfacher, wenn es darum geht, die Navbar wieder zu aktivieren.

--> Man kann die Blogspot-Navbar auch einfach ausschalten <--
Diese Variante ist dann von Vorteil, wenn man ungern Änderungen am HTML-Code vornimmt – da man hier den HTML-Code nicht ändern muss.

Kommentare:

  1. Hallo, ich habe ein Problem wg. der Navbar bei einem Blog ist sie vollkommen verschwunden auch aus dem Layout, so soll es auch sein. Jedoch beim anderen Blog nicht :( Da klappt das irgendwie gar nciht mit ?? woran loiegt das?

    AntwortenLöschen
  2. Das kann ich dir so jetzt nicht beantworten, dazu müsste ich mir deinen Html-Code ansehen. Wenn du mir deine Vorlage oder deinen Html-Code per Mail schickst, helfe ich dir gerne.

    AntwortenLöschen
  3. Hey, danke, hat mir super geholfen :D
    Hat mich schon immer genervt :)

    Grüße, Katja

    AntwortenLöschen