Promote Cartoon Character To Decorate Your Blog Footer

Promote Cartoon Character To Decorate Your Blog Footer


Tailor your Footer

Cartoon Character is now-a-days rapidly using in different blog which has brought a revolution in blog platform as well as design. Many bloggers are using Human character as a Theme of their own blog which is able to establish a place in visitors mind. whenever they think about that particular blog then an image will appear in your mind. This can be call creating an unique identity through Cartoon Character. We can use different Human Character set that is available to use for Personal and Commercial purpose under creative common License or you can use by your own creation.

However I have chosen a section that is often included in some good blogs with Human Character called Picture Footer. This section is generally placed above or below Blogger footer which contain some pictures with specific message and links such as, About Us, Advertise Here, Write For Us, Contact Us etc. Generally this section easily distract visitors mind to Images. We know Images fulfill the lacking of blog contents, with this theory If you can add some attractive Images on the above/below footer then section then you can overcome from certain lacking as well as you blog will become more beautiful.

I have got many Message and E-mail about the Source code of BloggerSpice's Picture Footer which is holding a place above footer section and finally I am going to reveal it for my loyal readers thus they can tailor their own blog.

I have used here a set of Images of Teen Girl who is expressing different gesture. This image set is under creative common License 3.0  furthermore you can use it for personal and commercial purpose but you are not allowed to redistribute. So you don't have any legal bindings to use it. So let's go for main tutorial to add this in your blog template. Before proceed you must have a Full Horizontal Widget in your templates.

Live Demo

Step 1 Go to your Layout tab.

Step 2 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 3 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<div class='widget-content'>
border-top:5px solid #c0c0c8;
padding:50px 0 10px 0;
#BS-Footer li{
background:url( no-repeat 0 0;
padding:0 5px;
#BS-Footer li:hover{
background-position:0 -180px;
#BS-Footer li:first-child{
#BS-Footer li a{
text-shadow:#222 0 -1px 0;
#BS-Footer li a:hover{
#BS-Footer li a img{
#BS-Footer li a br{
#BS-Footer li a strong{
-webkit-transition:opacity .2s linear;
#BS-Footer li a:hover strong{
}                                                                                                                                /**/
<div id='BSFooter'>
<ul id='BS-Footer'>
<li><a href=''>
<img alt='Learn More About This Site!' height='198' src='' width='200'/>
<strong style='background: url(;'>About Us</strong>
Learn more about This Site!</a></li>
<li><a href=''>
<img alt='Advertise' height='198' src='' width='200'/>
<strong style='background: url(;'>Advertise</strong>
Want To Advertise Here!</a></li>
<li><a href=''>
<img alt='Need Help' height='198' src='' width='200'/>
<strong style='background: url(;'>Need Help</strong>
Need Help For Your Blog</a></li>

<li><a href=''>
<img alt='Write For Us' height='198' src='' width='200'/>
<strong style='background: url(;'>Write For Us</strong>
Be Our Guest Publisher</a></li>

<li><a href=''>
<img alt='Contact Us' height='198' src='' width='200'/>
<strong style='background: url(;'>Contact Us</strong>
Want To Interact With Admin</a></li>
<div class='clear'></div>


  • Change with your link Location.
  • Change Learn More About This Site! With Image Alternative text. 
  • Change Learn more about This Site! with your own Text.

CSS Part of Promote Cartoon Character To Decorate Your Blog Footer

Please follow the CSS Tutorial from below link to fix the widget. If you face any problem then feel free to contact with me.

thank you so much. I was looking for this source code

Boss its cool..thanks

agen sbobet says: 3/19/2013

thank you so much for smiley and cartoon character in your blog

Dr Kuan says: 4/10/2013

Million thanks!!

MM Nauman says: 4/24/2013

hey please help me to get full horizontal widget because i don't have in my template

BloggerSpice says: ADMIN 4/25/2013

you can easily create a new gadget after that you can add the above widget..plz visit the below link...

if you have any more querry plz. feel free to ask..

Unknown says: 5/25/2013

sir how to protect my content from copying and how to complain DMCA If Any one Is copying my content?

BloggerSpice says: ADMIN 5/26/2013

thanks for your comment just visit the following link and read the article about to complain DMCA..

Unknown says: 5/26/2013

Thanks Man Really Helped

MM Nauman says: 5/27/2013

Hey hello admin Please Give Me Cartoon Characters Of Boys Like You ...........Please This Is Request ................And I Want Scroll Bar.............Thank you................And Admin My Widget Container Is 960px So it Is Not Getting Fixed Inside IT What Should I do............please Reply Fast

BloggerSpice says: ADMIN 5/28/2013

I have visited your site widget is fit now . just added a code before starting the widget code...

reduce the character size width='200' to width='175' maybe now it will fix.

And boy character is publishing soon..

For scrollbar please visit the below tutorial link-----

Ritesh says: 8/29/2013

Please Help It doesn't overlaps the footer!! So it has a Cutted Head!! HELP!!

BloggerSpice says: ADMIN 8/29/2013

Hi Ritesh..Please visit the below link and follow only CSS Part to solve the issue.

MM Nauman says: 9/09/2013

Bro What Happened TO This Widget Please Check The Demo

BloggerSpice says: ADMIN 9/09/2013

Hi Nauman.. After changing the Demo template it become narrow. Nothing else. Anyway thanks for informing me.

MM Nauman says: 10/12/2013

Hello Brother How Are You???? Please check this widget images are coming half half i have just checked the URL the image is half only so fix it soon

BloggerSpice says: ADMIN 10/12/2013

Alhamdulillah I am fine. Which one is half or broken..I just check the Demo and code in HTML Editor everywhere this is working fine.

MM Nauman says: 10/12/2013

Please check first and second images of advertise and about us in the script ...

ilusionis says: 10/15/2014

thanks you so much for article and smile..good job
berita unik

PROnav says: 1/26/2015

this is coming vertically , how to make it horizontal

BloggerSpice says: ADMIN 1/26/2015

Hi Pranav, I think your template's widget container width is not set 100%. You can resize the image image size by changing width='200' with width='170' or according to your desire. Generally this widget place at the bottom of the template, I means above the footer section. So there should be a widget adding option which should be minimum 1030px width.

Contact Form


Email *

Message *