-->
›

Animating Floating Social Follow Us Widget For Blogger!

By Senin, 28 September 2015 Add Comment Edit
Widget For Blogger, Rotating
Oh really. These days, Blogging is becoming  more, and more popular. Even a child knows coding. So, these days developer are also in a big amount. Each one is trying to beat his fellow. So, today we have brought you a fabulous widget which is not simple.

Actually, I will not keep you in dark, this day, there was no title coming in my mind saying me "post me!". Means, I was unable to think what should I have to post now? So, then I thought- Why not share a widget, a advanced widget with customization support that has not been given by developer?

I am sure that you have seen a "Animating Social Follow Us" widget in the bottom-right corner of Blogger Guiders (now, on bottom-left corner) and you have got impressed with it. Isn't it? Today, I gonna share the same widget's code with you that will help you to modify your blog and give it a material look.

What Are The Features?

Well, if you ask about features, then I have something to show you. Here are:
  1. Beautiful;
  2. Professional;
  3. You can add up-to four links with font awesome icons;
  4. Animating, so anti-boring;
  5. Now, Customization Support [By Blogger Guiders]

About Him

"him" means the developer. I can't get the solid info about the developer but the thing I have got is- his name which is important. His name is "Vinod" (may be from India). Vinod is the guy who has created this widget.

How To Add It On Your Blog?

Now lets talk about why you are here. Oh of course, you are here to add this widget in your growing blog. Isn't it? If yes, then lets add it asap!
  • Go to Blogger Dashboard > Template > Edit HTML
  • Firstly find "<head>" in your template and add below lines below "<head>"
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script>
Note:- If you already have FontAwesome icons or jQuery library installed, then avoid adding it again. 
  • Now, just find:- "]]></b:skin>"
  • Now, just copy the below code and paste it above "]]></b:skin>":
/************************************************************
New Floating Sharing Widget By Vinod; Shared BY Blogger Guiders
************************************************************/
#ss_menu,#ss_menu>.menu{z-index: 2;width:60px;height:60px;color:#fff}@-webkit-keyframes badbounce{0%,100%{-webkit-transform:translateY(0)}10%{-webkit-transform:translateY(6px)}30%{-webkit-transform:translateY(-4px)}70%{-webkit-transform:translateY(3px)}90%{-webkit-transform:translateY(-2px)}}@-moz-keyframes badbounce{0%,100%{-moz-transform:translateY(0)}10%{-moz-transform:translateY(6px)}30%{-moz-transform:translateY(-4px)}70%{-moz-transform:translateY(3px)}90%{-moz-transform:translateY(-2px)}}@keyframes badbounce{0%,100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(6px);-moz-transform:translateY(6px);-ms-transform:translateY(6px);-o-transform:translateY(6px);transform:translateY(6px)}30%{-webkit-transform:translateY(-4px);-moz-transform:translateY(-4px);-ms-transform:translateY(-4px);-o-transform:translateY(-4px);transform:translateY(-4px)}70%{-webkit-transform:translateY(3px);-moz-transform:translateY(3px);-ms-transform:translateY(3px);-o-transform:translateY(3px);transform:translateY(3px)}90%{-webkit-transform:translateY(-2px);-moz-transform:translateY(-2px);-ms-transform:translateY(-2px);-o-transform:translateY(-2px);transform:translateY(-2px)}}.ss_animate{-webkit-animation:badbounce 1s linear;-moz-animation:badbounce 1s linear;animation:badbounce 1s linear}#ss_menu{bottom:30px;position:fixed;transition:all 1s ease;left:30px;-o-transform:rotate(180deg);transform:rotate(180deg)}#ss_menu,#ss_menu>.menu .share{-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg)}#ss_menu,#ss_menu>.menu{-moz-transition:all 1s ease;-webkit-transition:all 1s ease}#ss_menu>.menu{display:block;position:absolute;border-radius:50%;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);transition:all 1s ease}#ss_menu>.menu .share{width:100%;height:100%;position:absolute;left:0;top:0;-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 1s ease}#ss_menu>.menu .share,#ss_menu>.menu .share .circle{-webkit-transition:all 1s ease;-moz-transition:all 1s ease}#ss_menu>.menu .share .circle{transition:all 1s ease;position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:50%;margin-top:-6px;left:12px;opacity:1}#ss_menu>.menu .share .circle:after,#ss_menu>.menu .share .circle:before{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;content:'';opacity:1;display:block;position:absolute;width:12px;height:12px;border-radius:50%;background:#fff}#ss_menu>.menu .share .circle:after{left:20.78px;top:12px}#ss_menu>.menu .share .circle:before{left:20.78px;top:-12px}#ss_menu>.menu .share .bar{transition:all 1s ease;width:24px;height:3px;background:#fff;position:absolute;top:50%;margin-top:-1.5px;left:18px;transform-origin:0 50%;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)}#ss_menu>.menu .share .bar,#ss_menu>.menu .share .bar:before{-moz-transform-origin:0 50%;-ms-transform-origin:0 50%;-o-transform-origin:0 50%;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-webkit-transform-origin:0 50%}#ss_menu>.menu .share .bar:before{transition:all 1s ease;content:'';width:24px;height:3px;background:#fff;position:absolute;left:0;transform-origin:0 50%;-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-ms-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)}#ss_menu>.menu .share.close .circle{opacity:0}#ss_menu>.menu .share.close .bar{top:50%;margin-top:-1.5px;left:50%;margin-left:-12px;-o-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg)}#ss_menu>.menu .share.close .bar,#ss_menu>.menu .share.close .bar:before{-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%}#ss_menu>.menu .share.close .bar:before{-o-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(-450deg);-moz-transform:rotate(-450deg);-ms-transform:rotate(-450deg);-o-transform:rotate(-450deg);transform:rotate(-450deg)}#ss_menu>.menu.ss_active{background:#00ACF5;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);transform:scale(.7)}#ss_menu>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:absolute;width:60px;height:60px;font-size:30px;text-align:center;background:#00ACF5;border-radius:50%;display:table}#ss_menu>div i{display:table-cell;vertical-align:middle;color:#FFF;padding-top:15px;text-shadow:1px 1px 1px #000;padding-left:15px}#ss_menu>div:hover{background:#22BDFF;transition:.3s;cursor:pointer}#ss_menu div:nth-child(1){top:0;right:-160px}#ss_menu div:nth-child(2){top:-80px;right:-138.56px}#ss_menu div:nth-child(3){top:-138.56px;right:-80px}#ss_menu div:nth-child(4){top:-160px;right:0}#ss_menu a{text-decoration:none}
  • Now, find "</body>" and put the below code right above "</body>"
<script>
        //<![CDATA[
        $(document).ready(function(t){var a,s=$("#ss_toggle"),e=$("#ss_menu");$("#ss_toggle").on("click",function(t){a=parseInt($(this).data("rot"))-180,e.css("transform","rotate("+a+"deg)"),e.css("webkitTransform","rotate("+a+"deg)"),a/180%2==0?(s.parent().addClass("ss_active"),s.addClass("close")):(s.parent().removeClass("ss_active"),s.removeClass("close")),$(this).data("rot",a)}),e.on("transitionend webkitTransitionEnd oTransitionEnd",function(){a/180%2==0?$("#ss_menu div i").addClass("ss_animate"):$("#ss_menu div i").removeClass("ss_animate")})});
        //]]>
</script>
  • At last, paste the below code above "</body>" in your template:
<div id='ss_menu'>
<div>
<a href='http://www.facebook.com/BloggerGuiders' target='_blank'>
<i class='fa fa-facebook-official'>
</i>
</a>
</div>
<div>
<a href='http://www.twitter.com/BloggerGuiders' target='_blank'>
<i class='fa fa-twitter'>
</i>
</a>
</div>
<div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=bloggerguiders' target='_blank'>
<i class='fa fa-envelope'>
</i>
</a>
</div>
<div>
<a href='http://www.google.com/+BloggerGuidersblogspot1' target='_blank'>
<i class='fa fa-google-plus'>
</i>
</a>
</div>
<div class='menu'>
<div class='share' data-rot='180' id='ss_toggle'>
<div class='circle'>
</div>
<div class='bar'>
</div>
</div>
</div>
</div>
  • Now, save your template and you would not be able to see it at the right of your blog. 

Customization Support [By Blogger Guiders]

How to Change The Color Of This Widget?

Are you able to see two orange colored words, one orange and second dark orange color word. Change their hexa-decimal value to the color code you want (Orange colored value to change color on normal state and Dark orange colored value to change color on hover).

How to Movee This Widget From Right To Left?

It's a tricky thing. But so simple. Are able to see red colored words in the able code? Just replace them with their opposite to move it. (like, left to right) 

How To Add More Animations?

Have you noticed the animation? When you click this widget's button and when the four unique icons come up, just notice the bounce effect. If you want to change it to something exciting, just follow below steps:
  • Go to Edit HTML and find "<head>" and below it, paste below code:
<link href='http://daneden.github.io/animate.css/animate.min.css' type='stylesheet/css'/>

  • Now, go to Animation Preview and note the animation name you like. Now, suppose as your noted animation name is "zoomIn" (give attention to capitals too!), then, change the green highlighted words in the above CSS with "zoomIn". 
  • Done!

How to Change Icons & Hyperlinks?

I have done all for you. So, just see blue highlighted words and then replace them with your social links. Now see Violet highlighted words and replace them with the icon code you want.

Need Help?

That were all possible customizations. I know, this tutorial was techy for you. Now, if you need any help, don't hesitate to write it by your finger on comment box below. I will help you surely. If you liked the post, just share it and sit on chair and enjoy the post with the widget.

0 Response to "Animating Floating Social Follow Us Widget For Blogger!"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel