Zweite Sidebar bei Blogger einfügen
Hallo Leute. Vielleicht ist es jemandem hilfreich, zu wissen wie ich eine zweite Sidebar unter dem Template "Minima Lefty Stretch" eingefügt habe. Sehr geholfen hat mir Hans englischer Blog Namens "Beautiful Beta". Davon abgesehen, dass der Blog englisch ist, unterscheiden sich die Templates, sprich Vorlagen, was die Sache sehr kompliziert macht. Ich habe nur sehr geringe HTML- Kenntnisse und brauchte einen kompletten für die Umsetzung. Ich hoffe, dass mein Post, in Verbindung mit dem obigen Link, dazu beiträgt es in kürzerer Zeit zu schaffen. Am Ende der Vorlagen- Datei unter HTML bearbeiten,befindet sich der so genannte "DIV- Bereich". Dort befindet sich der Sidebar-Wrapper, der bei mir JETZT so aussieht: ACHTUNG! Die Anfangstags < id="'left-sidebar-wrapper'"> b:section class='sidebar' id='left-sidebar' preferred='yes'> b:widget id='LinkList1' locked='false' title='Linkliste' type='LinkList'/> b:widget id='Image2' locked='false' title='Fischkopp' type='Image'/> b:widget id='BlogArchive1' locked='false' title='Blog-Archiv' type='BlogArchive'/> b:widget id='Label1' locked='false' title='Themenliste' type='Label'/> b:widget id='HTML1' locked='false' title='CTR' type='HTML'/> /b:section> /div> Es ist die abgeänderte Version. Da eine zweite Sidebar dazukommt, muss jede für sich spezifiziert werden. Vorher stand nur Sidebar dort, das "left-" habe ich dazu geschrieben. Dann habe ich das ganze kopiert, unten dran gehängt und die rechte Sidebar "gebaut". Wieder habe ich die Tags < id="'right-sidebar-wrapper'"> b:section class='sidebar' id='right-sidebar' preferred='yes'> /b:section> /div> Wie man sehen kann, habe ich bei der zweiten Sidebar die widgets herausgenommen, denn die müssen über die Layouteinstellungen neu eingefügt werden. So weit, so gut, hier unten ist vorerst die Arbeit getan. Im oberen Drittel der Datei befindet sich die Sektion: /* Outer-Wrapper ----------------------------------------------- */ Hier befinden sich die Einstellungen für: - den #outer-wrapper (der bereich zwischen kopf und fuss) - den #main-wrapper (Der posting- bereich) - den #sidebar-wrapper (die sidebar) DIE Sidebar, das ist das Problem, es ist nur eine. Es muss also noch eine Sidebar dazugeschrieben werden. Die gleiche Taktik wie oben. Kopieren einfügen, dann für links und rechts anpassen. Das ganze sieht dann so aus: /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { margin:0; padding:10px; text-align:left; font: $bodyfont; } #left-sidebar-wrapper { margin-left: 2%; width: 20%; float: left; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main-wrapper { margin-left: 10%; width: 46%; float: left; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #right-sidebar-wrapper { margin-right: 2%; width: 20%; float: right; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } W I C H T I G !!!! Am Anfang steht der outer-wrapper, dann die left-sidebar, dann der main-wrapper, dann die right-sidebar. Diese Reihenfolge ist sehr, sehr wichtig, was mit dem Float- Befehl zusammenhängt. Der Seitenufbau funktionier folgender massen: Erst die left-sidebar, die, links gefloatet an den linken Rand des outer-wrappers schliesst. Danach der main-wrapper, der, ebenfalls links gefloatet, an die linke sidebar anschliesst. Zum Schluss dann die right-sidebar, die rechts gefloatet an die rechte Seite des outer-wrappers schliesst. Um diese Reihenfolge festzulegen, müssen wir auch im "div-Bereich" unten den main-wrapper zwischen die side-wrapper schieben. Siehe Beispiel, wie immer ohne Tags < id="'left-sidebar-wrapper'"> b:section class='sidebar' id='left-sidebar' preferred='yes'> b:widget id='LinkList1' locked='false' title='Linkliste' type='LinkList'/> b:widget id='Image2' locked='false' title='Fischkopp' type='Image'/> b:widget id='BlogArchive1' locked='false' title='Blog-Archiv' type='BlogArchive'/> b:widget id='Label1' locked='false' title='Themenliste' type='Label'/> b:widget id='HTML1' locked='false' title='CTR' type='HTML'/> /b:section> /div> div id='main-wrapper'> b:section class='main' id='main' showaddelement='no'> b:widget id='Blog1' locked='true' title='Blog-Posts' type='Blog'/> /b:section> /div> div id='right-sidebar-wrapper'> b:section class='sidebar' id='right-sidebar' preferred='yes'> b:widget id='Text3' locked='false' title='N E W S' type='Text'/> /b:section> /div>
