Written by
Daniel
In my other post, i already gave you the simple tutorial on Adding an element below the blog header. In that post, mainly, i discussed about how to unlock the blog header element so we will be able to place more blogger widgets inside the header area. But in this post, i want to show you the different method in adding a new layout below and outside the blog header. So, this tutorial is different from the first one, that's why, i create this post with same topic, but the different is, this tutorial will allow you to add a new element as a separate part under the blog header.
1. Login to Blogger
To start this tutorial, now go to the Blogger.com and then Log in using the username and password.
2. Go to Layout
In the Dashboard page, pick one of your blog and then press the Layout/Design button. Now, you will enter the Page element. In this Page Element, now see the layout structure of your template. As you can see in the picture below, the blog header element of your blog should look like this:
3. Go to Edit HTML
Still in the Page Element, now switch the sub-tab from Layout/Design to the Edit HTML sub-tab. By pressing the sub-tab Edit HTML, you will be brought to the page contains all the HTML codes of your blog template.
Anyway, before doing any kind of customization, i strongly insist you to make a back up for the existing template of your blog. If you make a mistake with the code, you can revert the template back by uploading the template to the Blogger machine. Now click at the link Download Full Template.
4. Find the Code
Now press Ctrl + F at the same time and you will enter the find mode. In this Find mode, you can find any specific code which cannot be done using your own two eyes. Now find the code below:
]]></b:skin>
5. Copy the code
Now block all the code below using your mouse cursor and press Copy. And then paste it over the code ]]></b:skin>
/* New Blog Header
---------------------------------------------------------*/
#under_header{
margin:10px 0;
padding:3px;
width:97%;
}
---------------------------------------------------------*/
#under_header{
margin:10px 0;
padding:3px;
width:97%;
}
6. Find the Code
Next is, go to the bottom of the HTML code and find this code
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
7. Copy the Code
Now copy the code below and then paste it under the code above (number 6). By adding this code into your template, the new element under the blog header will be added in the Page Element.
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
<b:section class='header' id='underheader' preferred='yes'/>
</div>
8. Save the change
Save the template by pressing the Save Template button and now go to Page element.
As you can see in the picture above, now your template structure is changing, especially on the blog header. The new blogger widgets section "Add a Gadget" has been successfully added under the blog header element.
Good luck bloggers!
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
Labels:
Blog Header







0 comments:
Post a Comment