Floating Social Media Slide out Widget For Blogger , Website And wordpress

Floating social media slide out stick to right site of your blogger. When you mouse over then you will see a slide out option. This widget has created completely with CSS and when you scroll down then the widget will also scroll down up to edge of your footer bar.


 Go to Blogger
Select your Layout.
Click on "Add a Gadget" then select "HTML/JavaScript"
Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style type='text/css'>
.ThetricklabFSS a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.thetricklabFSS {height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.thetricklabFSS a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltJGFhofcdUErvOA9RYqCgYELl0BTXD37OvTyiTdGfyEMelKscLZdstKH6EUVDM6h0CzEZ8Fm1wgxNcV108bFUU3pZMH2ZWCoY_u_ofTVeVH8IvuXNnuy5RuvYZKzAa968lmhRf71cNSG/s320/BS+FSS.png) no-repeat;overflow:hidden}
.thetricklabFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.thetricklabFSS a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.thetricklabFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.thetricklabFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.thetricklabFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.thetricklabFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858}
.thetricklabFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.thetricklabFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px}
.thetricklabFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px}
.thetricklabFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px}
.thetricklabFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px}
.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BSfacebook:active{background-color:#294a90}
.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BStwitter:active{background-color:#40b5fe}
.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BSmail:active{background-color:#909090}.FloatingSocialMediaSlideoutWidgetForBloggerFSS a.BSrss:active{background-color:#f37526}                                                                                                                                  /*widget by www.thetricklab.blogspot.com */
</style>
<div class='thetricklabFSS'> <a class='BSfacebook' href='https://www.facebook.com/asadtariq786' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Facebook'><span>Join Us on Facebook</span></a> <a class='BStwitter' href='https://twitter.com/asadtariq78' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Twitter'><span>Tweet Us On Twitter</span></a> <a class='BSrss' href='/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='RSS Feed'><span>Visit Our rss feed</span></a> <a class='BSmail' href='mailto:asadtariq77@gmail.com' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Email&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-email&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Email'><span>Newsletter</span></a></div>

 Replace  asadtariq786 with your Facebook name.
    Replace  asadtariq78 with your twitter name.
    Replace asadtariq77@gmail.com with your email address.