Blogger Credit Design with Host Gator Icon

Blogger Credit Design with Host Gator Icon

hosted on blogger

Blogger Credit design is very important for tailoring your blog footer. I was trying to reveal some awesome design about blog credit section design. Already I have released a credit design with Blog, GoDaddy and CSS icon. So now it's time to release second version of credit design. In this credit section design I have added Blog, Host Gator and CSS 3 icons with hover effect. When you mouse over on those icons it will change the color. And you would also able to add links if you wants to earn money from Host Gator. This is very simple, just register with Host Gator and get the referral link then add it into this credit design section. When a visitor click on Host Gator icon then it will redirect to Host Gator site and you would able to earn money commission basis. Isn't it cool?

So to install this widget simple follow below steps-

Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing   Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

/*----- Footer Credits Styling Starts -----*/
.BSfooter-credits {  border-top:1px solid #555;   padding: 15px;   background: #444;  text-shadow: 1px 1px #000000;  color: #D4D4D4;  font-size: 70%;  }
.BSfooter-credits .BSattribution{  float:right; margin-left: 100px;}
.BSfooter-credits .BSattribution a { font-style: normal; font-size: 70%;}
#footer a, .BSfooter-credits a {  color: #FEFEFE;  }
#footer a:hover, .BSfooter-credits a:hover {  color: #D4D4D4;  }
/*----- FC by -----*/
padding: 0 0 0 0;
margin: -6px 30px 0 10px;
float: right;
.BloggerSpice-ico a {
display: block;
height: 35px;
width: 50px;
float: left;
background: transparent url( no-repeat;
font-size: 10px;
cursor: pointer;
.BloggerSpice-ico a.hostgator
background-position: 0 -105px;
.BloggerSpice-ico a.hostgator:hover
background-position: 0 -70px;
.BloggerSpice-ico a.blogger
background-position:0px -35px;
.BloggerSpice-ico a.blogger:hover
background-position:0px 0px;
.BloggerSpice-ico a.css3
background-position:0px -175px;
.BloggerSpice-ico a.css3:hover
background-position:0px -140px;
/*----- Credit Styling Ends -----*/

 Step 5 Now find </body> by Pressing   Ctrl + F

Step 6 And Paste the below code above </body> 

<div class='BSfooter-credits'>
<div class='BS-wrapper'>
<div class='BloggerSpice-ico'>
<div style='float: left; margin: 10px 0 0 0;'>
      Powered By:
<span class='BloggerSpice-ico a'>
<a alt='HostGator' class='hostgator' href=' HostGator Affiliate Link is here' target='_blank' title='Domain At HostGator'></a>
<a alt='Hosted At HostGator' class='blogger' href='' rel='nofollow' target='_blank' title='Hosted At Blogger'></a>
<a alt='CSS3' class='css3' title='Powered By CSS3'></a>
<div style='margin-left: 70px;'>
<p><a href=''>Blogger Spice</a>  &#169; 2013 - All Rights Reserved.</p>
</div><!-- /BS-wrapper -->
</div><!-- footer-credits -->


  • Replace HostGator Affiliate Link is here with HostGator link
  • Replace this with your blog address

Blogger Credit Design with Host Gator Icon
4 Stars stars - "Blogger Credit Design with Host Gator Icon" Blogger Credit design is very important for tailoring your blog footer. I was trying to rev...

Post a Comment

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


Email *

Message *