How to Get New Blogger Widgets "Add a Gadget" on Your Blog?

Hi bloggy readers,
If we are currently using the default template provided by Blogger, such as Minima and Rounders, usually those blog templates will only give you 1 blogger widgets element beside the post content in blog layout. Whereas, many bloggers love to add more blogger widgets beside the post article. So, by adding new blogger widgets into our blog template, will give us more freedom on adding more elements in the sidebar. That's why i decide to make this post.


But firstly, i need to explain to you about the concept of body layout, so later, you will be able to get the better understanding regarding the whole part of your blog layout. Now look at the picture below!


Now take a look at the Outer-wrapper position in that picture. As many of you know that Outer-wrapper is the whole body part of your blog template. Outer-wrapper contains:

• header element,
• post content/main wrapper,
• sidebar/sidebar wrapper,
• and footer element

So Outer wrapper is the body that holds all the elements from your blog. Okay, if you can understand the concept of body layout, now we can proceed to the practical tutorial..


And now we want to add a new sidebar element in our blog template. So the first thing to do is, we must increase the size of Outer Wrapper in order to give an extra space for our new blogger widgets on sidebar. So, if the Outer Wrapper width size has been manually expanded, we can have an extra space for our new sidebar.

Okay, let say, i want to make a new blogger widgets element with the width size of 180px, so firstly, we need to change the size of the Outer wrapper in order to give an extra space for the new blogger widgets element. For example the size of main wrapper is 410px, sidebar wrapper is 220px, and the new sidebar wrapper is 180px, and also 30px for an extra space. And the old size of Outer Wrapper is 660px. Now look at the total size of layout that has been calculated.

As you can at the calculation above, the total of 840px indicates the new width size of Outer Wrapper. So, the Outer Wrapper must be expanded first from the old size of 660px into the new size of 840px.


1. Login to Blogger
To begin this tutorial, now go to Blogger.com and Log in to your Blogger account.


2. Go to Edit HTML
In the Dashboard page, pick one of your blog and go to the Layout/Design page. In the Page Element, now click at the sub-tab Edit HTML to begin editing the whole code of your blog template.

Anyway, before doing any kind of customization, i strongly suggest you to save your current template to make a back up template, which i've already told you why you need to do this, it's even a must thing to do before editing your blog template. Now click at the link Download Full Template.

3. Find the code that defines the outer wrapper layout
Now in order to body layout of blogger, you must firstly enter the Find mode on your browser. Now, by press Ctrl + F at the same time, you will enter the search mode. Now find the code below:

4. Replace the numeral code
And now change the red value 660px with 840, so the code should look like this

5. Adding a new sidebar layout
The next thing to do is to add a new CSS for the blogger widgets column, now block all of these codes below and then put the code after the sidebar wrapper code. By adding this code, your new blogger widgets element will be installed to your blog template.

As you can see in the code below, the new blogger widgets element has been added to your blog template. So, the whole part of the code from outer-wrapper to the new sidebar wrapper should look like this. Pay attention to the red code below. That's the new CSS for the new sidebar.

6. Find the code that defines the old sidebar element
Now, in order to make our new installed blogger widgets element to be shown in our blog, we have to add the div tags code. By pressing Ctrl + F buttons at the same time, now scroll down to the bottom of the HTML code and find the code below:

7. Copy and Paste the code
Now block all of these codes below using your mouse cursor, and then press Copy. After that, put that new sidebar code after the old sidebar wrapper code. By adding this code after the old sidebar code, our new blogger widgets element is ready to be shown in our blog.

So, as you can see in the code below, after the old sidebar-wrapper code, we have successfully added a new blogger widgets element into our blog template. So the whole sidebar code will look like this:

8. Find the code that indicates the header and footer element
Ok, the next thing to do is, we need to adjust the width size of the header and footer element into the same size as the Outer wrapper. Now, by pressing Ctrl + F at the same time, find this header element code:

9. Change the numeral code
After locating the position of the header element, now we have to adjust the width size of the header into the same size as the Outer Wrapper. Now change the numeral code 660px to 840px. By changing the width size from 660px to the 840px, now the header element will have the same size as the Outer Wrapper. And the code will look like this:

10. Find the code that indicates the footer position
And then next thing we have to do is to adjust the width size of footer element into the same size as Outer wrapper and Header wrapper. Now by pressing Ctrl + F button on the keyboards, find these codes:

11. Change the numeral code
Again, change the width size of footer element from 660px to 840px. By doing this, the footer element has now been expanded into the same size as the Outer Wrapper and the Header element.


12. Save the changes
Now Save the template and you can see the result by clicking the preview button.

Okay guys, i think i need to rest my finger and get a cup of coffee because my fingers are so damn tired. Hope this tutorial help you all. Anyway, are you having any trouble on applying this tutorial on your blog? Don't be shy, just leave your question on the comment section below. I'll try my best effort on helping you with your problem.

Good luck bloggy!