Glossy Black Social Subscribe Buttons for Blogger and Wordpress

A webmaster always wanna try new things and wanna make blog or website more attractive. So Today I am here with a different set of subscribe buttons that you can utilize as a part of your blogger or wordpress without any sort of situation, so you simply need to include some set of codes and you can be primed for showing your social connections with the aforementioned gleaming symbols. One important thing in this no JavaScript for drift zooming impact yet its the mystery of the CSS so it should not take a breather for stacking out the aforementioned ones.

The guidelines furnished beneath are for blogger sites yet these will work in wordpress so you can glue the CSS in one place and html code in an additional as you regularly do with all your contraptions. So I won’t show any direction's for wordpress writes.

How To Do:

1. First of all open your blogger account.

2. Now go to Template >> Edit HTML

3. Now Find the Following code:


]]></b:skin>

4. Just above it paste the below code:

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline;

width: 60px;

height:60px;

}

.bubblewrap li img{

width: 50px; /* width of each image.*/

height: 50px; /* height of each image.*/

border:0;

margin-right: 4px; /*spacing between each image*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */

-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bubblewrap li img:hover{

-moz-transform:scale(1.8); /*scale up image 1.8x*/

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}

5. Simply save it.

6. Now go to Layout >> Add Gadget >> Add HTML/JavaScript. and paste the below code.


<ul class="bubblewrap">

<li><a href="https://plus.google.com/u/0/xxxxxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHr5bVm0zvVbllMrovn01vHKb3G1DT5uWmopbAppyOa2UI_fL5orLnDrAu2bNQHJDGUvaMsDxtle6fQ8SgrVBpplOPDrKm8ynhhamqWLd7Sk5CpW7IYQQ2IB4w_iTh1I7lsUT8ZVUtNjE/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5EesUsjFZVrcarF_PFS3M_a8RLXx6S-Mi-GKAoevnwDJSWgVDf8t8qIT8BRcEayCn-VmuHcceOUQOuQztWahwocDuRI9YmuoMI8BcdrBr7tvpfUSr8k9CdSr-Ut-N_T_cqeEEasJyOL0/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.digg.com/xxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6FXbONGnt8bTWxzp1ebQ74g5s2A-lBvAE6lVnT8EdFlaLLW7NXb2zY3vqsfumR_NhkoJwSlFuGZtsHfdq5JNryalF8BOLZccQ4eCEq3f8knXwmga5Yiy3hxRd1poH2CqSjiFDsv0H1sA/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/xxxxxxxxxxx" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJtMpSTf9bXxoUzlzMuoFSWUgs5OE9m8ATevEJErG9APrMlmiqIQ103A4e0T90npV6fEifVle8eWeAb0UnoRRZXwDYjgta-NiC1TggLZfRhzx5Yah6RtAFZ0Iwh-zdZpfgyY0GNuwx-8/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href=http://feeds.feedburner.com/xxxxxxxxxx target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhec0hrobOPe4u9oVcPr3rLpkBdPZPNpK72QcKrNz9BdXHwgAEZdJCvNNeY89VJpA5TKYrzknUYXZqXHmx6ATGQXDiC0fEFP4p14nqjhJhf8CoBZNMg3Q74vN-fomFNhb1ryXOO4oamO_E/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>

</ul>

7. Now just replace the xxxxx with your website usernames
Source: Tricks For You


.$!D