Drei Widgets nebeneinander einfügen

Hallo Ihr Lieben,

Heute zeige ich euch, wie man in die Minima Vorlage drei Widgets nebeneinander einfügen kann. Im Vorlagendesigner kann man zwar einen Footer mit drei Spalten einfügen, für die, die lieber mit der Minima-Vorlage arbeiten, haben diese Möglichkeit nicht.

Man kann die Widgets eigentlich überall einfügen, aber am sinnvollsten sind mir diese zwei Varianten. Beide Varianten eignen sich hervorragend, um eine fehlende Sidebar zu ergänzen. Hier kann man die wichtigsten Widgets unterbringen.

Der erste Schritt ist bei beiden Varianten gleich:

1. CSS einfügen

Öffnet Vorlage --> HTML bearbeiten. Sucht nach folgender Zeile: 

Klickt auf das Dreieck und öffnet das CSS. Direkt am Ende des blauen Codes fügt ihr folgendes vor ]]></b:skin> ein:

/* column3-head Anfang
==================== */
#column3-head {
width: 96%;
position: relative;
clear:both;
margin-left:20px;
color:#000;
float:left;
background:#fff;
padding: 15px 0 15px 0;
}
#column3-head h2 {
padding: 5px 0 2px 0;
margin: 0 0 30px 0;
color:#ff5a00;
font-size: 18px;
letter-spacing: -1px;
border-bottom: 1px solid #e1e1e1;
text-transform: none;
}
#column3-head ul {
padding: 0;
margin: 0;
}
#column3-head ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px solid #031c5d;
}
#column3-head ul li a {
display: block;
padding: 0 10px;
color:#666666;
text-decoration: none;
}
#column3-head ul li a:hover {
background: #B1ACB1;
}
#left-column3-head {
width: 32%;
float: left;
padding-left:10px;
}
#center-column3-head {
width: 32%;
float: left;
padding-left:10px;
}
#right-column3-head {
width: 32%;
float: right;
padding: 0 5px 0 10px;
}
/* column3-head Ende
==================== */

2. Widgettitel anpassen

Falls ihr eurer 3er-Widgets ein eigenes Titel-Design verpassen wollt, dann könnt ihr diesen Schritt überspringen. Damit die Widgettitel das gleiche Aussehen übernehmen wie in der Sidebar, löscht diesen Teil aus dem Code, was wir gerade eben eingefügt habt:

#column3-head h2 {
padding: 5px 0 2px 0;
margin: 0 0 30px 0;
color:#ff5a00;
font-size: 18px;
letter-spacing: -1px;
border-bottom: 1px solid #e1e1e1;
text-transform: none;
}

3. HTML einfügen

Nun werden wir den Code einfügen und somit festlegen, wo die neuen Widgets auftauchen.

Diesen Code braucht ihr. Fügt es in die richtige Stelle ein, wo genau, steht weiter unten.

<!-- 3-Column Head Anfang -->
<div id='column3-head'>
<b:section class='column3-head' id='left-column3-head'>
<b:widget id='Text1' locked='false' title='test1' type='Text'/>
</b:section>
<b:section class='column3-head' id='center-column3-head'>
<b:widget id='Text2' locked='false' title='test2' type='Text'/>
</b:section>
<b:section class='column3-head' id='right-column3-head'>
<b:widget id='Text3' locked='false' title='test3' type='Text'/>
</b:section>
</div>
<!-- 3-Column Head Ende -->

Variante 1

• Widgets unter der Pagelist (Seitennavigation) einfügen: Code hinter folgendes einfügen:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'>
<b:widget id='PageList1' locked='false' title='' type='PageList'/>
</b:section>
</div>

•  Widgets zwischen Header und Pagelist (Seitennavigation) einfügen: Code hinter folgendes einfügen:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogname' type='Header'/>
</b:section>
</div>

Variante 2

• Widgets über den Blog-Footer einfügen: Code vor folgendes einfügen:

<div id='footer-wrapper'>...</div>

4. Speichern und fertig.

Diese Methode benutze ich übrigens selber. Danach kann man zur Layout-Sicht wechseln, die Test-Widgets löschen und an ihrer Stelle seine eigenen Widgets einfügen. :)

Woher bekomme ich eine Minima-Vorlage her?

Da sie nicht mehr bei Blogger direkt vertreten ist, habe ich zwei verschiedene Versionen zum Downloaden:

• das originale Minima
• und das von mir angepasste Minima ohne Rahmen und co.