Galauness Social Links Buttons for Blogger

Add new Galauness Social links Button in your Blog

Now this time to add a new social link button on your blog.So today i am going to releasing  a new mouseover social link button for blogger.Called Galauness social link button.it's to simple and good looking,Add this button widget in your blog and make your blog look like beautiful,Galauness social link button is too easy to add in blogger. Now if u don't have a social link button on  your blog then Galauness button is good for your blog. Follow below steps and add this button widget in your blog.

For Demo click on me

Step:-1 Go to your >>blogger dashboard and then go to >>template section in template section click on >>edit HTML button.

Step:-2 Now find  ]]></b:skin> tag using " ctrl + f "  from your keyboard.

Step:-3 Now copy below code and paste before ]]></b:skin>

/* =============================
Social Links by 99pcsoft.blogspot.com
============================= */
#interwebz-wrapper {
  display:inline-block;
  width:950px;
  border-bottom:1px solid #f2f2f2;
  border-top:none;
  padding:5px 0;
}
.interwebz {
  list-style:none;
  margin:0;
  padding:10px 0;
  width:auto;
  overflow:hidden;
  float:left;
}
.interwebz li {
  float:left;
  margin-right:10px;
  border:none;
}
.interwebz li:last-child{margin:0}

/* Flickr */
.icon-flickr a, .icon-instagram a, .icon-facebook a, .icon-gplus a, .icon-lastfm a, .icon-feed a, .icon-skype a, .icon-twitter a, .icon-youtube a {
  float:left;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpaM1n_CDAjq5SlloSHFpPcwJ6f68Haka48e2G2lA7p9ILu7pjWIgwtYzzEvIAFFhiaVn6qTle9XDLYB9qlJ9QKl6j5dv7mhUqGDHY8j1Sq5RJvJYoVkbvV4p3n2d4Sy8m6YeoyVXh1vD/s1600/99pcsoft.blogspot+(2).png) no-repeat left bottom;
  text-indent:-9999px;
  width:32px;
  height:32px;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.icon-flickr a:hover, .icon-instagram a:hover, .icon-facebook a:hover, .icon-gplus a:hover, .icon-lastfm a:hover, .icon-feed a:hover, .icon-skype a:hover, .icon-twitter a:hover, .icon-youtube a:hover {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpaM1n_CDAjq5SlloSHFpPcwJ6f68Haka48e2G2lA7p9ILu7pjWIgwtYzzEvIAFFhiaVn6qTle9XDLYB9qlJ9QKl6j5dv7mhUqGDHY8j1Sq5RJvJYoVkbvV4p3n2d4Sy8m6YeoyVXh1vD/s1600/99pcsoft.blogspot+(2).png) no-repeat left top;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

/* Instagram */
.icon-instagram, .icon-instagram a {
  background-position:-32px bottom;
}
.icon-instagram:hover, .icon-instagram a:hover {
  background-position:-32px top;
}

/* Facebook */
.icon-facebook, .icon-facebook a {
  background-position:-64px bottom;
}
.icon-facebook:hover, .icon-facebook a:hover {
  background-position:-64px top;
}
  
/* Google+ */
.icon-gplus, .icon-gplus a {
  background-position:-96px bottom;
}
.icon-gplus:hover, .icon-gplus a:hover {
  background-position:-96px top;
}
  
/* Last.fm */
.icon-lastfm, .icon-lastfm a {
  background-position:-128px bottom;
}
.icon-lastfm:hover, .icon-lastfm a:hover {
  background-position:-128px top;
}

/* RSS Feed */
.icon-feed, .icon-feed a {
  background-position:-160px bottom;
}
.icon-feed:hover, .icon-feed a:hover {
  background-position:-160px top;
}

/* Skype */
.icon-skype, .icon-skype a {
  background-position:-192px bottom;
}
.icon-skype:hover, .icon-skype a:hover {
  background-position:-192px top;
}

/* Twitter */
.icon-twitter, .icon-twitter a {
  background-position:-224px bottom;
}
.icon-twitter:hover, .icon-twitter a:hover {
  background-position:-224px top;
}


/* Youtube */
.icon-youtube, .icon-youtube a {
  background-position:-256px bottom;
}
.icon-youtube:hover, .icon-youtube a:hover {
  background-position:-256px top;
}

Step:-4 Now hit on save button

Step:-5 And now go to >>layout section and in layout section click on >>add a widget link

Step:-6 Now a popup window will appear in popup window click on add HTML/JAVA script

Step:-7 Copy below code and paste it in HTML box

<!-- Start - Social Links  -->
  <ul class='interwebz'>
   <li class='icon-feed'>
     <a href='Your feed url'>Feed</a>
   </li>
   <li class='icon-facebook'>
     <a href='http://facebook.com/99pcsoft'>Facebook</a>
   </li>
   <li class='icon-twitter'>
     <a href='http://twitter.com/99pcsoft'>Twitter</a>
   </li>
   <li class='icon-gplus'>
     <a href='https://plus.google.com'>GPlus</a>
   </li>
   <li class='icon-youtube'>
     <a href='http://youtube.com'>Youtube</a>
   </li>
   <li class='icon-flickr'>
     <a href='http://flickr.com'>flickr</a>
   </li>
   <li class='icon-lastfm'>
     <a href='http://last.fm'>Last.fm</a>
   </li>
   <li class='icon-instagram'>
     <a href='http://instagr.am'>Instagram</a>
   </li>
   <li class='icon-skype'>
     <a href='http://www.skype.com'>Skype</a>
   </li>
  </ul>
<!-- End - Social Links  -->

Important note:-
:-Please replace red line with your feed url

:-Please replace orange line with your Facebook page url

:-Please replace yellow line with your twitter page url

:-Please replace green line with your Google+ page url

:-Please replace aqua line with your YouTube page url

:-Please replace blue line with your flicker url

:-Please replace purple line with your last.fm url

:-Please replace fuchsia line with your instagram url

:-Please replace black line with your Skype id url

2nd important note:-
If u want to remove any icon then remove his code, for example i want to remove Skype button icon then i will remove below code from above script

 <li class='icon-skype'>
     <a href='http://www.skype.com'>Skype</a>
   </li>

You can remove any icon from this method.Remember only remove. 

<li ---to---</li>

Note:-If u like this post please give me your comments for your feedback suggestion or help.Thanks..!!