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:

T.W. hat gesagt…

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?

ben hat gesagt…

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.

Katja momentaufnahmen hat gesagt…

Hey, danke, hat mir super geholfen :D
Hat mich schon immer genervt :)

Grüße, Katja