Floating Social Media Slide out Widget For Blogger

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.com

Select your Layout.

Click on "Add a Gadget" then select "HTML/JavaScript".

Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.



Live Demo

<style type='text/css'>
.tricksteacherFSS 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}
.tricksteacherFSS {height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.tricksteacherFSS 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/AVvXsEiuud6izRif_f4WisEgk1ReIlCyvzq3-PO5omb03Nh3pO5vn_GTqCc5PkHFGE_bpYn9ws29D2jNAG7zO4n4qIZnoqzBA-8w6K4-DddcWrT7CZRnSEPTnAlgiyiuNueOy2Fq0DpNx16_V8dj/s320/BS+FSS.png) no-repeat;overflow:hidden}
.tricksteacherFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.tricksteacherFSS 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}
.tricksteacherFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.tricksteacherFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.tricksteacherFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.tricksteacherFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858}
.tricksteacherFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.tricksteacherFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px}
.tricksteacherFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px}
.tricksteacherFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px}
.tricksteacherFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px}
.tricksteacherFSS a.BSfacebook:active{background-color:#294a90}
.tricksteacherFSS a.BStwitter:active{background-color:#40b5fe}
.tricksteacherFSS a.BSmail:active{background-color:#909090}.tricksteacherFSS a.BSrss:active{background-color:#f37526}                                                                                                                                  /*widget by www.tricksteacher.blogspot.com */
</style>
<div class='tricksteacherFSS'> <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/asadtariq77' 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  asadtariq77 with your twitter name.
    Replace asadtariq77@gmail.com with your email address.