Home
Blogger

Super credit design for Google Blogger Templates

Google blog Super credit design
blog credit design

Blogger credit design now-a-days become so popular. After importance of Blog footer credit section get priority. Though many blogger adding different stylish credit section on their blog but major blogger don’t think about their blog credit section. However this is the hot cake right now among bloggers. You would see most of the blogger template’s credit section is useless. There only containing information about template designer, Copyright as well as author’s credit which is most of the time avoid by the visitors. But we can make the credit section as a way of earnings by simply adding some good staff.

Nevertheless I am going to share a tutorial about adding an attractive credit section into your blog where Blogger, GoDaddy and CSS3 icons integrated.

Though you are using Google blogging platform absolutely free so you should give a credit to Google blog. Beside of this you can use GoDaddy by joining in their referral program. This means if any visitor click on that icon and buy a hosting plan from GoDaddy  then you would receive commission from them. This is really easy money and you don’t have to use large space in in your blog. And finally I have included CSS3 icon which increase your blog value in the eyes of readers.

Live Demo

I think this is the cool staff for your blog where you can use your blog space wisely. And don’t worry about your author credit and copyright information because I have already included in the credit design section also. Primarily the icons will be inactive style with ash color  when you mouse over on them then it will change the color of each icons. As well as you can add link for every icon.

For Installing this widget please follow the simple steps from below

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigERMZjBCZ28A-rTCt2DQ2Ic71FGhIcB5Bqu-qvbcKHmxasVguoZssM2J6HpdpqDCvkZJTdDeT027DuhJRRuSo-V-iwMxmf1-0MmfDkTtICdjMknfWAPkJU9IxWkB6l6Ry4R8FGvf2qJDm/s1600/Bs+Sprite+with+GoDady.png) no-repeat;
font-size: 10px;
cursor: pointer;
}
.BloggerSpice-ico a.blogger
{
background-position: 0 -45px;
}
.BloggerSpice-ico a.blogger:hover
{
background-position: 0 -1px;
}
.BloggerSpice-ico a.godaddy
{
background-position:0px -133px;
}
.BloggerSpice-ico a.godaddy:hover
{
background-position:0px -93px;
}
.BloggerSpice-ico a.css3
{
background-position:0px -215px;
}
.BloggerSpice-ico a.css3:hover
{
background-position:0px -180px;
}
/*----- 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='Blogger' class='blogger' href='http://www.blogger.com' target='_blank' title='Hosted At Blogger'></a>
<a alt='Hosted At GoDaddy' class='godaddy' href='http://x.co/bspice' rel='nofollow' target='_blank' title='Domain At GoDaddy'></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 http://x.co/bspice with your GoDaddy affiliate links
  • Change http://www.bloggerspice.com/  with your Bog address

If you Have any more query then feel free to contact with us. I will help you to install this super design easily. Beside of this I will release more footer credit design very soon. Till than keep visiting regularly.

2 comments

  1. I always wanted this. Surely i will add this in my blog. Thank you very much for this. And maintain this posting frequency, because we love your content and mainly your widgets !

    Regards,
    Rizwan @ Blogger Kid
    • Thanks Rizwan for your beautiful comment. I always try to make some unique and my visitors are my motivation.
Go Up