Sunday, 9 October 2016

How To add Gadget inside Blogger Blog Header for Any Stuff

  03:46:00

Step-1 (Default Header Layout):

Login into your blogger account and visit theLayout section of your blog to see the header position whether it is single or has already been divided. Here is screenshot for the default blogger blog header.
If your blog contains only one column in header section as above, then follow the next steps to divided it into two parts.

Step-2 (Template Editor):

Go to the Template section of your blog and click on Edit HTML text button next to the Customize button. See the screenshot for template Edit HTML button.

Step-3 (Edit Template):

Click on Jump to widget from the top drop down menu and select Header1 as shown in this screenshot.

Step-4 (Delete Default Header Section):

You will see codes which represents default blogger blog header section.

Now, delete all these codes so that the older header section will be deleted.

Step-5 (Insert New Header Section):

Copy and paste these HTML codes in place of old header section deleted codes as shown in this screenshot.
    

  1. <!-- SWT Header Section START --><div class='region-inner swt-header-inner'>
    2. 

  2. <b:section class='header-left' id='header-left' maxwidgets='1' name='Header-Left' showaddelement='yes'/>
    3. 

  3. <b:section class='header-right' id='header-right' maxwidgets='1' name='Header-Right' showaddelement='yes'/>
    4. 

  4. </div><!-- HELP: http://www.superwebtricks.com/display-adsense-in-blog-header -->
    5.
Don’t delete the HELP URL address from the last line of above code as it may help you in future for any updated tutorial and code upgradation.

Step-6 (CSS for New Header Section):

Now, press Ctrl + F for search the ]]></b:skin> and paste the following CSS codes above/before it.
    

  1. .swt-header-inner { /* HELP: http://www.superwebtricks.com/?p=570 */
    2. 

  2. width: 100%; display: flex;
    3. 

  3. }
    4. 

  4. .header-left {
    5. 

  5. width:50%;
    6. 

  6. margin:0;
    7. 

  7. padding: 0;
    8. 

  8. float:left;
    9. 

  9. overflow:hidden;
    10. 

  10. }
    11. 

  11. .header-right {
    12. 

  12. width:50%;
    13. 

  13. margin:0;
    14. 

  14. padding: 0;
    15. 

  15. float:right;
    16. 

  16. overflow:hidden;
    17. 

  17. /* Blog Header inserted by www.superwebtricks.com */}
    18.
See the screenshot here.
Now, click on Save Template to save the all avobe steps in your blog template.
Customization: You may adjust the width of Header-Left and Header-Right section in accordance with the title/logo of your blog or the size of AdSense Ads to be displayed.
You may also specify the width in pixel instead of percentage. Suppose you want to show your blog LOGO (70px) on the left side and insert AdSense codes (728px) on the right side in header section. Replace the CSS codes of header-left width:70px;and header-right width:730px; depending of your blog layout width (800px).

Step-7 (Insert New Gadget):

Navigate the layout section of your blog to see the difference. Here is the screenshot.T