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.

You may like these posts


  1. thank you so much. I was looking for this source code
  2. Boss its cool..thanks
  3. thank you so much for smiley and cartoon character in your blog
  4. Dr Kuan
    Million thanks!!
  5. MM Nauman
    hey please help me to get full horizontal widget because i don't have in my template
    • BloggerSpice
      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..
  6. Unknown
    sir how to protect my content from copying and how to complain DMCA If Any one Is copying my content?
    • BloggerSpice
      thanks for your comment just visit the following link and read the article about to complain DMCA..
    • Unknown
      Thanks Man Really Helped
  7. MM Nauman
    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
      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-----
  8. Ritesh
    Please Help It doesn't overlaps the footer!! So it has a Cutted Head!! HELP!!
    • BloggerSpice
      Hi Ritesh..Please visit the below link and follow only CSS Part to solve the issue.
  9. MM Nauman
    Bro What Happened TO This Widget Please Check The Demo
    • BloggerSpice
      Hi Nauman.. After changing the Demo template it become narrow. Nothing else. Anyway thanks for informing me.
  10. MM Nauman
    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
      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
      Please check first and second images of advertise and about us in the script ...
  11. ilusionis
    thanks you so much for article and smile..good job
    berita unik
  12. PROnav
    this is coming vertically , how to make it horizontal
    • BloggerSpice
      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.
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up