Add Advanced Three Wrapper Widget in blogger

You have seen the three wrapper widget in many modified templates. It is very useful in blogging platform. You can add html and javascript gadgets like recent posts, recent articles, popular posts or whatever you like. It is better to add gadgets in sidebar. But it's more better to keep widget in bottom of the page.

As it is bottom of the page, readers can read your full article first and widget in last. Where widgets are not much important your post. See the following example:

You can add this widget by following the steps.

First Log in to Blogger.com

Go to Layout -> Edit Html Tabs.

Now search for these code:

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

    </div></div>
   Paste your code here.

 And paste the below code as show above:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='HTML10' locked='false' title='Recent Posts' 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>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Recent Posts' 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>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='Text2' locked='false' title='Recent Comments' type='Text'>
<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>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

If you get some problems, you have to add the CSS code.

Now, find ]]></b:skin>

Paste the following code before ]]></b:skin>

#lower {
       margin:auto;
       padding: 0px 0px 20px 0px;
       width: 100%;
       background:#F6F6F6;
      
     
} 
#lower-wrapper {
       margin:auto;
       padding: 30px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
       border:1px solid #DEDEDE;
       background:#FFFFFF;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}


.lowerbar h2 {
       margin: 0px 0px 10px 0px;
       padding: 6px 0px 10px 6px;
       background: #7AA1C3;
       text-align: left;
       color:#FFF;
       font-weight: normal;
       font-size:16px;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #ccc;
}

.lowerbar a {color:  #698CAB; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: #B5BFC9;}
.lowerbar a:visited {text-decoration: none; color: #B5BFC9;}

You can customize the CSS code as your like and Save The Template. And you're Done!

See in the layout section. You can find three new advanced 'Ad a Gadget'. Now add whatever you like!