Add 2, 3 or 4 Column Widget on Blogger Footer

Posted by Anonymous on October 22, 2016

Add Extra Column On Blogger Footer:

Now I discuss with you, how to add two, three or four column footer widget on blogger. You have a stylish blogger blog but there is no any footer widget column. Now you will get this problem solution in this tutorial. In this footer widget section you can add whatever you want. So friends follow the bellow tutorials and make you footer widget and enjoy.

Create Extra Columns to Your Blogger Footer Layout:

Login to your Blogger dashboard
Select your blog and click on right side bar
Select "Template" on drop down menu

Now create a backup of your blogger template because if you have any wrong this template after edited, you can restore this. So click on Backup /Restore and download Full Template.

Best Widget:

* Add Flash Animated Label Tags Cloud Widget

* How To Add Total Preview Hit Counter Widget

* Add Multi Color Social Followers Widget on Blog

After backup your blogger theme you follow the bellow lesson steps by step and create your own extra footer column.

Step 1:

Add Additional 4 Column Footer in Blogger Template:

Click on "Edit HTML" button

Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the Blogger' search box.

A. Write Search box then hit enter your keyboard and find this tag

]]></b:skin>

B. Past the bellow footer widget code before this tag

Useful Tips:

* New Email Subscribe Widget With Facebook+Google+Twitter Button

* How to Add Blog Archive Widget on Blogger

* How to make RSS feedburner reader widget/button?

Four 4 Column Footer Widget CSS Code:

/* -----   help2blogging three column footer widget With two style---- */
# h2b {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#h2b-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

# h2bbar-wrapper {
     border:1px solid #DEDEDE;
       background:#038F69;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 23.5%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}

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

. h2bbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:# FFFFFF;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #FFFFFF;
}

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

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