Skip to main content

How to Add Extra Widget Section to Blogger Header

In this tutorial you will learn tips to add extra widget in blogger header section in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box or your AdSense ads within the Blogger header.


Step 1: Login to your blogger dashboard and backup your template. Click "Edit HTML" button.

Step 2: Find for the below codes which you have edited and implemented in previous tutorial:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<div style='clear:both;'/>

Now find for <div style='clear:both;'/> which is marked in red in the above codes and before it add:
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
So the full code will be:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/><div style='clear:both;'/>

Step 3: Find ]]></b:skin> and before it add the following CSS:

.header-right {
display: inline-block;
float: right;
width: 400px;
}
Now you can customize the width of header & header-right section according to your choice.

Step 5: Save your template. Go to Layout tab and from there you can add a new gadget to the newly created extra gadget section within Blogger header. If you find that the extra gadget section is created just under your Header gadget as shown in the image below, you need not to worry about it as when you will view your blog, it will appear side by side as it's seen on the demo.

Comments

Popular posts from this blog

MOST AMAZING HUMAN ART

source:white carousel Flowers are no doubt blessings in this Universe. Its fragrance amazes all the living creatures in this earth. Flowers make people happy as well as it helps to make people smile. This flower is not real. If we take a close look of this human flower, we will be able to know about the originality of these flowers. If we observe a naked human body, we feel a little bit irritation but when naked bodies together with makes most beautiful flowers it gives us pleasures. A flower has different effect in human life. The most calories come in human bodies due to flowers in the forms of rice, corn, wheat etc. The author of these amazing pictures is CECELIA WEBBER. Many a years ago poets and authors have written about flowers. These artists once used flowers in their writings to symbolize love and also to indicate different human emotion. There are many similarities between flowers and human beings. Flowers have ovaries, ovules similar to male and female organs. Human beings ...

The joys of urban gardening

Having recently been baptized as an urban gardener I wanted to share a little behind-the-scenes action and a few of the benefits I’ve discovered on my green-fingered adventure so far. .CPlase_panel display:none; ( function() if (window.CHITIKA === undefined) window.CHITIKA = 'units' : [] ; ; var unit = 'publisher' : 'imzas', 'width' : 728, 'height' : 90, 'sid' : "wordpress-plugin below", 'color_site_link' : '0000CC', 'color_title' : '0000CC', 'color_text' : '000000', 'color_bg' : 'ffffff', 'font_title' : 'Tahoma', 'font_text' : 'Tahoma', 'impsrc' : 'wordpress', 'calltype' : 'async[2]' ; var placement_id = window.CHITIKA.units.length; window.CHITIKA.units.push(unit); var x = ""; document.write(x); ()); The joys of urban gardening

Add stylish search box to your blog

A search box helps visitors to access specific information on your website or blog. So adding a search engine enhances blog page view & keep readers stick to the site. Here is the code for search box. <style> #abt-search-btn {     background: none repeat scroll 0 0 #359BED;     border: 0 none;     border-radius: 0 0 0 0;     color: #FFFFFF;     font-weight: 700;     padding: 10px 20px; } #abt-search-box {     background: none repeat scroll 0 0 #EEEEEE;     border: 0 none;     padding: 10px;     width: 250px; } </style> <form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="abt-search-box" name="q" size="40" type="text" placeholder="  imzas "/> <input id="abt-search-btn" value="Search" type="submit"/> </form>