Blogger Blogspot Blog: How to Split the New Template Designer Header from 1 to 2 Columns
By almirah
Blogger New Designer Template Header
Template Designer in Blogger is available under Design in your Dashboard. There are many pre-built templates in Template Designer provided by Blogger Blogspot for their users to choose from. And their designs are cool, too. Those pre-made templates are also easier to implement, and thus have made blogging and template selection to become more straightforward. With these New Template Designer, bloggers (beginners, especially) do not have to worry much about looking for template, downloading and applying it.
However, some other bloggers may want to have more features which are not available in the Template Designer. And one of the things is to have 2 columns on header so they can display something beside their blog title. This is not included in the Template Designer because they only provide a single header column. Many bloggers do not like to have so much empty space after the blog header and they look around how to put one more column beside the blog title. Can we do that? Of course!
What can You Put Beside Blog Title?
If you have 2 headers columns, then one of them is for your blog title. Another column may be for one of the followings:
- An advertisement. With Google adsense, you can have a contextual or image adsense or the two alternating each other. The best Google adsense beside blog title is either 728 x 90 Leaderboard or 468 x 60 Banner. You can the same ad size from your affiliate programs as an alternative to Google adsense.
- Popular Post. You can this Popular Post widget through Add a Gadget. You can add up to 10 posts from your popular posts, but to place it on header, it is better not display more than 5 posts.
- Recent Post; posts you have just added.
- Static image to flourish your blog.
Code1
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/> </b:section>
Code2
<b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>
Code3
#header, body#layout #header {width:30%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:65%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}So How Can You Split The Template Designer into 2 Columns?
Follow steps below:
- Log in to your Blogger Dashboard
- Click Design and HTML
- Make sure NOT to select Expand Widget Templates box
- Find the Code1 shown on the right
- Just below Code1 in your template, add Code2
- Then find ]]></b:skin>
- Insert Code3 just before ]]></b:skin>
- Save your template
To Adjus Width of the 2 Columns in Header
The width of the 2 columns in header you have just created is dictated by Code3. In example given here the column width for blog title (left column) is 30% of the total width, while the second column on the right next to the blog title columns is 65%. You can adjust this proportion according to your situation. You may need a little experiment to reach the right proportion.
Important for the Right Column
If you want to put a 728 x 90 Leaderboard adsense for the right header column, you would likely to have more than 1000px for your total template width. In Template Designer, you will only able to have 1000px maximum for the total width. To have more than that, look for the following code (Code4) in your template html and adjust them accordingly.
Code4
<b:template-skin> <b:variable default='930px' name='content.width' type='length' value='1000px'/> <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
Other Blogger Blogspot Tips
- Blogger Blogspot Blog: How to Add the Best Accordion-Based Table of Contents
A table of contents in Blogger Blogspot blog? Hmmmm, sounds interesting. You can imagine how a table of contents is when you have one in your blog. Just like in traditional documents such as books, the table... - Blogger Blogspot Blog: How to Add a Related Post widget
As a blogger using blogspot platform, you will do enything to make your blogger blog popular and loved by many people. When a reader is visiting your blog and reading your blog posts, you will want to make the... - Blogger Blogspot Blog: How to Adjust Widget Distance in Sidebar
Once question often raised by many bloggers who are beginners is that how to adjust the distance between widgets added to sidebar. This is a very reasonable question since this issue has a general effect on... - Blogger Blogspot Blog: How to Add a Breadcrumb
Breadcrumb is a tools that you can apply to your blogger blogspot blog. This tools is an assistance to your blog readers so they feel more convenient in reading you blog posts. As a blogger, one of your goals... - Best google adsense placements for blogspot blogger blog post
This is a very important question to answer to get the best results of your Google adsense. As a income generating tools, where you put your Google adsense in your blogs will have a significant affect to the... - Blogger Blogspot Blog: How to Add a Floating Social Bookmark Share Button Widget
Many bloggers using blogspot blogging platform recommend to use social bookmark button in our blogs. Reason for this is that social bookmark will help to increase you blog post popularity and traffic to your...
Comments
@Eric: The header is occupying the area intended for the new gadget. Can you point me which blog?
Thanks a lo! I've done it with my site www.adresult.blogspot.com successfully!. Just a piece of advice for some.. don't forget to adjust the width percentage by 5's as well as padding.. Experiment also.. Goodluck!
I'm not getting this problem solved. i'm getting my live traffic on the right side under header. in the new template. Please help me regarding this.
Venkateswarlu,
make sure you adjust widhth in code3. For me left header 50% and right header 25% worked.
Thanks - this worked for me. I used 60% and 35% left and right respectively.
Sir it was not work in my test in picture window template of new blogger
Sir thanks for your knowledge it works now in my picture window...Godbless
It didnt work for me. The header is still occupying the complete area and the new gadget is created below it. Please help me with this.
Thanks
Can you help me? I use the code but the two parts are not side by side but are on the top of the other. Thanks.
it is not working on my awesome template, It tried width variation also but nothing works. My blog address is-
Eric 11 months ago
It doesn't work for me :( I have the awesome template for blogger. It creates a new "add gadget" under the header, when I add a gadget it is on the right side but a bit under the header ...not on the same level.
Please help me