Header einbinden, Blogger.com!

Blogger.com! Header einbinden schnell gemacht.

Was ist überhaupt ein Header und wofür brauche ich einen? Wie bekomme ich einen Header in mein Blog von Blogger.com? 

Ein Header wird aus dem engl. Wort "Head" abgeleitet, und bedeutet Kopf. Ein Header ist in der Programmiersprache HTML ein Kopfbild für z.Bsp. die Webseite oder den Blog.

Wie groß und wie breit darf er aber sein, und das Wichtigste, woher bekomme ich einen (möglichst kostenlosen) Header? 

Woher man einen Header für seinen Blog von Blogger.com bekommt und wie man diesen, MITTIG, in das Blog einbinden kann erfahrt ihr hier. Das ist schnell gemacht und ganz einfach. Ein individueller Header kann einem Blog oder einer Webseite seine ganz persönliche/eigene Note verleihen. Ein recht kurzes Tutorial mit einigen Tipps für kostenlose Header oder Banner.

Hier ist der Codeschnipsel den Ihr einfügen müsst wenn Ihr Euren Header in der Mitte des Blogs platzieren wollt:

 #Header1_headerimg {
  margin: auto;
}

Diesen bitte genauso kopieren, auch mit den Klammern, und bei css einfügen siehe Video.
Die gängigsten Headergrößen liegen zwischen:

850 und 1024 Pixel Breite

und 

90 bis 150 Pixel Höhe.

(Auch daran denken, die Blogbreite (als Maßstab) für einen selbst erstellten Header zu berücksichtigen. Im Blogger Dashboard (unter Vorlage - Anpassen - Breite anpassen) nachschauen, Pixel.

Erstellen kann ich mein Headerbild mit verschiedenen Bildbearbeitungsprogrammen wie z. Bsp. Photoshop.

Als kostenlose Alternative zu Photoshop empfehle ich diese Programme:

• Gimp (etwas eigenwillig in der Bedienung),
• Openoffice draw (enthalten in OpenOffice.org),
• Paint (auf dem PC),
• Paint.Net (Eines der besten kostenlosen Bildbearbeitungsprogramme und war, ursprünglich, als Gratis-Ersatz für MS Paint gedacht.)
• Photoscape (gut für Hobby-Photographen/Fotogafen :-)

Wer sich mit dem Selbstgestalten von Headern noch nicht auskennt, kann sich auch Online einen Header anfertigen.

Das geht ganz einfach und ist oft auch kostenlos machbar.

Als kostenlosen Service kann ich Euch eKiwi.de empfehlen.

Dropdown - Menü einbinden, Blogger.com.

Dropdown - Menü einbinden, Blogger.com, geht das auch einfach?

Leider ist es nicht so einfach ein Dropdown - Menü einzubinden denn es gibt kein Gadget dafür. 

Ein Dropdown-Menü ist wichtig wenn man, auf seinem Blog oder auch Webseite, mehrere Kategorien anbieten möchte. Ausserdem sieht es besser aus und bietet eine gute Übersicht. 

Wenn man jetzt nicht zufällig Programmierer ist oder sich sehr gut in HTML auskennt, hat man verloren. 

Um es dennoch hinzubekommen ein Dropdown Menü zu erstellen habe ich hier zwei Codes für Euch.

Dropdown - Menü einbinden, Blogger.com HTML-Code für das Gadget!

HTML-Code für ein Gadget in Eurem Blog (HTML und Javascript-Gadget an beliebiger Stelle im Layout hinzufügen und diesen Code einfügen):

<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://LINK.com'>Home</a></li>
<li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->

Nicht erschrecken, jetzt sieht das Menü noch sehr fragwürdich und unsortiert aus. Das wird aber mit dem folgenden Css-Code behoben.  

Hier ein Nachtrag weil so viele von Euch mehr Subkategorien haben möchten:

1. Für mehr Kategorien und sub-Kategorien, weiterhin diesen Code anwenden.. 

   <li><a href='LINK'>CATEGORY 3</a>
   <ul>
   <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
   <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
   </ul>
   </li>

2. Um Sub-Kategorien anzulegen, diesen Code einfügen/nutzen

   <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1C</a></li>

 Anmerkung: Es existiert auch ein Video-Tutorial zu diesem Thema, den Link dorthin findet Ihr am Ende des Artikels!

Dropdown - Menü einbinden, HTML-Code für den CSS-Style-Manager!

Jetzt noch den Code in den Css-Style-Manager kopieren, damit das Dropdown-Menü auch ordentlich aussieht.  

Das geschieht im Dashboard unter:
Vorlage - Anpassen - Erweitert - Css

Code für den CSS-Style-Manager: 

/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}


Wie das Ganze genau funktioniert erfahrt Ihr in meinem Video-Tutorial auf YouTube.

Hier der Link dorthin. Dropdown - Menü einbinden

Viel Erfolg