BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Responsive Shutter Social Subscription Widget for Blogger

11 comments

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.

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 !

11 comments :

  1. Really nice man.
    you are really good coder.
    nice and clean.
    good work.

    ReplyDelete
    Replies
    1. Thanks for your thoughts, Dilip :)
      I am trying to make blogger platform better than wordpress and this little things are part of it.
      Have a nice day & Stay connected ;-)

      Delete
  2. Great post!!But I would b happier with more icons...
    and I also landed up playing with ur share buttons in the end :D

    ReplyDelete
    Replies
    1. Dear Keerthi, Thanks for being here :)
      I'm working on more icons , I'll definitely add them.
      I hope you would have subscribed via email for further updates,
      stay connected :)

      Delete
  3. Very helpful article. Good luck.

    Regards,
    Sajid
    http://topserankings.com/

    ReplyDelete
  4. A great article indeed and a very detailed, realistic and superb analysis of the current and past scenarios.
    social name.

    ReplyDelete
  5. thank you
    this my site http://adf.ly/sgq4E

    ReplyDelete
  6. Just discovered your online journal and was immediately flabbergasted with all the helpful data that is on it. Extraordinary post writing a dissertation proposal, exactly what i was searching for and i am anticipating perusing your different posts soon!

    ReplyDelete
  7. Great post. This article is really very interesting and enjoyable. I think its must be helpful and informative for us. Thanks for sharing your nice post. i am Google plus provider . I am selling those service on, please take a look Buy Google plus Followers

    ReplyDelete
  8. Nice website . I read here and i like it alor of . thank you for share your information. RankLikes.com

    ReplyDelete

Powered by Blogger.