The Emporer's New Clothes

So I published two Blogger Templates with the sidebar positioning ABSOLUTE! Great, but of course people started to change the header and got lost (started to change everything and got lost :-) for all that!) ... so (as promised) here is that same layout but with the sidebars FLOATing again. What's in it, then? Nothing fancy, but: * sidebars and main are adjusting when the header is changed; * sidebars are fixed 200px, main is fluid; * the <$BlogItemBody> is embedded in a table, so that <div clear:both> tag is harmless; * there are 5 templates, matching the different Blogger Navbars. The tb_b_20050917_black matches the Black Blogger Navbar: [ View ] [ Download ] The tb_b_20050917_blue matches the Blue Blogger Navbar: [ View ] [ Download ] The tb_b_20050917_darkblue matches the Blue Blogger Navbar: [ View ] [ Download ] The tb_b_20050901_silver matches the Silver Blogger Navbar: [ View ] [ Download ] The tb_b_20050917_tan matches the Tan Blogger Navbar: [ View ] [ Download ] Some basic things ... Lists: I have noticed many people are forgetting to embed their lists in <ul></ul> ... this causing the lists to have bullets outside the sidebars! A list should always be implemented like this: <!-- start right sidebar --> <div id="rightbar"> <div class="side"> <h2 class="sidebar-title">Links</h2> <ul> <li><a href="#" >Link 1</a></li> <li><a href="#" >Link 2</a></li> <li><a href="#" >Link 3</a></li> </ul> </div> </div> <!-- end right sidebar --> Putting text in the sidebars: in order to keep the text 10px inside the sidebar borders, use only paragraphs! <!-- start left sidebar --> <div id="leftbar"> <div class="side"> <div class="sidebar-title">Title</div> <p>Put some text here ...</p> <p>Put some text here ...</p> <p>Put some text here ...</p> </div> </div> <!-- end left sidebar --> To follow: I tried to keep this template really as clean and simple as possible (above all the css styling) ... so there's much to tweak and change and implement ... which probably will work out fine ... as long as you are working precise and methodical! To end: here's some more average flaws: every tag should be closed when closing, nest tags properly, so NOT <p> <a> </p> </a> BUT <p> <a> </a> </p> make it a habbit to close the stand-alones too, so NOT <br> BUT <br /> attributes should have quotes: <img src="image.jpg" /> Be warned ... A few people, after using the template, are complaining about the main part being pushed under the sidebars. True, if one is viewing this in a 800x600 resolution and the main contains images with a width some 400px. That is the drawback of a fluid design! You should - keep the images small enough (or) - consider there aren't many of us left who are viewing in 800x600 (not true!) (or) - give the bigger images a width: 75% (or) - try a fixed layout (it is not so hard to change the template - see showcase). Fixed vs. Fluid Have fun!

3 Column Layout Blogger Template

After spending some time on the Blogger Forum today, I decided to publish another 3-column-layout Blogger template. The tb_b_20050901_black matches the Black Blogger Navbar.: [ Download ] The tb_b_20050901_silver matches the Silver Blogger Navbar: [ Download ] The idea was to make it as friendly as possible. For instance (1) allowing the use of that <div clear:both> tag (without having to embed the posts in tables!) and (2) being magnanimous when non-fitting images are used. Apart from that it is very basic and simple: there was no pains when creating some typographic styling. And the layout is straightforward but unshakable (I hope). The layout uses two sidebars, positioned ABSOLUTE. Disadvantage: you have to alter a top when NOT using the Blogger Navbar. #leftbar, #rightbar { top: 125px; top: 175px; <!-- to be deleted when no Blogger Navbar is used --> } Besides that they, the vertical columns, are brightened with Z-INDEX (f.l.t.r.: 1,2, 3). This way Big Picture will not destroy the layout! (Only disturb the peace!) That's basically it! And yes, it looks kinda familiar. To me :-) On my links page it is filed under 'previous layouts': So it is recycling, in a way :-)

3 column Minima clone

This is all prety outdated. Please visit the Creating A Blogger Template series: Creating a Blogger Template (1) - from scratch Creating a Blogger Template (2) - the layout Creating a Blogger Template (3) - a fluid design Creating a Blogger Template (4) - variables Minima 3-column (new) Blogger Clone Et cetera ... . For the 'Community' (and for the fun of it) I hand out a 3 column layout solution here. It's a simple showcase, nothing more. The structure is very basic, proven (has been for me, in quite some variations, a reliable structure for years; it isn't mine though!), easy to comprehent and easy to implement. Like I said, this structure exists for years now, and I principally like it's flexibility: altering a few style-elements is enough to change it's behavior to almost anything one could ask for. Should be a nice 'toolbox' to examine/study/snitch. Click this picture (or the title above) to enter the showcase: And this is not strictly 'as is', so if you want to e-mail me for help, questions or comments, feel free to do so. UPDATE (Saturday, July 09, 2005): And as an extra: here's a MINIMA, the most used Blogger Template, in a 3 column layout - main section defined fluid. On the Blogger Forum some Ninny once tried to bite my head off for this, calling this modified template 'a blond clone' :-) Sigh! "The new templates are freely available for hundreds of thousands of Blogger users to select, use, and customize at will." I know there are more of these modified Minima's out there. They could well be better then this one, too. Still, since there are so many struggling with a third column I've decided to publish this template (again) anyway! Like I said: this is just A 3 column solution. But (no reason not to be confident, once in a while :-) ) I believe this one has a few strong features: 1) here the paddings and margins are nicely balanced; 2) when altering the Minima in a 3 column layout one always seems to forget about that Header (very ugly, that is!) and here it stretches as it should. Templates to be found in the sidebar! Update (Friday, January 20, 2006): Q: There is a big gap between the post title and the post body in the first post! HELP! A: That's (most likely) caused by the (famous) "div clear:both". See: Blogger Buzz: A Layout Solution! Blogger Dashboard › Settings › Formatting › Enable float alignment = No. (Allows image and text alignment options using the <div clear:both> tag. (Choose "No" if you are having post layout problems.)) Have a nice one!

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tincidunt neque a dolor euismod sollicitudin. Fusce sit amet odio et arcu suscipit dapibus. Donec lobortis adipiscing odio. Nullam velit. Praesent eu nibh. Nam cursus mollis velit. Suspendisse odio. Aenean ipsum tortor, consequat eget, aliquet ut, tempor vel, velit. Maecenas ac mauris a libero vehicula facilisis. Nulla tristique. Morbi convallis augue eu lectus.