Sunday, January 10, 2010

Add a Customized Three Column Footer Widget In Blogger



Three-Column-Footer You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

 

See a screenshot, Three-Column-Footer-Widget

Add This Three Column Widget Inside Your Blogger Templates

Follow these steps,

  1. Go To Blogger > Layout > Edit HTML
  2. Back Up your template
  3. Search for ]]></b:skin>
  4. Just before ]]></b:skin> paste this CSS code,

/* -----   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;
}

 

 

    5.   Now Search For <div id='credits'> and just above this code paste the code below,

<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>

 

 

Note:- If you can not find <div id='credits'> then share your BLOG URL in the comment box so that I could tell you which code should you search for in your template.

6.  Save your template. done!

Now visit the page Layout > Page Elements and start adding widgets! :>>

Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our advanced Colour Code Generator

  • background:#333434;   Changing the six digit colour code will change the background colour of this widget.
  • width: 960px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
  • background:#fff;  and    width: 32%; is the background colour and width of the three columns where the widgets are added.
  • color:#0084ce; This is the Colour of Title Headings
  • font: bold 14px Arial, Tahoma, Verdana;  Edit this to change the font size and family.
  • border-bottom:3px solid #0084ce;   Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
  • border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links.

That’s All!

A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor!


Respected Readers:
As a 20 year old student, the only income I rely on is my pocket money. Bearing the running costs of MBT Blog has become really difficult. We educate thousands of bloggers a week with our tutorials. To help us go forward with the same spirit, a small contribution from your side will highly be appreciated.



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter

49 comments:

Smaracande on 4:05 AM, January 11, 2010 said...

salam,wow,it's very usefull as tricks thank you very much for sharing.
http://webizland.blogspot.com/

RAHUL on 9:56 AM, January 11, 2010 said...

hey mohammad

one thing for you

_ ________
/ / /----> thankyou.......................
-(o)-----(o)

a truck full of thankssssssss

Mohammad Mustafa Ahmedzai on 1:17 AM, January 12, 2010 said...

I thank both of you! :>

saimoom on 8:44 PM, January 13, 2010 said...

I cant find Step:5 no code.
How can I add this?

Mohammad Mustafa Ahmedzai on 1:21 AM, January 14, 2010 said...

@saimoom

Find this instead

<div class='left'>

And paste the code in step #5 just above/before it.

saimoom on 2:28 PM, January 14, 2010 said...

I can find it left div, but when I am going to save the templete it show (The string "--" is not permitted within comments.)

please help me again.
Thanks.

eBince on 3:46 PM, January 14, 2010 said...

its not working T_T

Mohammad Mustafa Ahmedzai on 9:05 PM, January 14, 2010 said...

Update:-

I have updated the code you guys can try again. It will surely work perfectly this time! :>>


@saimoom
Do as guided (In the comments) this time.

saimoom on 11:29 AM, January 15, 2010 said...

Hello Sir.
This time I can add. But I am facing other new problem. My problem is 3 widget by your way should arrange like

1 2 3

But my widget have arranged like this type

1
2
3

How can I arrange it 1 2 3


My URL: http://saimoom.blogspot.com


Thanks and Regard.

Steve on 2:44 AM, January 16, 2010 said...

Hi Mohammed

Same problem...step 5..heres the url to my blog

http://www.santos-football-club.com/

Many Thanks in advance

Fred D on 4:17 AM, January 16, 2010 said...

Nice code, but I cannot style widget fonts, particularly the headings. My sidebar widgets already use the h2 heading and I want to use the same properties for the footer widgets except for some color changes (because the footer color is different from the sidebar's). I've created a h5 heading that should work, to replace the .lowerbar h2 but it doesnt...Any suggestion?

Jayaraj.chinna on 10:56 AM, January 16, 2010 said...

hai MBT Here is one suggestion for
i proudly tell u that u are a unique designer of blogger templates but while u r providing templates why dont u put an Image of the layout page so that readers can see the preview of the page elements for ur template.

Mohammad Mustafa Ahmedzai on 9:30 PM, January 16, 2010 said...

@Saimoom,


Send me your template. I will do it for you. You can email me your template at mustafa.stc@ G Mail

@Steve

You already have a three column widget at bottom! Did you share the right blog URL? :>


@Fred
To edit the font size, colour and style of the heading h2, edit this part of the CSS code,

.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;
}


To increase or decrease the font size, simple change the value 14px I have visited your blog and found that your Heading colour is #999 and the border colour is #ccc. Make your changes accordingly. For using a different colour code, use this tool -> Color Code Generator

Feel free to ask anything still unclear :>


@Chinna

Thanks pal! I will do so in my future posts :>>

Remington Golf Club &amp; Kissimmee Bay Country Club on 1:07 AM, January 19, 2010 said...

Muhamed di you receive my request I have no footer and need to add a footer widget to have the ability to add the custom widet to it?

leathergloves on 2:42 PM, January 20, 2010 said...

Added a link from my blog http://blogger-templates123.blogspot.com to your website.

I always wanted to do this. I just need time to try this out.

Mohammad Mustafa Ahmedzai on 5:35 PM, January 20, 2010 said...

@Remington

Bro I really received no mail. Will be waiting to receive it soon :>


@leathergloves

Thanks for the love and encouragement. Highly appreciated it! :>>

leathergloves on 5:56 AM, January 22, 2010 said...

I suggest using 31% instead of 32%. Your blog and my test blog http://blogger-templates-123.blogspot.com (for testing) looks warped i.e. 3rd widget comes down when I viewed in 800x600 resolution.

Use the same color for the widgets as the background so that the different lengths of the widgets does not stand out.

Pavan Somu on 11:37 AM, January 22, 2010 said...

This was a great post for blogspot bloggers. Thanks for sharing.

Esymovies on 1:35 PM, January 22, 2010 said...

this is working on my blog
thanks Mohammad

http://esymovies.blogspot.com

Mohammad Mustafa Ahmedzai on 12:24 AM, January 23, 2010 said...

@LeatherGloves

Yeh it will certainly shrunk in 800 by 600 screen resolution. Actually the widget is set to width 960px and this goes just fine with a screen resolution 1024 by 768.
You can easily adjust the settings by changing the width to 800 or 750px. In your case reduce the 32% to something 20-25%. Keep playing with it until you get a well aligned widget. Hope that would help :>

@Pavan Somo

Thanks pal!

@Easymovies

Guess that one is not mine :P

Remington Golf Club &amp; Kissimmee Bay Country Club on 7:21 AM, January 23, 2010 said...

HI Mohamed My issue is that I don't have a footer in my private Blogg. Can you show me the code to add a footer. I have added the 3 column footer to my main blogg but my training Blogg has no footer to be able to add widgets, and the code.
Thanks I really appreciate what you do here I have learned alot.
Regards,
Mark

Mohammad Mustafa Ahmedzai on 6:01 PM, January 24, 2010 said...

@Remington

Well the widget can be added to any blog. I guess you are not able to find a certain code. Share your Blog url so that I could tell you which code to search for and where to add the three column widget code.

Poras on 8:12 PM, January 24, 2010 said...

Hi I Cannot Find The Step 5 Code in my Blog My Blog URL http://tysonporas.blogspot.com

Remington Golf Club &amp; Kissimmee Bay Country Club on 5:19 PM, January 25, 2010 said...

HI Mohammad here is my URL I have sent you and added you into permissions so you can see it it is a private training blogg for my staff. the url is: http://remingtonkissimmeebayuptospeed.blogspot.com
In the Layout I do not have a footer area to add widgets. I need to code to add a footer....

Designer+ on 12:36 AM, January 26, 2010 said...

thanks for this code.

Designer+ on 12:47 AM, January 26, 2010 said...

sorry i don't find div id='credits' !!!
but i found div id='sidebar'
div id='page'
div id='backlinks-container'
div id='header-inner'
here is my blog link : http://walidplus.blogspot.com
thank your for help

Civic_Princess on 2:25 AM, January 26, 2010 said...

hi I can't find step 5 on my blog either and my blog url is www.fantagerocks.com or fantagerocks.blogspot.com

Mohammad Mustafa Ahmedzai on 9:09 PM, January 26, 2010 said...

All of you kindly find this code instead,

<div id='footer'>


and add the widget code just above <div id='footer'>
This will certainly work!

Remington Golf Club &amp; Kissimmee Bay Country Club on 5:44 AM, January 27, 2010 said...

Perfect Thanks Mohammad!

leathergloves on 3:12 PM, January 27, 2010 said...

Checkout my implementation on
http://firesfiresfires.blogspot.com

I added a footer2 (CSS and widget) because I also wanted to add the long widgets before and after the 3-column widgets.

Btw, 31% works fine on a 800x600.

Super thanks.

Anonymous said...

www.hrithiks.blogspot.com how to do dis :(

shabnamahsan on 8:28 AM, January 28, 2010 said...

assakam alaikum
step 5 is not working for me also....plzz guide me what to do...here is the URL of my blogs

http://bookshive.blogspot.com/

http://styleuplife.blogspot.com/

Sreejesh on 6:49 PM, January 28, 2010 said...

I can't find div id='credits' in my page http://www.123tunestore.com/

Poras on 10:46 AM, February 06, 2010 said...

I Want To Know Is There Any Way i can add this Widgets at the above instead of Bottom .

See This Image
http://i48.tinypic.com/15dizq.jpg

Or

Can i have a sidebars like your is ,In the upper 1 Big and after that 2 small.

Mohammad Mustafa Ahmedzai on 12:59 PM, February 06, 2010 said...

@Leathergloves

Great work! :>


@Shabnumahsan

W/salam
Dear paste the html code just above </body>


@Sreejesh

Instead of div credits find </body>
and paste the html code just above </body>


@Poras
You can add the widget below Header by choosing the HTML/JavaScript widget. Simply copy and paste the HTML code inside the HTML/Javascript widget. That will work :>>

Poras on 1:42 PM, February 06, 2010 said...

No i m saying i want to add the These three widget after the Header Section instead of bottom so if there is any way plz tell me.

Mohammad Mustafa Ahmedzai on 3:08 PM, February 06, 2010 said...

@Poras

I told you the same thing dude :| To add those three columns below your header simply copy-paste the html part of the code inside HTML/JAvaScript widget and drag this widget and drop it under your Blog HEader.

Another method is a bit hectic but worth trying.
1. Search for <div id='header-wrapper'>
2. And just below <div id='header-wrapper'> your will find this code </b:section></div>
3. Simply paste the HTML code below </b:section></div>
4. Done!

If you are confused what I mean by HTML code then here is the code as already shared in the post above,

<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>

Poras on 11:01 AM, February 07, 2010 said...

Thanks You
For The Help And Very Fast Reply.

dhi-burunu on 9:16 PM, February 11, 2010 said...

i cant find the code in step 5. cn u help me? my blog is

dhiburunu.blogspot.com

אלי on 2:10 AM, February 12, 2010 said...

I can't find the div id='credits' code.

http://shliches.blogspot.com/

and by the way, may you have a link to some article about how to make roll over effect to the titles.

the design is temporary...

thank you,
you have a great blog

Tina on 1:43 PM, February 14, 2010 said...

Hi Mohammad,

I also cannot find div id='credits' in my Blog. Thanks in advance!!

http://28dayfastingexperiment.blogspot.com/

Mohammad Mustafa Ahmedzai on 5:04 PM, February 14, 2010 said...

Those who can not find the code in step#5 may find the code below instead,

</body>
And paste the widget code just above </body>
Things will work as it did for others!

אלי on 5:33 PM, February 15, 2010 said...

thanks

varun on 8:24 PM, February 18, 2010 said...

techie-soltuions.blogspot.com is my blog's url. I Really need it

Abhineet on 4:59 PM, February 20, 2010 said...

I cant find code in step.5
How can I add this?
My blog is http://abhicomputech.blogspot.com/

Blogger Widget on 8:22 PM, February 24, 2010 said...

thanks for tutorila ilike this, i tray your article and succses thanks ilike this

LockerzRomania on 3:11 AM, February 26, 2010 said...

hi man i cand find the step 5 code pls help me http://lockerzrro.blogspot.com/

thanphong07 on 8:20 PM, March 01, 2010 said...

Hi Mohammad ! After I add 3 column footer in my template, sidebar and main are not same height! Why ? Please help me ! Thanks !

Kytro on 3:15 AM, March 06, 2010 said...

cannot find div id='credits' my blog is http://www.guidegoods.blogspot.com

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:-
1. Please do not spam Spam comments will be deleted immediately upon my review.
2. For asking Off-Topic questions please comment on this page -> Blogger Help

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

258+ Followers

Join The Team!

Licensed Under CC

Creative Commons License

Recent Comments

Follow Me On Twitter

| My Blogger Tricks (MBT) © 2010. All Rights Reserved | Template Style by Mohammad Mustafa Ahmedzai |