How To Add Banner Or Search Box In Blogger Header

Before starting our tutorial for today I would urge you to ask from yourself that have you properly learned the tutorials related with customizing and adding of customized header in your blog. If your answer is yes than this is going to enhance your knowledge related with additional features in your blogger header. Today we shall be discussing How To Add Banner Or Search Box In Blogger Header new interface or any other widget you want to be displayed on your blog header.

Integration of new section in header will enable to act as widget container and is shown by box of dash lines it is generally represented like “Add A Gadget Link”. Once it appears than it is easier to perform other operations without any endeavors. 

                            

 So now let us start our tutorial for integration various widgets in your header:

A. Adding A Section in HTML

1. Move to your blogger account;

2. Click on Template widget and select Edit HTML Option. Proceed (old interface: move to Design and click on Edit HTML);

3. Before performing next step take a backup of your template;

4. Confirm that the expand widget template check box is UNCHECKED;

5. Search for the lines mentioned below in your code for HTML.

            1   <b:section class='header' id='header' maxwidgets='1'showaddelement='no'>

       2  <b:widget id='Header1' locked='true' title='Bloger Tutorials | Google | Internet Marketing (Header)' type='Header'/>

            3   </b:section>

6. For adding a section, insert the code mentioned below it:

To copy code, click < > icon at the right side mentioned at the right side of your page

            1    <b:section id='header-right' showaddelement='yes'/>

            2  
<div style='clear: both;'/>

7. The final code will be displayed like this:

           1 <b:section class='header' id='header' maxwidgets='1'showaddelement='no'>

      2 <b:widget id='Header1' locked='true' title='Blogger Tutorials | Google | Internet Marketing (Header)' type='Header'/>

           3 </b:section>

           4 <b:section id='header-right' showaddelement='yes'/>

           5 <div style='clear: both;'/>

By performing the above mentioned exercise for integrating section in HTML you will be benefited with two sections in your blog header one section covering the current title of blog at the top and next section below it. 

B. Styling Section (in CSS): 


This step will teach you process of placing section next to each other i.e., the section of title at the left side and the next section at the right side. This can be done by carrying out of following steps:

1. Let us assume that you have logged in blogger dashboard and then move to design widget and select Edit HTML page. In Edit HTML page search for the code mentioned as ]]></b:skin>.

2. Add the CSS code mentioned below, just at the top of line.

To copy code, click < > icon at the right side as you did above.

         1  #header, body#layout #header {width:50%;display:inline-block;float:left;}

         2 #
header-right,body#layout#header-right{width:35%;display:inline-block;float:right;padding:15px;}

         3 
#header-right .widget {margin:0;} 

C. Integrating the Widget: 

By carrying out the following exercise you will be enabled to integrate banner, search box, Adsense ad Unit and various other widgets according to your choice. For this you have nothing to perform any rigid exercise you just have to perform the same exercise you did for installing a widget:

1. Go to Layout (Old Interface: Go to Design and select for page elements);

2. Click on option of adding A Gadget Link and insert your widget;
        

Note: You may not find wireframes for header for designer templates.  Nonetheless they should appear on blog.

3. Save the above commands and have a look to your blog.

D. Placing  Widgets: 


If you find widgets just below the blog title at the right side, then go to CSS code as carried in step 2 which you performed for styling section (in CSS). Now change first line of code in the header and header right width (in 2nd line of code). This can be done with by placing different values according to your requirement.

2 comments:

  1. I had a lot of problems trying to add a banner into my blog header actually. I finally figured it out after A LOT of effort - I wish I had read your blog first! Great instructions and easy to understand for someone like me who doesn't know a lot about websites :)

    ReplyDelete
  2. Great if it helped you. I like to help people.

    ReplyDelete

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check