Blogger Credit Design with Host Gator Icon

Blogger Credit Design with Host Gator Icon

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

Open Comment Box

Contact Form

Name

Email *

Message *