Techsperia Style Social Media Icons

Posted by Yuga irgi on Friday, May 09, 2014 in Social Media, Widget | No comments

social icon

Okay, I've been getting way too many compliments for the social media icons that I use here on Techsperia. And today, this idea struck my head - "why not write a tutorial about it!?" So here I am, providing you my awesome social media widget. I've literally provided my entire code! These icons also have a nice little mouse-click effect. It's achieved using, the one and only, CSS!

Talk is cheap, show me the code!

Here's the code, paste it wherever you want these professional social media icons to appear!

<style>
.techsperia-flat.button:active{position:relative;top:1.5px}
</style>
<a class="techsperia-flat button" title="RSS Feeds" href="http://feeds.feedburner.com/#" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAh3R8ATDcGni4QTtfwTYHUjXqZvE0Qs7diRbhjaPPt2sioiQprbR8LNTSe-niOO_FhyJMqgBSinCt3JHqiM7LQx3x1uiq1woFTDBmC3YouY1sN9iI17FDs5Y8zqGS4W8ClvaeCz9Jhvo/s32/techsperia-rss.png"/></a>
<a class="techsperia-flat button" rel="nofollow" title="Twitter" href="http://twitter.com/#" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX6tILa-BmXT8XPSRvO3p8035zPHkposmgnmy14GEEL-fdf9tMFZBq2e1mB_WYjCOGoP4TOSHqY0hBSBT_KUdNMxKYyHIT3lHqgnbWEOVtLDnWkwvWim0JZVEqSq108WnLFe5ga1Inx9Y/s32/techsperia-twitter.png"/></a>
<a class="techsperia-flat button" rel="nofollow" title="Facebook" href="http://www.facebook.com/#" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ZDbw0dj_gfsR6Bd8xA-rDdlkIem9rxXPgz7B9kGTiEYypd1xAXQBu9krQknOKIKmcNKtRMVqqidiKORMpt9jxGpxleUn0LleOI2ZWZowo2pmdY-v9MxoN4SMOTBnAYEnFe9QBaVAMVY/s32/techsperia-facebook.png"/></a>
<a class="techsperia-flat button" rel="nofollow" title="Google Plus" href="https://plus.google.com/#/about" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeJNOlF6egwY-jkbZLjkeA5zKmo-lINLiCF9ThMZJqUHFZWL7ZYtVFKAiG-C6-APqv0VfuMALstwseFcUURFNJyzL13OCwwiRpZAbS5XmIXE2bgnbauy-dyfvHJSsQvwxW_Z982FKrqQ/s32/techsperia-google%252B.png"/></a></div>
<a class="techsperia-flat button" rel="nofollow" title="YouTube Channel" href="https://www.youtube.com/#" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYKb69GHO1PHYX3BZTW0U2R1z5vp-EyleNpYj-y3kb0emBYuKDwFL6VvptJq-kHSZ8FMqT45wtFSYEZk0SsTpLHvkYLJMo733-hwF8b5gZvsAK8W5knoKACDxUV7ENitSVnwh8lYOA5s/s32/techsperia-youtube.png"/></a></div>
<a class="techsperia-flat button" rel="nofollow" title="Email Feeds" href="http://feedburner.google.com/fb/a/mailverify?uri=#" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1Kl6j9uylIzEHZqG9es1pNWaN1kaTrf2MxZafdsqSSEFnwyN3l1Cd6I1NnlczvG-DhrN2gCqecJYHvYS_QtlE59l0EdSfOcedGwOorp2sJVOuvloxOI__eYbxcSzI4kkiJXLeHWku4M/s32/techsperia-email.png"/></a>

Tip: If you are new to Blogger and don't know where to paste the above code, I highly recommend creating an HTML/JavaScript gadget and pasting the above code there. This tutorial will help you in doing so.

And I know these icons are too simple. But do note one thing - if you wanna look professional, going simple is the best option! Those fancy and heavily coded social widgets out there ain't gonna take you anywhere! I mean, look at Digital Inspiration, it's social icons are so simple, yet so professional!

Some pro tips:

• Replace the links highlighted in blue with your respective social links.
• These icons are nothing but simple <a> tags. So suppose you don't want any particular social icon to appear, simply remove it's entire <a> tag.
• Example: I know that the email icon looks quite lame on white backgrounds. So if you wanna remove it, simply remove the email icon's <a> tag:

<a class="techsperia-flat button" rel="nofollow" title="Email Feeds" href="http://feedburner.google.com/fb/a/mailverify?uri=#" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1Kl6j9uylIzEHZqG9es1pNWaN1kaTrf2MxZafdsqSSEFnwyN3l1Cd6I1NnlczvG-DhrN2gCqecJYHvYS_QtlE59l0EdSfOcedGwOorp2sJVOuvloxOI__eYbxcSzI4kkiJXLeHWku4M/s32/techsperia-email.png"/></a>

Enjoy using these cool professional looking social icons on your blog. Leave a comment if you need any help. :)