5202

ein Blog über technische Fragen zu Blogger

Grundlage: HTML5 Blogger Layout selber schreiben

von
Heads up! Dieser Text ist seit dem 23.9. 2012 nicht mehr aktuell. Ich schreibe an einer neuen Serie, die dieses Thema wieder aufnimmt.
Ich finde, für manche Anwendungen sind Wordpress oder Joomla als CMS überdimensioniert und zu komplex - wer Beispielsweise eine kostengünstige Webseite mit ein paar Unterseiten will und keine Lust hat, einen eigenen Host aufzusetzen und sich groß um die Verwaltung seiner Seite zu kümmern, kann so ein Projekt mit Blogger sehr simpel umsetzen. Wie so was geht werde ich hier beschreiben - ich möchte mit meinem Beispiel keinen Webdesign-Preis gewinnen, sondern nur die grundlegenden Schritte zu einem funktionierenden, eigenen Layout innerhalb von blogspot.com zeigen.

Der Entwurf

<header>
<header>
<header>
<main>
<aside>
<footer>

Um sich's besser vorzustellen habe ich einen Entwurf gebaut - das fertige Layout soll 'klassisch' aufgebaut sein, d.h. ganz oben eine Navigation, dann kommt ein dreigeteilter Header, darunter ein Hauptteil mit Sidebar und ganz unten der Footer. In der Navigation kommen die Links zu den Unterseiten, der Hauptteil kann für eine Begrüßung, Slider oder für Posts verwendet werden und in die Sidebar sollen sich die Blogger-Gadgets mit einem Klick einbauen lassen, wie in den 'normalen' Blogger-Layouts auch - kein allzu ambitioniertes Konzept also.

Das fertige Layout

Wer sich das fertige Layout 'live' anschauen will:
Layout-Test-Blog

Die Grundlage

Die 'neuen' Blogger-Layouts benützen ein xml mit eigener Spezifikationen - ihr müsst also die genaue xml-Deklaration kennen, sonst wird euer Layout nicht funktionieren; beziehungsweise gibt es beim speichern Fehlermeldungen.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
Die <!DOCTYPE> Deklaration ist in diesem Beispiel html, das Layout wird in HTML5 geschrieben, mehr braucht's dafür nicht. Zusammen mit den CDATA-Abschnitten und den restlichen Layout-Tags schaut die Sache so aus:

Grundform Blogger xml Layout

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
  
 <head>
     <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[

/*---- CSS für Skin ----*/

  ]]></b:skin>

    <b:template-skin>
    <![CDATA[

/*---- CSS für's Layout [optional] ----*/

   ]]></b:template-skin>

 </head>

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass 
+ &quot; &quot; + data:blog.pageType'>

<!-- HTML für's Layout -->

 </body>

</html>
Nehmt diesen Code und kopiert ihn in ein neuen, leeren Test-Blog, wo ihr vorher den bestehenden Code gelöscht habt. Wenn es beim speichern keine Fehlermeldung gibt, besitzt ihr eine funktionierendes Grundgerüst für Blogger, auf das ihr jetzt eure eigenes Layout aufbauen könnt.

Start: Allgemeine CSS

Fangen wir mit ein paar allgemeinen CSS-Regeln -
Definition für body Tag
body {  
    margin: 0 auto;  
    font-family: 'Helvetica Neue Light', 'Helvetica Neue-Light', 
'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#777;
    background: #f0f0f0 url(http://goo.gl/GVSg1) repeat right top;
    padding: 0;
    max-width: 980px;
    min-width:880px;
}
Es gibt in meine Layout eine Mindestweite min-width und eine maximale Weite max-width - zwischen beiden Werten lässt sich das Layout später skalieren. Außerdem ist body mit margin: 0 auto; zentriert.
Nervige Blogger Nav-Bar ausblenden
body .navbar  {
  height: 0px !important;
  visibility: hidden;
  display: none;
}
HTML5 Layout-Tags normalisieren
header, footer, aside, nav, article {
 display: block;
}
Nachdem mir durch Fehler im FF klar geworden ist, dass die Browser HTML5 Tags auf unterschiedliche Art und Weise darstellen - mal als inline, mal als block Element - ist es wohl besser, alle HTML5 Layout-Tags am Anfang als block Element zu definieren:

Navigation

Die Vorbereitungen sind gemacht - fangen wir jetzt also mit dem eigentlichen Layout an.

Ganz oben auf die Seite soll eine Navigation kommen - und weil es 'einfach' gehen soll, wollen wir dazu das Seiten-Gadget von Blogger benützen. In HTML5 kommen Layout-Elemente in 'semantische' Container und nicht mehr in <div> Container wie bisher. Die ganze HTML für die Navigation schaut so aus:
<nav>...</nav>
That's all. Nicht besonders kompliziert, oder?
Der Inhalt von diesen 'semantischen' Container wird das PageList-Gadget werden. Das wiederum liegt in einem <section> Element - <section> ist ein neues, nicht ganz einfach zu begreifendes Prinzip in HTML5. Solche <section> Elemente sollen nicht Inhalte mit CSS-Regeln organisieren - dazu sind <div> Container da -  sondern repräsentiert einen semantischen Bereich, in dem Fall den Inhalt 'PageList-Gadget'.
Wem das zu kompliziert ist, hier die Pi mal Daumen Regel: In Blogger brauchen alle Widgets ein <section>, in das sie eingebettet sind. Nicht jedes Widget braucht ein eigenes, aber Widgets[=Inhalte] funktionieren nur in einer dafür definierten <section>.
Dankenswerterweise müssen wir diese <section> nicht selber schreiben, sondern Blogger stellt dazu eigene Tags zu Verfügung, hier etwa für den Navigationsbereich:
<b:section class='nav' id='nav' showaddelement='yes'>
...
</b:section>
Der Blogger <section> Tag besitzt einige Attribute, [die in dem Post nicht näher interessieren] die für den Vorlagen Designer wichtig sind - showaddelement='yes' besagt etwa, das unter Seitenelemente neue Gadgets in diese <section> eingebaut werden kann. 
Über <section> werde ich vielleicht mal einen eigenen Post schreiben, jetzt nur eine Bemerkung dazu: Blogger <section> besitzen eine class und eine id, versucht trotzdem _nie_ eine CSS über eine <section> zu schreiben, das endet im Chaos.
Vollständige HTML
Theoretisch schaut die ganze HTML für den Navbar nun so aus:
<nav>
      <b:section class="nav" id="nav" showaddelement="yes">
...
</b:section>
</nav>
beziehungsweise _ohne_ Inhalt in xml Kurzschreibweise:
<nav>
       <b:section class="nav" id="nav" showaddelement="yes"/>
</nav>
Nur: Blogger hat in diesem einen Fall ein Problem mit dem <nav> Tag und wird diese <section> nicht unter 'Seitenelemente' anzeigen. Die Navigation wird trotzdem funktionieren, nur müsst ihr das Widget per Hand einbauen:
<nav>
         <b:section class='nav' id='nav' showaddelement='yes'>
  <b:widget id='PageList1' locked='false' title='' type='PageList'/>
</b:section>
</nav>
Innerhalb eines <div> Containers:
<div class='menu'>
         <b:section class='nav' id='nav' showaddelement='yes'>
  <b:widget id='PageList1' locked='false' title='' type='PageList'/>
</b:section>
</div>
Ich beschreibe das deshalb so ausführlich, weil ich weiß, wie unglaublich frustrierend und zeitaufwändig es sein kann, wenn man einen Bug nicht gleich als solchen erkennt - nehmt also die letzte Schreibweise mit <div> Container, die ist zwar nicht so schön, funktioniert aber sicher auch unter 'Seitenelemente' ...

CSS für Navbar

Hier die CSS für die Navbar in der Version mit <div> Container.
/* Nav
----------------------------------------------- */  
.menu li{
 display: inline-block;
}
.menu ul li a {
   display: block;
   margin-right: 20px;
   font-size: 14px;
   line-height: 44px;
   text-align: center;
   text-decoration: none;
   color: #777;
}
.menu ul li a:hover {
   color: #ccc;
}   
.nav ul li.selected a {
   color: #ccc;
}  
Ein kleiner Trick mit dem ich mir einen <div> Container zum clearen unterhalb der PageList spare: Ich floate die Liste nicht nach links, sonder gebe den li Tags mit display: inline-block; inline Eigenschaften. Damit bleiben die li Elemente in der Zeile und laufen 'normal' nach rechts.

Header

Als nächstes kommt der Header und zwar soll der - wie erwähnt - zentriert und dreigeteilt werden. In 'klassischen' <div> Layouts müsstet ihr dazu unzählige <div> Container mit Columnen und Fauxcolumnen schreiben, damit das ganze eine Form bekommt. Ich werde das ganz simpel mit einer CSS-Tabelle lösen, dazu eine Vorbemerkung:
Ich dachte, Tabellen seien böse?
Wer Tabellen in Zusammenhang mit Web-Layouts erwähnt, erinnert zunächst mal an die schlechte alte Zeit, in der die Leute ihre Websites mit html Tabellen zusammengefrickelt haben. Das war irgendwann Ende der 90'iger [bevor die Leute ihre Websites mit Frames zusammengefrickelt haben :=)]. html Tabellen haben eine semantische Bedeutung und sind zur Organisation von Daten gedacht, nicht für's layouten von Webseiten.

Die CSS Eigenschaft display: table; oder display: table-cell; ist etwas völlig anderes. Diese Eigenschaft gibt einem html Element eine konkrete Darstellung im Layout. Das hat mit semantischen html nichts zu tun. Die Layout-Eigenschaft display: table; ist bislang daran gescheitert, dass sie der Internet Explorer7 nicht versteht. Selbst Google unterstützt den Internet Explorer7 seit August 2011 nicht mehr, also spricht wohl nichts wenig dagegen, die Eigenschaft display: table; einzusetzen.
HTML für CSS-Tabelle
Der gesamte Inhalt vom Header kommt zwischen <header> ... </header> Tags. Im Header gibt es drei html Elemente, nämlich einen <div class="main"> Container und links und rechts davon jeweils einen <aside> Container. Der htlm5 Tag <aside> ist für Inhalte gedacht, der neben dem Hauptinhalt liegt und zu diesem Inhalt semantisch dazugehört.

Diese drei Container werden von einem weiteren <div> Container umschlossen, der die Tabelleneigenschaft gibt. In den drei Containern gibt es - wie in der Navbar - jeweils ein <section> Tag, in dieser <section> befinde für die Inhalte, in diesem Fall jeweils ein HTML/Java Gadget.
<header>
 <div class='grid'>
  <aside>
   <b:section class='header' id='aside-l' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML1' locked='false' title='' type='HTML'/>
   </b:section>
  </aside>
  <div class='main'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML2' locked='false' title='' type='HTML'/>
   </b:section>
  </div>
  <aside>
   <b:section class='header' id='aside-r' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML3' locked='false' title='' type='HTML'/>
   </b:section>
  </aside>
 </div>
</header>
Bitte beachtet: Jedes HTML/Java Gadget braucht eine eindeutige id, genauso wie die <section> Tags. Unter Seitenelemente wird die id automatisch richtig gesetzt, wenn ihr Gadgets per Hand einsetzt, müsst ihr das anpassen. Im Fall des Falles gibt es eine Fehlermeldung im Editor.

CSS für Header

Die CSS für den Header - mit vertical-align: middle; lassen sich übrigens Inhalte in CSS-Tabellenzellen vertikal mittig zentrieren - ich war überrascht, dass das geht.
/* Header
----------------------------------------------- */
header .grid {
    display: table;
    margin: 0px auto;
    border-spacing: 10px 10px;
}
header aside, header .main {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-spacing: 10px 10px;
    background-color: rgb(200, 200, 200); 
}
header aside {
    width: 245px;
    hight: 105px;
}
header .main {
    width: 490px;
    hight: 105px;
    background: url(http://goo.gl/e7ps2) no-repeat;
    background-size: cover;
}
header aside:first-of-type {
      -webkit-border-top-left-radius: 12px;
   -webkit-border-bottom-left-radius: 12px;
          -moz-border-radius-topleft: 12px;
       -moz-border-radius-bottomleft: 12px;
              border-top-left-radius: 12px;
           border-bottom-left-radius: 12px;
}
header aside:last-of-type {
     -webkit-border-top-right-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
         -moz-border-radius-topright: 12px;
      -moz-border-radius-bottomright: 12px;
             border-top-right-radius: 12px;
          border-bottom-right-radius: 12px;
}
Das Header-Bild habe ich als Hintergrund eingebunden und mit der CSS3 Eigenschaft background-size skaliert. Man könnte dazu auch das Header-Gadget nehmen, aber ehrlich gesagt, finde ich dieses Gadget zu fummelig, direkt ist einfacher.

Zentriert wird die Tabelle mit margin: 0 auto; - die Abstände zwischen den Tabellenzellen wird mit border-spacing: 10px 10px; erzeugt.

Hauptteil

Der Hauptteil der Seite und die Sidebar wird genauso mit der Eigenschaft display: table; gebaut, wie der Header. In den Hauptteil kommt das Post-Gadget Blog1 - das ist nur dann notwendig, wenn ihr Inhalt auf die einzelnen 'statischen Seiten' stellen wollt. Seiten sind nichts anderes als Pots, die aus der Archivierung herausgenommen sind. Ohne Post-Gadget gibt es also keine Seiten. Wer das Post-Gadget nicht braucht, kann es auch wieder ausblenden, dazu später noch etwas.
HTML - Hauptteil
<div id='content'>
 <div id='mainContent'>
   <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog-Posts' type='Blog'/>
</b:section>
   </div>
 <aside>
  <b:section class='main' id='aside-main'>
<b:widget id='Profile1' locked='false' title='Über mich' type='Profile'/>
<b:widget id='PopularPosts1' locked='false' title='Beliebte Posts' type='PopularPosts'/>
<b:widget id='Followers1' locked='false' title='Leser' type='Followers'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
 </aside>
</div> 
Hier sind einige der HTML/Java Gadgets schon eingebaut - ihr könnt das aber genauso gut auch unter Seitenelemente machen. Das HTML/Java Gadget HTML4 wird später der Ort, wo eine Begrüßung, Slideshow oder sonst etwas eingebaut wird. Dazu später noch mehr.
CSS - Hauptteil
/* Content
----------------------------------------------- */  

#content {
   width: 100%;
   display: table;
   margin: 0px auto;
   border-spacing: 10px 10px;
}
#mainContent {
   display: table-cell;
   width: 606px;
   vertical-align: middle;
   padding-right: 22px;
   background-color: rgb(200, 200, 200); 
   -webkit-border-radius: 12px;
      -moz-border-radius: 12px; 
           border-radius: 12px; 
}
#content aside {
   display: table-cell;
   width: 374px;
   background-color: rgb(200, 200, 200);  
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px; 
            border-radius: 12px; 
}

Footer

Den Footer zu bauen ist trivial. Der Inhalt kommt zwischen dem <footer>...</footer> Tag und darein ein <section> Element mit einem HTML/Java Gadget. Ich beschreibe das jetzt nicht extra, ich denke, nach dem bisher gesagte ist klar, wie es geht.

Das Ergebnis

Ihr könnt euch nun anschauen, wie das Layout 'live' auusschaut. Wie gesagt, es ging mir nicht darum, ein Preis für Webdesign zu gewinnen, sondern das Prinzip dahinter zu demonstrieren. Mit wenig a bisserl Aufwand habt ihr ein blogspot.com Blog zur eigenen Homepage gemacht, mit integriertem Blog, zwanzig Unterseiten und unbegrenzten Speicherplatz - und das ganze für lau. Was wollt ihr mehr? Ihr könnt auch noch die eigene Domain drüberlegen und kein Mensch wird mehr erkennen, dass das ursprünglich mal ein Blogger Blog war.
Ein paar Anmerkungen
In dem Test-Blog ist das Post-Gadget ausgeblendet und der Besucher landet auf einer 'echten' Homepage. Das geht mit einer Zeile CSS:
.index #Blog1 {
  display: none:
}
Die Klasse .index ist in Blogger Blogs ein eigener Seitentyp. Davon gibt es insgesamt sieben Stück, die wichtigsten sind .item [=Post-Seite], .static_page [=statische Seite] und .mobile [=mobile Seite]. Das Startgadget HTML4 auf den statischen Seiten nicht anzuzeigen, geht etwa mit dieser CSS:
.static_page #HTML4 {
   display: none;
}
Mit den Konzept 'Seitentypus' kann man relativ schnell den statischen Seiten ein eigenes Layout geben. Ich habe in das Layout noch einiges anderes reingesteckt, aber dabei ging es nur um Äußerlichkeiten, die das Grundprinzip vom Layout nicht betreffen.

Fragen

Hin und wieder wird mal die Frage gestellt, ob es für Blogger ein [deutschsprachiges] Tutorial zum Schreiben ein eigenes Layouts gibt. So weit mir bekannt, gab es so etwas bisher noch nicht. Eh voila, hier ist der erste Schritt dazu. Für ein einfaches Layout reicht das was ich geschrieben habe vollkommen aus, siehe Testblog. Natürlich lässt sich das noch weiter ausbauen, falls Nachfrage besteht, schreibe ich gerne noch mehr dazu, etwa den Entwurf eines eigenen Blog-Post Widgets. Falls Probleme, Unklarheiten oder Fehler im Post, bitte per Kommentar anmerken, vielen Dank.