Add The Social Icons With Css Effects To Your Blog
OK so I have two tutorials, one for Blogger and one for Wordprtess.Wordpress Tutorial
1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code:
<style> #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); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLD2NDN5gsOXSxR_iQb4oaTEzv-OSic-9JukJaAG5WIBF2Cb03Dr_zZzyzbVRF8GSVNFOfZ6pCdWKf9UtFIl245kvrS2Iu-dDRjYdMHmfTiqvlvlC9rtLn4JvmvfyDB0lWXD1dOfbqhp9/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBjvZd6TSZpG_9D159XVGIzD_zgb52c-TGGudSHMYrhVkDyMd5jmiVv49whhNxdQVy4Pz64nJV3418yqATdSq7qAWiG17pP246MDyDqrGOdKOIHrMatPzZrPfQTB7Le73RjIeQ0s1XZePS/s1600/RSS-EMAIL-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="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj27tt-XZ0AKd7GuOO2YCm06iXMRiTB2k1KA0EVC9nFm_A8gmA_UWMYh5aN-guiFeOjbOnMYXGpeupFJqZI0PSMpZBm9Qd0U_zNivqcJ9qXiepHEy9rce6k3SwQ9Xg66y7qz1R49vcfMTFF/s1600/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="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmUGbw4hyphenhyphenJ7sQ32hGCiObfkRns2Yd0Me_P1rGxcXi7pnL05q0JabWhTcJT7jZi9wr974sb4qOT8FKvJCX98QOK6za5Bf57XaAc0llCD1yR7OOk6Ca5ksQIXTlsIfHVwgA3lflLkHi5e_8l/s1600/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="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfGrlXKokU97WEd0PCqzFoFjUCSP7Gz1HhcanMnkdRWPM265jP_JlEqYev31U2XdT4w4rYg3djxoI4eOWwRyTIBlqEtTTSxTw6DnF8d67CPQ4OlIzWhmiWZTBaY2UlQuXm3ynAcu7sFzGi/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAtfm98fvzkzG0ASr61yRje_ptNxFFNJ5nx5W2xn3UeVyctWTFnm1QT22r3ZKaaDxD6JLaQ2rVm0-bIJAVSN3yUfEv75GcvTKWlLxvwbPOpX1bDJqMi3qindxQujlp0WGGwGuwISxYfR0l/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>
Important - Replace the yellow sections with your social profiles and feed URLs.
Note - If your familiar with Wordpress you can off course add the Css to your theme stylesheet.
Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...
Blogger Tutorial
1) In the new Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste In The Following Code
<style> #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); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLD2NDN5gsOXSxR_iQb4oaTEzv-OSic-9JukJaAG5WIBF2Cb03Dr_zZzyzbVRF8GSVNFOfZ6pCdWKf9UtFIl245kvrS2Iu-dDRjYdMHmfTiqvlvlC9rtLn4JvmvfyDB0lWXD1dOfbqhp9/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBjvZd6TSZpG_9D159XVGIzD_zgb52c-TGGudSHMYrhVkDyMd5jmiVv49whhNxdQVy4Pz64nJV3418yqATdSq7qAWiG17pP246MDyDqrGOdKOIHrMatPzZrPfQTB7Le73RjIeQ0s1XZePS/s1600/RSS-EMAIL-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="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj27tt-XZ0AKd7GuOO2YCm06iXMRiTB2k1KA0EVC9nFm_A8gmA_UWMYh5aN-guiFeOjbOnMYXGpeupFJqZI0PSMpZBm9Qd0U_zNivqcJ9qXiepHEy9rce6k3SwQ9Xg66y7qz1R49vcfMTFF/s1600/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="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmUGbw4hyphenhyphenJ7sQ32hGCiObfkRns2Yd0Me_P1rGxcXi7pnL05q0JabWhTcJT7jZi9wr974sb4qOT8FKvJCX98QOK6za5Bf57XaAc0llCD1yR7OOk6Ca5ksQIXTlsIfHVwgA3lflLkHi5e_8l/s1600/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="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfGrlXKokU97WEd0PCqzFoFjUCSP7Gz1HhcanMnkdRWPM265jP_JlEqYev31U2XdT4w4rYg3djxoI4eOWwRyTIBlqEtTTSxTw6DnF8d67CPQ4OlIzWhmiWZTBaY2UlQuXm3ynAcu7sFzGi/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAtfm98fvzkzG0ASr61yRje_ptNxFFNJ5nx5W2xn3UeVyctWTFnm1QT22r3ZKaaDxD6JLaQ2rVm0-bIJAVSN3yUfEv75GcvTKWlLxvwbPOpX1bDJqMi3qindxQujlp0WGGwGuwISxYfR0l/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>
Important - Replace the yellow sections with your social profiles and feed URLs.
Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...
That's it you have a very cool subscribe section on your blog.
