Add Cool Social Icons Effect Feature

	Add to Cart
Item Name	Include awesome social icon effects using CSS
Price	RM42.50
Sizes (Select Before Checkout)	--Select Size-- Small Medium Large XL 2XL 3XL 4XL
Description	Tutorial and code snippet  on how to include an awesome social icon and effect in Blogger HTML widget.
More Details	Blogger new styled social icon widget. Custom install Blogger social icon set. Spinning Blogger social icon tutorial. Create social icon effect. On-hover social icon effect in Blogger.

Firstly, got to Template Edit HTML > click on the first black triangular icon located on the left of the editor screen. This will expand your theme CSS code snippets.

Now press Ctrl F and type in below code in the template search bar.

]]></b:skin>

Press enter then your template will now  position at the highlighted code (in yellow)

Now, copy below code and paste above/before the code above:-

#social a:hover {
background-color: transparent;opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); transform: rotate(360deg);
}

Click Save Template and now you can go to Layout section.

In Layout > Add a Widget > select HTML/Javascript widget.

Copy below code in the widget body:-

<div id="social">
<!--Start Rss Icon-->
<a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
<!--End Rss Icon-->

<!--Start Email Rss Icon-->
<a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->

<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->

<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
<!--End Twitter Icon-->

<!--Start Google+ Icon--> 
<a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>
<!--End Google+ Icon-->

<!--Start Pinterest Icon--> 
<a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> 
<!--End Pinterest Icon-->
</div>

Now change the URL to your social profile link as indicated in the codes above. Once finished, click Save.

For this theme, you can drag the widget right below the Posr body widget. Click Save Arrangement > and Preview.

Special thanks to hamidshahzad.com for sharing this hacks and codes to easily create an awesome social icon on-mouse over effect by using only CSS.

Do take note that this effect works brilliantly with webkit browsers ie Google, Safari, FireFox etc. You'ed guessed it, the effects does not work with old IE 7, 8, 9 but the icons renders as expected.