Blogger Credit Design with Host Gator Icon

Blogger Credit Design with Host Gator Icon

Comments: 0
data:blog.title
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 www.bloggerspice.com -----*/
.BloggerSpice-ico
{
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(http://3.bp.blogspot.com/-REpTWrCnt_U/UiXBllz9LMI/AAAAAAAAEjs/bJPb-LBcjhk/s1600/BS+Hostgator.png) 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:
        </div>
<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='http://www.blogger.com' rel='nofollow' target='_blank' title='Hosted At Blogger'></a>
<a alt='CSS3' class='css3' title='Powered By CSS3'></a>
</span>
</div>
<div style='margin-left: 70px;'>
<p><a href='http://www.bloggerspice.com/'>Blogger Spice</a>  &#169; 2013 - All Rights Reserved.</p>
</div><!-- /BS-wrapper -->
</div>
</div><!-- footer-credits -->

Customization

  • Replace HostGator Affiliate Link is here with HostGator link
  • Replace www.bloggerspice.com this with your blog address

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *