15 February 2009

How to Add Element under Header in Blogger Blog

Usually, when you are new to the World of Blogging, you start from scratch. You use on of the default templates offered by Blogger on their site. Little-by-little, you realize that there are so many blogs in blogospere that look like yours, and you want to distinguish you blog from others. You can choose one of the free or paid templates available online to change the blog interface. Later on, you can experiment even more, tweaking the GUI to your particular needs. The following simple tweak will show you how to add an extra element under your blog Header in 9 steps. The credit goes to BlogSpotTutorial:

1. Login to Blogger with your ID.
2. Click Layout.
3. Click tab Edit HTML.
4. Click sentence Download Full Template, it is very important for you to backup this!
5. Copy the code below, then paste it before code ]]></b:skin>

#under_header{ margin:10px 0; padding:1%; width:98%; }
6. Find out code which look exactly like this :
<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 below, and paste it exactly after that code :
<div id="under_header"> <b:section class=’header’ id=’underheader’ preferred=’yes’/> </div>

8. Click SAVE TEMPLATE buttons, and wait until your template saved.
9. Now you already have an element which placed exactly below your header. Feel free to add any elements do you wanted to. Want some Google Advertise, or maybe some photos, it’s all up to you!

No comments:

Post a Comment


Related Posts Plugin for WordPress, Blogger...