Tutorial: Add More Widgets To Your Blogger Template

Jun 8, 2012 in , ,

One of the first things I learned when I started making my own blog templates was how to add more widgets. It was a problem for me because I wanted to add certain html widgets (such as the rss and email subscription balloons you see above), but there was no way to add widgets there. After searching around, I found that it's possible, and you can do it in 3 simple steps. Read on to find out how.

Step 1: Getting There
Log-in to your Blogger dashboard, and go to template. Before you start doing anything, back up/restore your template (the button is at the top right). Now, click edit html, then proceed. After that, click Expand Widget Templates. You should see the html for your blog.

Step 2: Finding The Code
Find the code (command + f or control +f) header-wrapper. The code surrounding it should look like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
 The most important lines for this hack are the first two (before HTML3), so it doesn't matter if the rest are slightly different.

Step 3: Editing The Code
All you have to do now is change two simple parts that are highlighted below.

Change no to yes. This will make "add element" appear in your header area when you go to your layout, just like what you see in your sidebar.

Change 1 to 5. As the word before it suggests, that number controls how many widgets you are allowed to add. You can change it to any number, but I personally prefer a larger number so I won't have to edit the code again if I need to add many widgets.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

Finished
There you have it! Pretty easy, right? All you have to do is edit a word, and a number. The same technique applies to any part of your blog. If you scroll around that area, you should see titles such as main-wrapper or sidebar-wrapper. You can do what you just did to those too, and achieve the same results. Try it for yourself!

If you have any questions or problems, feel free to leave me a comment, or tweet me @keepmenear. I'll be sure to get back to you.