Sunday, 16 June 2013

Tagged under: ,

How to Add Three Column Footer Widget in Blogger

Three column widget for Blogger
Sometime you might be get interested to add professional column widget in blogger template. however we have seen a lot of professional blogger template which have not well organized and have no professional like footer widget. Since from the couple of days we have received so many comments from our loyal readers posting theirs queries about how to add customize footer widget in blogger template. So in today post i am presenting you professional looks footer widget which contain three columns where each column separately accommodate many widgets as you want to add. So once you added this footer section in to your blog then you could easily add furthers gadget separately inside specific column. So In this post we will learn how to add three column footer widget in blogger blog.
Part2: How to Add Multi Columns widget In Blogger: In Process

How This Blogger Three Columns Footer Is Created ?

This widget is created in Css3 and Html. As we know that Html is using for building the maps for objects or creating body shape So in this gadget the Html coding has build its body and divided it into three columns sections.
where as we already familiar with Css ( cascading style sheet) which work as decorating the html object. IT make the Html objects stylishly & designable. So this widget is stylized by Css3. To know more about Css & HTml follow the below tutorial.

Take a looks into This Gadget

If you are willing to know more about how will look like this widget in blogger template then we will show it by screenshots just scroll down and look at its demo by screenshots. This customize widget will look like these gadget mentioned in the screenshots.

Blogger three columns widget

These are two similar Widget with different added Gadget this mean once you added this footer widget in blogger then after it you could easily add further gadgets inside this footer widget. The real example is in front of you.

 1
Customize Three column widget

2
Three Column Blogger Widget

Learn How To Add Customize Three Column Widget In Blogger

In this para you will learn how to add this gadget in blogger template. Follow all the below given steps correctly hope you will not be facing any problem once you follow all the steps carefully. Lets start to adding this gadget in blogger.

Step:1
  • Go to blogger Dashboard:
  • Go to template >> Editor html:
  • Now Search For >> ]]></b:skin>
  • Now past the below given Css code before ]]></b:skin>



/* -----  PBT  LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
      
background:#fff;        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; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;         text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }
.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 dotted #ccc;
}




 Step2:
  • Now Search For this </body> tag and just above it past the below given code:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>


 
Final:
Now you done almost: Save Your Template and refresh your template: 

Make These Customizations

Here is all possible customization which could be easily done inside the widget. So you can customize this gadget by playing with all the above bold color values and codes. So lets do all the possible customization according to your blog designing. Make this gadget according to your blog layout.
  • To change Background color of the entire widget just change #333434;
  • If the width of the widget is exceeding the border or larger than your blog width just decrease or increase width: 960px; value;
  • If you want to change columns title colors just change background:#fff; 
  • width: 32%; is the width of separate columns. to increase single columns increase it.
  • There is a color for title inside each columns gadget if you want to change it just change color:#0084ce;
  • If you want to change fonts size and color just change edit this font: bold 14px Arial, Tahoma, Verdana; 
  • border-bottom:3px solid #0084ce;  Editing this to change the thickness of columns, and change color of borders which appeared at the bottoms of  the Title Headings.
  • border-bottom: 1px dotted #ccc; Editing this to change the style, size and colour of borders which  appeared below link.
  • You done all most: 
  •       

Need Help

Hy guys we hope that you will enjoy this widget for blogger. We hope that there will be no difficulty in implementing this gadget on blogger blog. So if you are facing any problem in implementing then do not hesitate to post your queries. Response will be back within 7/24. Please share your views about this gadget in comments area.

Related Topic

Read: Jquery Slideshow for Blogger Blog 
Read: Google Plus PopUp Like Box For Blogger

34 comments:

  1. Great tutorial Hafeez Bro. Yes you are right sometime we need to add some gadgets like author box in our blog and footer is the best place for such type of widgets. Really helpful tutorial bro. I appreciate your hardwork.

    ReplyDelete
    Replies
    1. Thanks Dears for Share your views here. Yes Dear Customize Footer widget make a blog designable and effective. Newbies should must try to insert this footer widget in theirs bloggers blogs. Thanks hope to see you soon.

      Delete
  2. Very Very nice post dear you have a such skill to provide your concept with other one. I also think to change my blog template. But problem is that you have change you template a lot, like circle popular post, border, Author logo on comment, menu bar, and many more, In the Devil workshop template there is no such kind of these thing, If you choose to do favor with me kindly give me Devil workshop template in which your completely setting added respectively other wise, as your wish because of all is yours..

    ReplyDelete
    Replies
    1. Bro why are liking only devils workshop template that is also alot of template, now adays there is a great hustle of webmeg template. Seconds thing i want to Bro definetely i will give this template you. Wait in coming days i am going to change this one then i will freely it give to you. Thanks for thumbing ups to PBT.

      Delete
  3. wow! Thank You hafeez! I followed this and added this to my new blog on PAKZIP.COM I really like that you are helping us by brining some new tricks and trips!

    ReplyDelete
    Replies
    1. Yes Saqib Bro. this such nice tips to add three column widget in blogger. Since many experiance bloggers do not know how to add this into blogger template. by using the above method everyone can easily add three column footer widget in blogger. Bundle of Thanks Saqib Bro.

      Delete
  4. Thanks bro Hafeez for sharing this nice tutorial. Yes, i definitely agree with you. Adding a 3 column footer to a blog can keep the readers more engaged, and thus resulting in more unique visit and reducing the the blog's Bounce rate. Have a nice nice weeks ahead bro.

    ReplyDelete
    Replies
    1. Oh Vitors Bro thats for your saying such nice words. You always encourages us. Thats truly said bro. Three column widget make the blog more professional. Visitors will automatically stay on blog for a longs time. So it will be better for all blogger users to add such like widget in theirs blogs. Thanks Victors Bro. Happy to see you here.

      Delete
  5. awesome post dude, i really impressed by your affords, footer link is a source of information about author, blog status and so on... keep updating us with such a tutorial, thanks a lot..

    ReplyDelete
    Replies
    1. Thansk Umesh Brothers for giving such thumbings to PBT. Really its a very helpful and professional like footer widget for blogger blogs. Newbies are advised to keep such footer widgets in their blogs.

      Delete
  6. Nice post Hafeez! It is very important to have 3/4 column in footer section of every blogger template !

    Appreciated post ! Keep sharing such techniques !

    ReplyDelete
    Replies
    1. Thanks for sharing your views here. Really a professional like footer widget will make more designable thanks. Bishnu Bro.

      Delete
  7. Bro after applying it my blog has become very slow please help me
    here is my blog http://hackingtipsandtricks11.blogspot.in

    ReplyDelete
    Replies
    1. Not bro we have already implemented this on our blog but no loading issu.

      Delete
  8. with the help of these footer widgets we can use footer area. Amazing article dude

    ReplyDelete
    Replies
    1. Yes footer area will looks attractive if we put such like footer widget in our blog.

      Delete
  9. i am gladly to add this footer on my blog because i like this hafeez bro u made once again amazing post footer widget give visitors more information about your site like author widget followers etc thanks for this beautiful post...

    ReplyDelete
    Replies
    1. Thanks Rizwan really wanna say somethings about this three column widget if someone insert this beautiful footer widget in theirs blog. This will must change his blog style to professional one. Thanks for sharing your views.

      Delete
  10. Hello Bro,
    As You Know My New Blog Started And Iam Designing A New Blogger Template I Like Your Your Footer Please Can You Give Me Your Footer Coding
    Regards,
    Abdul Samad : Your Loyal Reader Always

    ReplyDelete
  11. @Abdul Samad: yeah, I have the same interest with you bro.
    @ Hafeez Khan: Could you share the the footer code in the next post of your blog? Thanks

    ReplyDelete
  12. Thanks Hafeez,
    you have shared here great widget code. it is very helpful and easy to use.
    in this code only needed material you have posted. so thanks again......!!

    ReplyDelete
  13. I didn't get the code
    ]]>
    in my template....

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. A innovative cards style explains everything about you in simple manner. Let our cards developers style a unique and personalized cards that are suitable for your character. Our team of developers has years of experience in this regards and we are well aware of what a cards style means to a person
    business card designer

    ReplyDelete
  16. Thank you thank you thank you. You're a real blogger. It worked perfectly for my blog. I had no footer before. The customization is smooth too. I'm using it on My Blog now .

    ReplyDelete
  17. Thank you so much for this code. I was trying to get it right, but everytime something went wrong. You solved my problem, Thanks a lot!

    ReplyDelete
  18. Hi! How about a "one column" footer without borders? And then, I followed your tutorial, but how can I add widgets? :(

    ReplyDelete
  19. Thank you bro
    www.pcgamecloud.com

    ReplyDelete
  20. Thanks for your great blog post here. When choosing a right web hosting services provider, make sure what you really need in your good hosting plan for your business as well. Keep it up.
    Situs Perusahaan

    ReplyDelete
  21. Thanks it shows on both mobile and PC version and i wanted it only on Web version how can I get it done.

    ReplyDelete
  22. it's not working ,instead it gets 3 row footer

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism