How to Add More "Add a Gadget" Sections Below the Blog Header?

Filed Under :

Hi bloggy readers,
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:

blog header in page element blogger

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.
save blogs templates

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%;
}

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>

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>

8. Save the change
Save the template by pressing the Save Template button and now go to Page element.

blog header or blogger headers

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
edit post

0 comments:

Post a Comment

Browse Daniel's Designs

Google+ Followers

Subscribe Now To Get Update!

Want to Get The Update From Whatmakesblog.com to Your Email Inbox? Just Type Your Email Address Below and Press Subscribe...
Your email address will not be shared..
Delivered by FeedBurner

Last Posts

Site Info