How Can I Add A Gadget To My Blog

This is a template customization tutorial, In which I'll teach you to add a new gadget/widget section in your Blogger layout . So, If you are seeking for a complete guide on "How To Add Widget Section In Blogger?" , then you're on right place.

A Section is an area in the layout of blogger that acts as a gadget/widget container . To add a widget , just click on the Add A Gadget link in your preferred location and proceed with selecting a widget. But, What if you doesn't have an Add A Gadget Link in your desired location? Then, the only way is adding a gadget section (container) code in your Template ; that looks similar to the below code.

<!– New widget container Start –>
<b:section class='NewWidgetContainer' id='NewWidgetContainer'/>
<!– New widget container End –>

Must Add – 10+ Useful Blogger Widget for BlogSpot Blogs.

You're free to change section class and ID names as per your needs. In this tutorial, I'll teach you, how to add gadget section in different places, like under the header, under the sidebar, and under the blog post area.

Basic Steps You Need To Follow

STEP 1] Go to blogger.com >> Select your Blog >> Click On Template >> Click On Edit HTML button.

STEP 2] Now, Backup your template to save yourself from any mistake after making changes in blogger template code area.

Now follow next step where you want to add a new widget section in your Blogger blog.

Add New Widget Section In The Header Area

One of the great location to add advertisements or blog search box is on the right side of your blog's logo (Blog Name). For achieving it, you'll need to add gadget section under the header section of your blogger template.

For this follow steps below;

STEP 1] Using CTRL+F search for the below tag.

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

STEP 2] Just after of closing <b:section class='header' id='header' maxwidgets='1′ showaddelement='no'> paste the following b:section tag like below blockquote code;

<b:section class='header' id='header' maxwidgets='1′ showaddelement='no'><b:widget id='Header1′ locked='true' title='blog demo blogger (Header)' type='Header'>…</b:widget>
</b:section><b:section class='header-right' id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

STEP 3] Now search for ]]></b:skin> tag in the template code area and add the below CSS style code just before it. You can also add this code in a <style> tag in your template.

#header {width:50%;display:inline-block;float:left;}
#header-right{width:40%;display:inline-block;float:right;}

Note: Adjust the widths in the CSS style code until you get it correct according to your template.

STEP 4] Finally, Click on Save Template Button to save this setting properly.

Recommended – Make Paragraph's First Letter Big (Large) In Blogger Blog.

Add New Widget Section In The Blog Post Area

It's an excellent choice to add a widget section to just above or below of blog post area. The process is same as above. Let's get straight to work.

Add New Gadget Section Above Post Area

STEP 1] Search for below code.

<b:section class='main' id='main' showaddelement='no'>

STEP 2] Now, Paste below new b:section code just above of this code. Like below,

<b:section class='main-above' id='main-above' showaddelement='yes'/><div style='clear: both;'/>
<b:section class="main" id="main" showaddelement="no">…</b:section>

STEP 3] Click Save Template button to save it.

Here, At the same place, If you want to add two side by side widgets, then follow the steps given below;

STEP 1] Just like above, Search for below code.

<b:section class='main' id='main' showaddelement='no'>

STEP 2] Now, Paste below newb:section codes just above of this code. Like below,

<b:section class='main-above-left' id='main-above-left' showaddelement='yes'/> <b:section class='main-above-right' id='main-above-right' showaddelement='yes'/><div style='clear: both;'/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1′ locked='true' title='Blog Posts' type='Blog'>…</b:widget>
</b:section>

STEP 3] Now, Search for ]]></b:skin> tag in the template code area and add the CSS style code below just above of it for displaying them side by side. You can also add this in a <style> tag in your Blogger Template.

#main-above-left {width:48%;float:left;display:inline;}
#main-above-right {width:48%;float:right;display:inline;}

Note: Adjust the widths in the CSS style code until you get it correct according to your template.

STEP 4] Finally, Click on Save Template button to save this setting correctly.

Add New Gadget Section Below Post Area

STEP 1] Search for below code.

<b:section class='main' id='main' showaddelement='no'>

STEP 2] Now, Paste below newb:section code just after of this code. Like below,

<b:section class="main" id="main" showaddelement="no">
<b:widget id='Blog1′ locked='true' title='Blog Posts' type='Blog'>…
</b:widget>
</b:section><b:section class='main-bottom' id='main-bottom' showaddelement='yes'/>

STEP 3] Click Save Template button to save it.

Here, At the same place, If you want to add two side by side widgets, then follow the steps given below;

STEP 1] Just like above, Search for below code.

<b:section class='main' id='main' showaddelement='no'>

STEP 2] Now, Paste below newb:section codes just after of this code. Like below,

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1′ locked='true' title='Blog Posts' type='Blog'>…</b:widget>
</b:section>
<b:section class='main-bottom-left' id='main-bottom-left' showaddelement='yes'/>
<b:section class='main-bottom-right' id='main-bottom-right' showaddelement='yes'/>
<div style='clear: both;'/>

STEP 3] Now, Search for]]></b:skin> tag in the template code area and add the CSS style code below just above of it for displaying them side by side. You can also add this in a <style> tag in your Blogger Template.

#main-bottom-left {width:48%;float:left;display:inline;}
#main-bottom-right {width:48%;float:right;display:inline;}

Note: Adjust the widths in the CSS style code until you get it correct according to your template.

If you want to add a new gadget section in the sidebar wrapper, then the process is same as above.

That's it. Enjoy.

Must Read – 7 Powerful Tips To Increase Organic Traffic To A New Blog.

Conclusion:

So above guide is about " How To Add New Widget/Gadget Section In Blogger Layout? " I've tried my best to make this tutorial as easy as possible. But, If in any case you're facing any trouble, then let me know. I'll happy to assist you.

If you like this tutorial, then don't forget to subscribe us and also do share this post with your friends.

Thank You!
Stay Blessed and Stay Happy!