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'>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2je4ZdlXPS2nARZnbaHcF9H9Q_6oz-x6yHZwAglfuVSrXWNXm1qC8aJnbDoZANCur3P_ixUnMsocRwhFXwGT_AYnXZAeeGc4lbV3GtU_JjfOpcWe6VCspBdg19ovZ_Pb3GhdcUxYwong/s1600/BS%2BFooter%2BFeatured%2BBackgroung%2BImage.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUFl8rBU_l9AXYVpRv0lgBoYraprcuzhVol8pqyEW7mR8OJpDuGSE8gzN_buEzam02QRWWj09CDUaf-uhrwcHgHhpb9PTjMgWE1qoWb0nCPpM9sXgLqmpOR61v6b9ohwjWTwCT6B_xA5F/s320/About+Us.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s-wRD8y7qE744ulJlWW6ByGEFTPJ2ej0jPZJCWtskEIMtpedD7KXI_LL92D9ymjz2yvIDiQjG29EEo6HbxHTqmjtpF4GltSgQAYlsYtF-oZ164CMH_sHfINlPGHA4RXJOjvGVoRcBgui/s320/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXoSZvRG2lgoPni9dUkuh33A88qdY5On9OHfW94TfwXeg4fhNh4M35vHl-Aumz3eFwZt7rnoB3CODj9XLvNRMBRfP88IOSxfJaecSl9ywIBY30YsxhSl-dtZMisbE1hRQjQDDCrjTCX_x/s320/Advertise+Here.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgtabHrSFMRETXyC4oC5w7O3tITjnDM_OvQiDJTr7LRdya9IyJ5UoSNboq7CpqQw7YUgqPSj5m4vbN4vUs2DeImHRsgPJwKcBoMRodI1dXY_dQJYiT9mV1WuyU-bugZ6wi_JU-mK0KK-D/s320/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPRwM7AlhBmoOHxdeGeuDLMXIYLLzHmk-EJ_6brgeOYvkThpQx2eAr1nMa7VH-e11O59GXEP3Q82Eone62krrEg9R_vjuZnzf11fr9IhlqaK2v0fYXR4vOq4WhFT-gVAr-RQzEOntfXy_S/s320/Need+Help.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFoYcRedGpD4hZ7KMJkaGzTHMjJy_XL89Zhw48MPaGV5T_e7GeU8HHHyUvxFVEXl4rFJJFlhE0DepDIkZSp7HciVahryDmDZiTR0uTZcAlYqkPhVq_VN5pRMNR_Git3h7Sf0CdPYPvdnwz/s320/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuHpcIPVqbjGvEWSIGFuCQJJUT2eF1iVH9x4Rr5N_-wu5Qketn1uTXJloEvP7HZ1ZGnfkdrrhGvT3nprU9L0jX4a7id-clfHaKZeGiSaGcuJuhdrLwIg4R5DcISLNhOB7as34YAKKi4FN/s320/write+for+us.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjYMTv_Qs6eBRJ9nttXxm8M7qesYIZLfEIucimV4B9NU2VVPjVMgyZWnaowdVVmYhl47rTh5zwevbDpz6YMIX-7MpJfJS6xLxzym4mZc7DYRDEOaTzJtmaPItsBcHl_flZm6mxY2HAoAhw/s320/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBoQPmzmRaSVa5jfDNBaI6qhasX6Q7fh2TYyorOxIkZ6sY2yHtD7Yq6-lJpWFROLzW__p8JHCyoXLEy1u5H47w0jeHEZnK5SMXcIvU5c4KxhQdKAOeCVN4HGgf6q0UuTsJSif_N2T1MzAj/s320/Contact+Us.png' width='200'/>
<br/>
<strong style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4gWrfIaZCBDBTCI8zfErzDrRQmEUfJmCULuqU_I1QCOFaYrl7Xgp9ADauhcSWQHfQA-Oy3cV8iGm4wrE5-n5DKAW_yvgUsnataQg1PzES9s-ignmZwbPgze1TksL80dxYvY1EJ6CkXt8/s320/Contact+Us.png);'>Contact Us</strong>
<br/>
Want To Interact With Admin</a></li>
</ul></div
</div>
<div class='clear'></div>


Customization:

  • Change http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html 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.

Go Up