The Dots (or the Dots Dark) template, which is a default Blogger template, has its Header widget inside the left sidebar. Since the Header widget carries the title and the sub title (or description) of a Blogger blog, this arrangement brings about a somewhat congested appearance. This tutorial will illustrate how this Header widget can be moved to the more usual, across-the-top placement.
First let’s take a look at the Before and After views of what we are going to do.
Before:
After:
As you can see, the After view has the blog title running across the blog, instead of being stuck at the left sidebar.
(Note: Please backup your template before trying out this modification)
Go to the Layout -> Edit HTML mode and first make sure that the ‘Expand Widget Templates’ option is NOT selected. Then apply the following steps.
1) Delete the background property in the #outer-wrapper CSS selector.
…
}
2) Delete the existing line “display:none;” in the #header-wrapper and add the following rules.
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat bottom right;
width:700px;
height:90px;
margin:0 auto 10px;
}
For the Dark Dots template, change the URL as follows.
3) Change the first padding value in the #main-wrapper to 10 px from 100 px
width:450px;
float:$endSide;
padding:10px 0 20px;
…
}
4) Change the first padding value of #sidebar to 10 px from 40 px
...
padding:10px 10px 15px;
…
}
5) Delete the existing <b:section> element for the header contained inside the sidebar-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='sidebar-wrapper'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'>
6) Copy the code shown below in red, in between the outer-wrapper and the crosscol-wrapper, to get the new header. (You will have to re-type your blog title after copying this code)
<div id='header-wrapper'>
<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Save your template and now you should have your header going across the top of your blog.
Related Posts
