You know you really want to have this: it is a three column template, with fluid design, and offering the Super Peek-a-Boo hack.
Also the 1 comments-bug is fixed in this template.
Check out the preview, or download the zip-file (28kB) and install it now!
Posts
4 New Gadgets from Blogger Buster
4 days ago
This is what people say:
hey hans!
your link to the download template page is showing some error...
please check it out...
@archit: thanks! link is fixed now. Filenames are case sensitive :)
nice design...didn't know you have asense of humor,lol..can we change the pics and colors?
@chllout_lev: my teaching is learning, and my learning is teaching: the only thing I am doing here is sharing my ideas, discoveries and curiosities. Feel free to adapt them to your own needs. I desgined this template because I like the Vladstudio Artwork, and to discover how blogger beta and css interact.
very nice template, you can see this live in http://getitfromboy.blogspot.com
thanks for this!i hope you make a 3 column from that giraffe template earlier posted,very nice colors there.
Nice, I like your design and you also can see it at: bple
I can't get the timestamp to work. Is there a way to add it?
Wonderful template by the way! =)
@Shinita:
You can replace the "Permalink" text with the regular timestamp. First, backup the template.
Then expand to full widgets.
Find the timestamp span:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>| <a class='timestamp-link' expr:href='data:post.url' title='permanent link'>Permalink</a>
</b:if>
</b:if>
</span>
and replace it with the following code:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>
I use this template in a test blog and I am loving it. Three columns and Peek-a-boo has been number one and two on my priority list.
My only problem is that my blog is already up and running with lots of stuff in the sidebar, so my question is; Do I have to insert all the links and stuff all over again, or do you have a clever solution for this dilemma of mine?
@Helge: Mmmm....interesting. I guess I would take the following approach. First, I would back up my old template.
Then, I would go into edit-mode, and carefully look for all the widgets. If you have, for example, a links-page-element in your sidebar, look into the sidebar-section, and you will find a widget of the type Links and an id such as Links1. Same for Text, List, and other widgets.
Those widgets will NOT be in my standard 3 column template. If you upload a new template, and try to save it, Blogger will notice that the widgets that it has stored in its database are no longer present in the new template, and it will ask if you want to delete those widgets (which you obviously don't want).
So, after uploading you have to add your 'old' widgets by hand to the template before you save. That's adding the line of code that looks like <:b widget ...>
I guess that this will work, but I never tried it out myself. So first set up a testblog, add some page elements, and try this trick before you do it on your real blog.
I noticed this little piece of information that I got when I uploaded the new template: "Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost."
I guess to most users even the advanced ones, it makes no sense for most of the time to go looking for old widgets and Google would have a trillion old no-use widgets laying around that no one cared about. So I draw the conclusion that my widgets will be lost.
This is also the result I got from my testing. I will upload my template now and if something unusal happens I will let you know.
Thanks again for the help youve been giving me, that was really great. I easily found out how to change the colours on the side-bar, all thanks to you.
Helge, you are welcome!
Great work, Mr. Hans!
@W.Y.: Glad you like it!
I´ve downloaded your template 'underwater', and installed it in the way as you indicated. It was very cool (http://blax-blog.blogspot.com)! I took the liberty of translating a small piece of your tutorial in my blog, so that bloggers in Brazil could use it. Is it possible? Bye...
I noticed that when I download a template full of customised widgets and then upload it to a new beta blog the widgets lose their content though they are present. Why is that occurring? And do widgets have a absolute ID in this form :
<b:widget id='MYBETABLOG.blogspot.com/LinkList1' locked='false'
title='beta blogs' type='LinkList'/>
OR is it something else?
Thanks
I love the underwater template! I'm using it on my blog at the moment with some modifications and I'm very happy with how easy it was! Here's a link if anyone wants to see this template in action: http://anitahavelsblog.blogspot.com
I like to think the water droplets in the background and on the sidebar headers look a little link ink droplets too...
Great template and articles! I've adapted Underwater to my needs in no time, you can see it at manámaná. Beautiful Beta is also quoted in the credits and the hacks section. The Peek-a-book subject is still in my to-do list, but I hope solving it before new year (time is Not on my side XD).
agol@claudya: I am glad you like it, and feel free to translate anything you like, as long as you add a link to my Blog.
@vin: if you have a widget in your template, the actual content of the widget is in the Blogger database, not in your template. If you have, for example, a text element as a footer, your template will have a footer-widget, but the text itself is not stored in the template but in the database. Copying a template does not copy the content of the widget. You have to add the content after uploading the new template.
@anita and noir: thanks!
Hi Hans,
I downloaded your template and copied to a test site. Getting message: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The document type declaration for root element type "html" must end with '>'.
What am I doing wrong?
Thanks
Well I got past the error message, so please disregard.
However could you have a look at
www.lifeinwestcliffe.blogspot.com (this is my test site) then look at
www.lifesinwestcliffe.blogspot.com
I have worked all day on this and I just am lost with my coding colors etc.
Can or will you help? I haven't even started on the widgets.
@Janet: If I look at the code of your blog pages, I can see that you are using hard coded colors. Hard coded means that you have color-definitions such as "background: #efc98a" or "color: #ff0000". You can edit all these numbers to change your colors. There are several web resources to select colors and then copy the code. See for example my post about such a tool.
A more flexible and intelligent way to customize your colors is using variables. In that case your color-definition will look something like: "color: $TextColor". At the top of your blogtemplate you can define a variable TextColor, that you can set to any value you like. Using this way to define colors, you can use the blogger Fonts and Colors tab to customize the colors. Read more about this in my post on color schemes.
What I did is that I used a template, coverted all hard coded colors to variables, and then from the Fonts and Colors page I changed each color to red or bright yellow, just to see which color affects which page element. I did this just to get an idea which div or class belonged to a certain part of my blogpage.
I hope this helps you a bit, if you have more questions please feel free to ask for help!
Thank you Hans for the color scheme tips. I need to step back and read more of your site. There is obviously tons of good tips here. Yesterday I just got overwhelmed a tad. After a good nights sleep I'm ready to hit it again today. Your site is a great resource!
Thanks so much for sharing your work! I used it to help me modify a classic blog that is not yet eligible for migration to the beta. One problem I did have is that I can't find the code that causes the background image in the header to repeat. I would like to have my image once, centered. If you have some time and could check out my the blog I'd be very appreciative. ztradiotest.blogspot.com. This is very much still a work in progress so don't worry, I will credit you on the page itself before it's finished(not just in the source code). Thanks!
p.s. i want it to look something like this.
hey hans--
I figured it out...you have to be explicit and add the "no-repeat" to the header css. Thanks!
You could visit my blog to check out what it would look like if you edit it.. Thanks so much for this template! = )
http://animedload.blogspot.com/
hi hans--
i think you have a minor error in the code that prevents the post timestamp from appearing. further investigation and some trial and error suggests that it's easily resolved by adding the following tags after the "<b:if cond='data:top.showTimestamp'>"
<data:top.timestampLabel/> <data:post.timestamp />
just fyi. also, you may want to include the url to your site in the css for the template. thanks again for your generosity!
@amr: I left out the timestamp on purpose. Feel free to add it if you like!
hey hans...thanks for the clarification. just fyi, the user can disable the timestamp through the blog posts widget so perhaps the option should be included by default in the template? either way, you've been gracious enough to share your work, and to clarify how to add it in one of the comments below so i guess it doesn't really matter. take care!
I really like this template...im just a dumb trucker, i think im gettin 98% of it correct...One question, all my pics and smileys that I post have 'borders' around them....the pics actually dont mind, the smileys look pretty bad...what is it about this template that makes that border show(orig template didnt)
http://ihasablog.blogspot.com/2006/11/1106-cgy-shelby.html
example^
maybe i fixed the smiley border thing?
i chgd from this
.post img {
padding: 4px;
border: 1px solid $borderColor;
to this
.post img {
padding: 4px;
border: 0px;
it seems to work....but if you see anything wrong, pls comment, thks
@Bernie: glad to see you solved it! Setting border to 0px does the trick
i wanna put your link button on my blog...do i have to save it, host it, then link it?? others ive done, ive just clicked it
?
Hans, a lot a changed in the blogger widgets code since you put these templates for download. For example, you will need to modify the backlinks- container, the navigational links(previous,home,new) etc. I downloaded the "thoughts from the deep" template and want to use it in my main blog and found these issues in the template. However, thanks for this excellent template.
Well.....I tried to get the template to work for over two hours. The JPG files have the correct URL, checked that out.
What could be wrong?
http://vagabonders-supreme.net/ThreeColumnBlog/TiogaBlog.html
In the comment above, I posted the wrong URL. The correct URL is:
http://vagabonders-supreme.net/blog/ThreeColumnBlog/TiogaBlog.html
Why is this stuff so hard for me, when all of you have setup this template so easily? Hmmmmm?
@TiogaRV: I see no blog content at all at your blog. If I display the page code I only see your template code, no posts content at all. How exactly did you upload the template?
Hans,
There are two posts.
I do not know how to "upload" a template. What I did was copy and paste it over the original template.
Is that wrong?
I finally did it?? Thank you sooooo much!
http://3columntesttwo.blogspot.com/
@TioGarv: congratiulations!
Hello Hans.
Congratulations for your blog. It has been very useful to me in Blogger's change to Blogger Beta.
Secondly telling you that until now I have a Pannasmontata's template. Unfortunately it has been of no use for me when this template have passed to Blogger Beta .
I have so then used your Underwater's template and I have joined the previous that I was using: Land of Pannasmontata.
The final result you can see it here: http://elparaisodelosgansos.blogspot.com
A new template for Blogger Beta.
@Pere: thanks, and it really looks good!
hi hans!
can you help me pls.? i use this template for a while now, and i use firefox and it looked ok there.I never bothered to look in IE if its ok, but i noticed from my statcounter that almost all traffic uses IE, and to my horrors, the right sidebar slides to the bottom on IE..
http://getitfromboy.blogspot.com
pls. can you check what could be happening? thank you so much..
Thanks a million, I love this template
Great Template Hans.
I was looking for a 3 column one that I could adapt to work for my Blog. Yours did the trick. I adjusted it slightly to have a larger middle column so my images (~500px) would fit properly and I customized the graphics a little.
Interestingly, the banner pic you used is 244 px tall. I needed to use a 250 px image to get it to fill properly without repeating.
Finally, I'm having trouble with an issue and I hope you can help me out. I'd like to move the Title and Description to the white space just below the banner because I plan to customize the banner image with text via photoshop. The reason? I want the search engines to see the title and header but I also want people to see the graphics which may include a snazzy title.
Any suggestions? You can visit my blog here.
Thanks!
Thanks a ton bro, you have made my life steps ahead better.....
hi. i'm having problems adding that 3rd column. the right sidebar that i added was too close to the main (the one containing my posts). how do i edit that? and how can i put borders on the side bars? thanks
Dear Hans,
i used your underwater template for my blog and in due course of time modified some features to create some templates which i m using on my and my husband's Blog . i have mentioned it in the blog info that YOU are the designer and i m just a modifier. thank you so much for introducing me to the world of hacks. God Bless.Happy new year. Please visit our blogs at :
http://biren-speaks.blogspot.com
and
http://hanging-in-there.blogspot.com
PS: where are you these days?your blog has not been updated of late.
@gentletouchee: if the sidebar moves to the bottom, it means that the columns are too wide. So you will have to adjust the width and margins a bit to make it all fit. Also, if elements inside your sidebar are too wide, or pictures in your post are too wide, this may affect the widt of the sidebar and posts. Also, differences can occur between browsers, as they handle things differently.
@osman: in the skin add the line display:none; to #header h1 and to #header .description. This will hide the title and description, but they are still there.
@joice: you have to adjust the margin of the sidebar-wrapper. For your right sidebarwrapper set the left-margin to, say, 10px. Borders can be added with the border-style.
So to move your right sidebar a little bit more to the right, and have a black border on the left side of it, add the following styling to #right-sidebar-wrapper:
margin-left:10px;
border-left:1px solid #000000;
@chhaya: thanks!
I'm loving the template! I added my own header and in firefox it looks great! But in IE7 the header doesn't show up! Any idea what to do?
-Jim-
http://always-sleepy.blogspot.com
hey hans--
Thanks so much for sharing your work! I just used your template to my blog,But sometimes can not show any content in my blog ,What am I doing wrong? Can you help me to solve the error ?
Thank you very much~~
http://nick911.blogspot.com/
Hi Hans, I thought I should show you what I have done out of your template, using the modify tools of Blogger Beta.
Used custom graphics, implemented some of your hacks, paid attention to color selection, photoshopped the blogheader image myself and the other elements.
This is it ->
http://wattozaurul.blogspot.com
I hope you like it all.
Oh, btw, this template is NOT included in your "Templates" category. Please fix this, I had to dig thru the site to find it again.
Hans:
Can you please help me? Every time I try to change templates to your one, I get the following message:
"Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The document type declaration for root element type "html" must end with '>'. "
I have checked through, and don't know what is wrong. Is there a right-up-to-date version of this template, with everything fixed?
Thanks in advance,
Michael
http://michaelpurves.blogspot.com
Hi Hans!
Thanks a LOT for your 3 column template! It is just the one that I was looking for!! And your blog is so helpful, i am really grateful to you :-)
I am facing a problem in my blog - EnterBangla.
The problem is that - In the blogger from Settings->Format I selected 6 posts to be displayed on the main page. As a result when the main page of the blog loads, it loads with the last 6 posts. Now from the bottom right, if i choose "Older Posts", i can move to older pages still having 6 posts. But from the Categories / Label menu on the right, if i choose any category, for example "Algorithm" or "ebooks", the page loads with ALL the available posts in that category (maximum 20) !! So strange ??! Why should it load 20 posts whereas I have selected 6 posts per page??? The blogger Settings seems to fail :-(
Thanks again for your useful template!
HollowMan @EnterBangla
Dear Hans
Thank you for the wonderful stuff. I can't seem to get the quick edit icon at the bottom of my posts anymore. The sidebars' quick edit icons are still there. Any tips?
ed
Hello Hans,
I know this is an old post- but for me it's new! I have tweaked a soon to be new blog of mine (which is private right now)to a 3 column layout with wide columns. the post column is on the left with 2 narrower columns on the right. This all looks fine on my widescreen laptop, my 19" screen, in both firefox and IE. I looked at it on my friends computer (not sure how big) in IE and the smaller columns all ended up in one all the way to the right- so far left wide (post area) and then a space, then a longer sidebar column on right. not sure how this is happening.
My question, is there a way to add the fluidness to my template? and the peek-a-boo? I don't want to go through redoing everything loading your template- hope you can help, i'm pretty new to all this. I can invite you to my private blog if that helps.
Thanks,
Tessa
Share your thoughts!
Feel free to post your questions, remarks and comments here. Moderation is set for this blog, so your comments will appear in due time.
Look who's linking here!
0 Backlinks point here