How to add widget in a blogger blog header beside the logo

How to add widget in a blogger blog header beside the logo

About blogger is sharing a tutorial that how to add a widget in a blogger blog header beside the logo. Add a gadget in HTML for the top right of the page.

how-to-add-widget-in-a-blogger-blog-header

How to add widget in a blogger blog header Step by Step

it will help you to add a gadget on the top of the right section, tutorial here to add a widget in a blogger blog header tips given as below.

  1. Open blogspot dashboard then go to template area and then click Edit Html
  2. Press Ctrl+f and find the this Code <b:section class=’header’ id=’header’ maxwidgets
  3. Replace the code ” class=’header’ ” with class=’header header-left’.
  4.  Now Find this Code <div class=’header-cap-bottom cap-bottom’>
  5. Paste this Code above it, <div style=’clear:both;’/>
    </div>
    </div>
    <div class=’header-cap-bottom cap-bottom’>
  6.  And Paste this Code Just Above it <b:section class=’header-right crosscol’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’/>
  7. It will Look like this
    how-to-add-widget-in-blogspot-blog-header
  8. Now find the </head> code and add CSS Code just above it.
    <style>
    .header-left{
    display: inline-block;
    float: left;
    }
    #header-right {
    display:inline-block;
    float:right;
    margin-right: -20px;     // optional :used to move widget on right side for adjustment 
    }
    </style>
  9. Click to save, Its Done

 

 

How to add widget in a blogger blog header Video Tutorial

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*