12/30/2012

Glossy Social SubScriber Icon For Blogger And WordPress

           
Social Icon

Here you can get the new social subscriber icon set for you blogger are Wordpress and for your website.In this Glossy Social Subscriber icon have the five social subscriber site link.You can added the Facebook, Twitter, Google plus, RSS, Digg.In this Widget its contain the css code can be used to Given effect to this just copy the below code and add to your site.

The instructions provided below are for blogger blogs but these will work in Wordpress so you can paste the CSS in one place and html code in another as you normally do with all your gadgets.

For blogger you can log on to your blogger Account and Goto Template Optiona and select the template now click the Edit Html option.

Now html code edit window will open.Now Press the Ctrl+F and type the ]]></b:skin> and past the below code above on it.

.bubbleicon
{
list-style-type:none;
margin:0;
padding:0;
}

.bubbleicon li
{
display:inline;
width: 60px;
height:60px;
}

.bubbleicon li img
{
width: 50px; 
height: 50px; 
border:0;
margin-right: 4px; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in; 
}

.bubbleicon li img:hover
{
-moz-transform:scale(1.8); 
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

And now click the Save button to save the template.You now finished the Css Part.

Now goto Layout Option And select the add gadget option to add the gadget to your blogger.Select the Html/css gadget add to the you blogger layout and select the below html code and past on it.

<ul class="bubbleicon">
<li><a href="https://plus.google.com/u/0/######" target='_blank' rel='nofollow'><img src="https://4.bp.blogspot.com/-5fgqd-05-gQ/UOBn0ewFbEI/AAAAAAAABK4/BYblbvIPiIM/s1600/google-icon.png" /></a></li>
<li><a href="https://www.facebook.com/######" target='_blank' rel='nofollow'><img src="https://1.bp.blogspot.com/-HuknVoJEGOg/UOBn2H9_blI/AAAAAAAABLA/9y01S0H98Bs/s1600/facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="https://www.digg.com/#####" target='_blank' rel='nofollow'><img src="https://1.bp.blogspot.com/-0va7c7QCQCQ/UOBn3zJ0JLI/AAAAAAAABLI/9fMMh3rd8oQ/s1600/digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="https://www.twitter.com/#####" target='_blank' rel='nofollow'><img src="https://1.bp.blogspot.com/-elFr_Pd7TH8/UOBn5lbqhYI/AAAAAAAABLQ/yGxlvmLRcrU/s1600/twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="https://feeds.feedburner.com/#####" target='_blank' rel='nofollow'><img src="https://4.bp.blogspot.com/-Y-CPmNOowFM/UOBn7gNV4_I/AAAAAAAABLY/sz0D-pSE-AI/s1600/rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>
Now change the ##### symbol with your Social Network url and click the save button to save the html code.

Share this: