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 einxml 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='"loading" + data:blog.mobileClass
+ " " + 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 nichts wenig dagegen, die 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 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 - mitvertical-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 Eigenschaftdisplay: 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. MitEin 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.