Expand On Hover Social Media Widget For Blogger 2013

PUT YOUR PARSED ADSENSE CODE HERE

Many bloggers link their social media pages to their blog with attractive links. But what happens most times is that those "attractive" links takes time to load and hence reduces page speed. Here is a beautiful social widget which is made using pure CSS. No JavaScript, no jQuery. Which means that this widget won't affect your page speed.

Requested By:

Imtiaz Ahmed

Live Demo:

Advantages of creating social media pages:

(Example: Facebook page, YouTube channel, etc.)

• You can link them to your blog, to engage your readers in socialising with you.
• It helps your readers to stay updated as they follow you on the social media site that they are active on.
• Helps in building reputation and brand name.
• Helps in building back-links.

Steps to implement:

1. Go to your blogger dashboard >> Layout >> Add a Gadget >> HTML/JavaScript.

2. Copy the below code and paste it in Content. Hit Save.

<!-- Expand On Hover Social Widget By Raj Mehta -->
<style>
#TechsperiaSocial {width: 260px;margin: 5px 20px;padding:5px;}#TechsperiaSocial li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#TechsperiaSocial .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixh7S7WtGzhLOGtVP6oTW64QZcIRxCrNHnNikGM0ttgMEz6nU_T3VQqbk9gz4NEL8jfTPV-zarWDuW70vwrNt74Nx-ZVVHWN0ihVUh1OFCtCYjli_f9HAak9woSDROPhIemPPmglv7Ec/s1600/TechsperiaSocial.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#TechsperiaSocial span:hover {visibility: hidden;}#TechsperiaSocial span {display: block;top: 15px;position: absolute;left: 90px;}#TechsperiaSocial .icon {color: #fafafa;overflow: hidden;}#TechsperiaSocial .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#TechsperiaSocial .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#TechsperiaSocial .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#TechsperiaSocial .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#TechsperiaSocial .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#TechsperiaSocial .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#TechsperiaSocial .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#TechsperiaSocial li:hover .icon {width: 250px;}#TechsperiaSocial li:hover .icon {background-color: #d91e76;}#TechsperiaSocial li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#TechsperiaSocial li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#TechsperiaSocial li:hover .google {background-color: #A70000;background-position: 0 -94px;}#TechsperiaSocial li:hover .pint {background-color: #C00;background-position: 0 -142px;}#TechsperiaSocial li:hover .linked {background-color: #005772;background-position: 0 -190px;}#TechsperiaSocial li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#TechsperiaSocial li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#TechsperiaSocial .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<ul id="TechsperiaSocial">
<!-- RSS Start -->
<li><a target="_blank" href="http://feeds.feedburner.com/getmytricksfree" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
<!-- RSS End -->
<!-- Google+ Start -->
<li><a target="_blank" href="https://plus.google.com/12345678910111212" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span></li>
<!-- Google+ End -->
<!-- Facebook Start -->
<li><a target="_blank" href="http://www.facebook.com/imtiazbloggertrick" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li>
<!-- Facebook End -->
<!-- Twitter Start -->
<li><a target="_blank" href="https://twitter.com/mrimtiazahmed" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
<!-- Twitter End -->
<!-- YouTube Start -->
<li><a target="_blank" href="http://www.youtube.com/imtiazevo" class="icon ytube">Follow us on YouTube</a><span>Follow us on YouTube</span> </li>
<!-- YouTube End -->
<!-- Pinterest Start -->
<li><a target="_blank" href="http://www.pinterest.com/mrimtiazahmed" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
<!-- Pinterest End -->
<!-- LinkedIn Start -->
<li><a target="_blank" href="http://www.linkedin.com" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
<!-- LinkedIn End -->
</ul>
<!-- Code provided to you by http://www.mybloggertricks.blogspot.com -->

Code Credits: NBT

The code is self-explanatory. Replace the links highlighted in blue with your links. To make things easy, I have also mentioned when a particular social media start and ends in comments. So suppose you don't have a LinkIn profile and you don't want that link to appear in the widget, simply remove the following code (You can do the same for any social media).

<!-- LinkedIn Start -->
<li><a target="_blank" rel="nofollow" href="http://www.linkedin.com" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
<!-- LinkedIn End -->

The beauty of this pure CSS widget will force your readers to click on it at least once. All this without compromising on your page's speed. ;)

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!