Funny Man Cartoon Character Set for Blogger Footer Design

Funny Man Cartoon Character Set for Blogger Footer Design

1
data:blog.title
footer design

Cartoon Character set is become popular to promote blog and sites. Many popular site including SEO, Infographic related site use Cartoon character for promoting site. You would also find many wordpress sites are now using Cartoon Character as a model icon of their site. Similarly when I have started my blogging I have decided to use cartoon character to promote my blog as a result I got success rapidly. And I am really grateful to my original cartoon character creator PixEden who has given me written permission and License completely free. From my personal experience I have  decided to design some unique cartoon character for other blogger for promoting their blog.

Live Demo

Earlier I have released 2 cartoon character set for tailoring your footer design and now going to release 3rd Cartoon Character set whose name is Funny man Cartoon Character which is really exclusive and this character is very attractive and ideal to use in Tech, Blogging and Magazine based sites.


In terms of coding I have brought some changes because I have seen a minor problem that when you are using my previously released Cartoon Character set then it is not matching with post body, In some blog I have seen that Cartoon Character's top edge get cut. So I will add a CSS code block which will help your to get rid from this kinds of problem. As well as I have updated all of my previous Cartoon Character widget. So those who are using my previous released Cartoon Character please update those.
Remember that your footer must be 1050px width.  And I have sharing the total professional looks code for this widget.

HTML Part for Footer Design

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

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

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

<div class='widget-content'>
<style>
#BSFooter{
border-top:5px solid #c0c0c8;
padding:50px 0 10px 0;
float:left;
width:100%;
clear:both;
display:inline;
color:#565656;
font-family:verdana,sans-serif;
font-size:15px;
}
#BS-Footer{
float:left;
display:block;
margin-bottom:0px;
}
#BS-Footer li{
background:url(http://4.bp.blogspot.com/-ZFqWFVN3l8g/UO5mEIUDdbI/AAAAAAAAAPQ/jjgPaYVl3vc/s1600/BS%252BFooter%252BFeatured%252BBackgroung%252BImage.png) no-repeat 0 0;
width:185px;
padding:0 5px;
float:left;
display:inline;
margin-left:5px;
text-align:center;
}
#BS-Footer li:hover{
background-position:0 -180px;
}
#BS-Footer li:first-child{
margin-left:0;
}
#BS-Footer li a{
font-size:12px;
color:#777;
display:block;
padding-top:85px;
height:90px;
text-shadow:#222 0 -1px 0;
}
#BS-Footer li a:hover{
color:#999;
}
#BS-Footer li a img{
margin-top:-184px;
margin-bottom:10px;
display:block;
}
#BS-Footer li a br{
display:none;
}
#BS-Footer li a strong{
color:#fff;
display:block;
width:200px;
height:20px;
text-indent:-9000px;opacity:.7;
-webkit-transition:opacity .2s linear;
}
#BS-Footer li a:hover strong{
opacity:1;
}                                                                                                                                                          /*------www.bloggerspice.com-----*/
</style>
<div id='BSFooter'>
<ul id='BS-Footer'>
<li><a href='http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html'>
<img alt='Learn More About This Site!' height='198' src='http://2.bp.blogspot.com/-aI9RotML4SU/UfDfr-HlbCI/AAAAAAAAEEE/pUKcfNIvPjU/s1600/BS+About+Us.png' width='200'/>
<br/>
<strong style='background: url(http://4.bp.blogspot.com/-pCnQFGZASCY/UfDfuBrp9GI/AAAAAAAAEEs/n9Yt4S6iY5Y/s1600/BS+About+Us.png);'>About Us</strong>
<br/>
Learn more about This Site!</a></li>
<li><a href='http://www.bloggerspice.com/p/a.html'>
<img alt='Advertise' height='198' src='http://2.bp.blogspot.com/-R7n3P9QRVnc/UfDfsFYP_WI/AAAAAAAAEEM/hkRztKfNONA/s1600/BS+Advertise+Here.png' width='200'/>
<br/>
<strong style='background: url(http://2.bp.blogspot.com/-lzsYczJNCgw/UfDfuJr9tSI/AAAAAAAAEEo/a7GGILF8Wtc/s1600/BS+Advertise.png);'>Advertise</strong>
<br/>
Want To Advertise Here!</a></li>
<li><a href='http://www.bloggerspice.com/p/blog-page_1.html'>
<img alt='Need Help' height='198' src='http://3.bp.blogspot.com/-ZNrRxmozTjE/UfDfsOUT2EI/AAAAAAAAEEc/DLpMJsUyxw8/s1600/BS+Need+Help.png' width='200'/>
<br/>
<strong style='background: url(http://2.bp.blogspot.com/-4UtIgppjQt4/UfDfuvOzUkI/AAAAAAAAEE4/iBKocvTlbaw/s1600/BS+Need+Help.png);'>Need Help</strong>
<br/>
Need Help For Your Blog</a></li>
<li><a href='http://www.bloggerspice.com/p/write-for-us-guest-post-for-blogger.html'>
<img alt='Write For Us' height='198' src='http://3.bp.blogspot.com/-qk0rz9Zv0zc/UfDfsa2FgFI/AAAAAAAAEEY/0u0b0kKl-is/s1600/BS+Write+For+Us.png' width='200'/>
<br/>
<strong style='background: url(http://1.bp.blogspot.com/-3tnHHMba2GA/UfDioOk9_aI/AAAAAAAAEGA/mSNL0BtohHk/s1600/BS+Write+For+Us.png);'>Write For Us</strong>
<br/>
Be Our Guest Publisher</a></li>
<li><a href='http://www.bloggerspice.com/p/blog-page_9.html'>
<img alt='Contact Us' height='198' src='http://1.bp.blogspot.com/-6Qg0RZIlVA0/UfDfrriM85I/AAAAAAAAEEA/O7UcEBQypAQ/s1600/BS+Contact+Us.png' width='200'/>
<br/>
<strong style='background: url(http://1.bp.blogspot.com/-QXKPLLB8TQQ/UfDfueVn6mI/AAAAAAAAEFI/L6fomZHreJI/s1600/BS+Contact+Us.png);'>Contact Us</strong>
<br/>
Want To Interact With Admin</a></li>
</ul></div>
</div>
<div class='clear'></div>


Customization


  • Change all color marked link http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html with your own link



CSS Part for Footer Design

For CSS Part you have to find out the Widget ID. Finding your each and every widget ID is very simple. Just log into your Blogger account and visit your blog. Now you can see the QuickEdit icon on bottom left corner of the every widget.

 www.bloggerspice

In case of this widget see a quick edit at the bottom right corner of widget.

cartoon image

Now Click On Right Button and Click on Copy link Location and Paste is in Notepad

bloggerspice.com


The code will be like below--

http://www.blogger.com/rearrange?blogID=5658556525502443729&widgetType=HTML&widgetId=HTML17&action=editWidget&sectionId=footer-1

  • Here the Widget id is HTML17 so you have to put this id into CSS code. In your case HTML ID may vary Suppose HTML6, HTML2 something like that.

Step 1 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 2 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 3 Copy the code from below and Paste it  Before/above ]]></b:skin>


/*****************************************
footer CSS Design by www.bloggerspice.com
******************************************/
#HTML17 {
width:1050px;
float:left;
border-bottom:3px solid #333333;
border-top:4px solid #333333;
border-radius:5px;
margin-startside:auto;
margin-endside:auto;
margin:0 0 5px 0;
text-align:center;
font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
background-color:#222;
background-image: -moz-linear-gradient(top,#444 0,#222 100%);
background-image: -ms-linear-gradient(top,#444 0,#222 100%);
background-image: -o-linear-gradient(top,#444 0,#222 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#222));
background-image: -webkit-linear-gradient(top,#444 0,#222 100%);
background-image: linear-gradient(to bottom,#444 0,#222 100%);
}
.HTML17{
width:1050px;
float:left;
border-bottom:1px solid #000;
border-top:4px solid #111;
border-top-right-radius:5px;
border-top-left-radius:5px;
margin-startside:auto;
margin-endside:auto;
text-align:center;
font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
background-color:#222;
background-image: -moz-linear-gradient(top,#444 0,#222 100%);
background-image: -ms-linear-gradient(top,#444 0,#222 100%);
background-image: -o-linear-gradient(top,#444 0,#222 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#222));
background-image: -webkit-linear-gradient(top,#444 0,#222 100%);
background-image: linear-gradient(to bottom,#444 0,#222 100%);
}

Step 4 Now simply hit the save button. and check your widget.

Customization

  • Change HTML17 with your widget ID.


If you face any problem just let me know..I will help you as soon as possible. Those who are using my previous release of Cartoon character for footer design please follow the CSS part for all.
Funny Man Cartoon Character Set for Blogger Footer Design
4 Stars stars - "Funny Man Cartoon Character Set for Blogger Footer Design" Cartoon Character set is become popular to promote blog and sites. Many popular site including...

Post a Comment

Thanks for sharing such important post. Satta Matka

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *