Responsive Shutter Social Subscription Widget for Blogger

Responsive widgets are always been used by many bloggers to increase their social activity which can only be done by user attractive widgets.
Today I'm gonna unleash you one of the best widgets I have ever made [after spending 3 hours] , one of the best responsive and subscription widget at my blog, I present you the "Responsive Shutter Social Subscription Widget for Blogger"
No matter about its name but it matters totally awesome when you will see its live demo.
There is no doubt that the widget is pure CSS optimized creation with J-Query and Java Script. I assure you that your blog users will love this widget and you will too. It will definitely increase your social followers.

Live Demo

Features :

1. Pure CSS Creation.
2. Responsive Style.
3. Elegant & Premium Theme.
4. Facebook Like, Tweeter Followers, Google Plus Followers.
5. Easy installation.
6. Twitter, Google Plus, Facebook Follower Links + No. of Followers.
7. On Mouse Hover the Shutter closes and shows the No. of Followers.

How To Install ?

Its easy to install as I've made it easier to add on your blog by some compression coding.
1. Go to Blogger > Template > Edit HTML.
2. Press CTRL + D and find the code <data:post.body/>
3. After finding the above code, copy paste the following code just below it.

<b:if cond='data:blog.pageType == "item"'>
<link href='https://googledrive.com/host/0B3omcK7jIprqRm95VVpQZDJHRzQ' rel='stylesheet'/>
<div class="wpr">
		<a class="social" id="twitter" href="your-twitter-account-link" title="">
			<div class="icon"></div>
			
			<div class="shutter_frame">
				<div class="shutter">
					<div class="number">1189</div>
					<div class="bar"></div>
					<div class="text">followers</div>
				</div>
			</div>
		</a>
		
		<a class="social" id="google" href="your-google-plus-account-link" title="">
			<div class="icon"></div>
			
			<div class="shutter_frame">
				<div class="shutter">
					<div class="number">421</div>
					<div class="bar"></div>
					<div class="text">+1</div>
				</div>
			</div>
		</a>
		
		<a class="social" id="facebook" href="your-facebook-account-link" title="">
			<div class="icon"></div>
			
			<div class="shutter_frame">
				<div class="shutter">
					<div class="number">973</div>
					<div class="bar"></div>
					<div class="text">Like</div>
				</div>
			</div><!-- / .shutter_frame -->
		</a>
	</div><!-- / .wpr -->
<div style="text-align: right;">
<a href="http://gg.gg/ikz3" rel="nofollow" target="_blank" title="Get This Widget"><span style="font-size: x-small;">get</span></a></div>
<br />
</b:if>

4. Now find the code </body> and paste the following code just above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
	<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/>
	<script>
		$(document).ready(function() {
		
		    $('.social').hover(
			    function() {
			        $(this).find('.shutter').stop(true, true).animate({
					    bottom: '-36px'
					 },
					 {
					 	duration: 300,
					 	easing: 'easeOutBounce'
					 });
			    },
			    function () {
				    $(this).find('.shutter').stop(true, true).animate({
					    bottom: 0
					 },
					 {
					 	duration: 300,
					 	easing: 'easeOutBounce'
					 });
				}
		    );
		    
		});
	</script>  

5. That's it ! Hit "Save" [Do no edit anything], you are done, now go to your blog and check any post. you will see this awesome widget under / below your post.
Important : You are no allowed to change or edit this widget's css coding as it may not work if you edit it. Also you should not remove the attribution link from this widget, let other bloggers know about it.
Note : You can edit your social links that I've marked with Orange Color, also you can describe the number of followers which I have marked with Red Color.

I hope you would definitely like this awesome widget, Stay connected Buddies :)
If you have any problem regarding this widget, kindly post your comment here or feel free to contact with me, don't forget to Subscribe Us via Email and a "Thanks" in comment ;-)

You can also check every beautiful and stunning widget on TechEthix in Single View at Table of Contents !