Floating Social Follow Widget for Blogger

Posted on February 05, 2015 by 
Floating Social Follow Widget for Blogger
I published some unique styled Social profile follow widget before. Example- Flipping TV, Spinning Coffee cup and Candy, Metro styled, Color flips, Sprite etc. All widgets are trendy and fancy looking and dedicate to make your Blogger site beautiful. And here I am presenting another Social follow widget, it absolutely cool because this widget shown in Right/Left side of your blog instead of sidebar and with mouse hover the icons creates ripple effect. This widget contains Facebook, Twitter, Google plus, Pinterest, LinkedIn, Feedburner slot. Made with CSS3 keyframes animation, CSS and HTML, Easy to configure and install to Blogger Blogs. Let’s see how it looks like and how to install and configure it :)

Floating Social Follow Widget for Blogger


Preview-
Floating Social Follow Widget for Blogger

Live Demo- {Ch-Check it out}

Codes for copy-

Part 1:

/*crawlist.net CSS starts*/
#ks-floatbar {
position:fixed;_position:absolute;bottom:8%;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);  width:64px;}
#ks-floatbar img {height:64px; width:64px;}
.ks-wiggle {
  cursor: pointer; 
 }
.ks-wiggle:hover  {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
    100% { -moz-transform: skewX(0deg); }
}
@-ms-keyframes wiggle {
    0% { -ms-transform: skewX(9deg); }
    10% { -ms-transform: skewX(-8deg); }
    20% { -ms-transform: skewX(7deg); }
    30% { -ms-transform: skewX(-6deg); }
    40% { -ms-transform: skewX(5deg); }
    50% { -ms-transform: skewX(-4deg); }
    60% { -ms-transform: skewX(3deg); }
    70% { -ms-transform: skewX(-2deg); }
    80% { -ms-transform: skewX(1deg); }
    90% { -ms-transform: skewX(0deg); }
    100% { -ms-transform: skewX(0deg);  }
}
@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
    100% { -o-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
/*crawlist.net CSS ends*/


Part 2:

<!--crawlist.net widget starts-->
<div id="ks-floatbar">
<a href="https://www.facebook.com/your page" title="Get Update by Facebook" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkpja4ipsLxy9abtQo3XpF8k3aROASyhwC_2qnSKCDraqYZxd5Pl22rH_lMdyQQGPZPaHQssg5ddXWP4LpHQbH8hhZlXavpK6Rn0HyT6wP6zbcmWKds_U_zULbrWNjJePK7hZxfc4tvhAr/s1600/1.png
"/></a>

<a href="https://twitter.com/your profile" title="Get Update by Twitter" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWjobrPfCQij2geBUxqaxEEK4-hJc4MO3UjAdZx6gRSTqy0VPIcYHJ97tKNQi7VZAKKMawCbA-WQZ6pJGF2WXCLDwL1j0hsyRfl6t7zvPpUZ3zddem0VzijVkl6HLp_wPnk89PUtTZJ4W/s1600/2.png"/></a>

<a href="http://plus.google.com/your profile" title="Get Update by Google circle" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxNduOe-gW3hLGR3PmwyCjdimSWyB_PoYr6bQuhY2PJzERuTJdbz__2SQFGu1XRFTy0ts5sxEUamKpeictRyLzi8NgMiuIoP47ezPcp4KDIQ9UHRd3UzoUKMNLmPzqq8pIERpt9ZowfzVR/s1600/3.png"/></a>

<a href="http://pinterest.com/your profile" title="Get Update by Pinterest" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDF6u_Sgh2bG1ytQoAltmtkWtm2AMEeoEWz6tAJ2Hv5Lc-XscBQVVfSlNr9C7tsMEHs4CrBFwHGAy4xflxVCfFojtoJcFdyPBfyujC_nIWu6rMcykrF69ighoYEupeRhBA5Jk87LLxmOUi/s1600/4.png"/></a>

<a href="http://linkedin.com/your profile" title="Get Update by LinkedIn" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12NXZTEKfWv3eJ9GGuYUwtdjjOEqo3cx8mmxvh1hCP1jL4_zJwIrKC0R2HhXkaaPn7lilLaEgx_mFH8MmcmAVxrJ997UkD40MP3WWzJO4R28tF-MTzWcbQ2MdGlIUelEfHaYpPRSM89NC/s1600/5.png"/></a>

<a href="http://feeds.feedburner.com/your feed id"  title="Get Update by Email" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtlQ2up8iQw_QxnKpmy9n1a-ebQvFL6rA7zxrWT3hB_Gt_DaR3Yieq4NXbEiH_qRNJRKfSjfufyWEFRP35r__A_lMfZ8CRIFrZlaA9HECi3yVlx29SY5PA0egW7IK6kEOyCAHSZ4uCAL5x/s1600/6.png"/></a>
</div><!--crawlist.net widget ends-->


How to install:
This widget set up has one step, Read on-
  • Log in to your Blogger, select your blog
  • Go to ‘Template’ tab, select ‘Edit HTML’
  • Search (Using Ctrl+F or Cmd+F) inside code snippet for ]]><
  • And copy and paste ‘Part 1’s code above ]]><
  • Again search for </head>
  • Copy and paste ‘Part 2’s code above </head>
  • And configure:
How to configure:
  • Collect your following profile’s direct address link and paste ‘em on default links. All links indicates with Red color
  • Hit ‘Save Template’ And see your widget in live action
More customizing:
  • Default widget will appear on the Left side of your Blogger. If you want to show this widget on Right side, Just change the code value left:0px; to right:0px; that’s it
  • If you do not like the size of the icons, you may change the size of icons just put this line of code and change the value of #ks-floatbar img (default is 64)
  • If you want to remove any icon just delete that line of code <a> to </a> full, that way you can also reset the order of the icon/profile.
So how it looking and working on your Blog don’t forget to mention, Stay subscribed and tuned new Blog goodies will release soon. Chill…..