Add a 3 in 1 Sliding Social Bookmarking Widget in Blogger

Would like to play with html we also like to play with html because it's a free and easy source learning language and most important thing is this stuff is, it gives results after in just 2 sec. We can give any kind of position to our html coding and that's why we can create widgets with a freely no script boundation, no versions boundations and most important thing is blogger is totally depend and works on the html, css, and javascript as wordpress widgets always need plugins like all in one seo widget so blogger don't need this kinds of plugins you just to need some coding skills and everything will happen automatically, so this is also a big difference between Blogger and Wordpress thats why we like blogger because it's platform is independent but wordpress also has some their own qualities which all are beyond to blogger, so today we have an another unique fresh and crispy blogger widget for you, which is named as 3 in 1 Sliding Social Bookmarking Widget.

Live Demo

Add a 3 in 1 Sliding Social Bookmarking Widget

Follow all steps to add this widget in your blog.

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<div class="eehucoder kshucoderr-facebook" id="obenimmil"><center><a style="display:block;width:50%;min-width:500px;height:42px;background-color:#333;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:26px;line-height:42px;font-weight:normal;margin-top:15px;-webkit-border-radius: 12px;border-radius: 12px;border:2px solid #c45004;-moz-box-shadow: 0 0 15px #000;-webkit-box-shadow: 0 0 15px #000;box-shadow: 0 0 15px #000;">Which one do you use the most ?</a></center></div><div class="ouihucoder saym1rayt hucoder-facebook"><div id="faceic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#4a6ea9;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:180px;height:180px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghq4vUbOOL27hZsny1NoTRPtEOq3qXmQsDmTelLV8zKfFsHF3qW3gqpdpbyVME_EGw91ByoMqx2IVVZVqfsSqZqp06eSmgYGHqjYYtb70n8mFJ1KzWYc8O0TkyAvq16x_yehmYvNMETNCO/s180/facebook-icon.png) no-repeat top left;margin-top:115px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Before entering the site,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">you liked us on Facebook ?</a><br/><br/><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FWidgetGenerators&send=false&layout=button_count&width=450&show_faces=false&font=trebuchet+ms&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:130px;height:21px;" allowtransparency="true"></iframe><a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#eceef5;-webkit-border-radius: 6px;border-radius: 6px;border:1px solid #6279ad;line-height:18px;font-family:Tahoma, Arial, sans-serif;font-size:11px;color:#3b5998;font-weight:normal;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);"><img src="" style="vertical-align:-4px;padding:0px;margin:0px;border:none;float:left;background-color:transparent;" />Cancel</a></center></div><div class="uoihucoder saym2rayt hucoder-gopluas"><div id="plusic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#e46044;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQ_Tt-Smu-1kUhS5wec4w-i-2SDWLejgHfU34_WuLV9ZOwfjc-fAjtg-vVkq2jpvEXwOLcYTIGt31Tm7eKaaDy8BFOVFIoxYejvEjtUhzTwkDqVCHzpGWcwno5SBtzqI6pfvLWFZKuYuh/s200/google-plus-icon.png) no-repeat top left;margin-top:110px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Before entering the site,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">google+ us at +1 Can you give me ?</a><br/><br/><div class="g-plusone" data-annotation="inline" data-width="140"></div><script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script><a style="vertical-align:top;display:inline-block;width:90px;height:23px;background-color:#eee;-webkit-border-radius: 4px;border-radius: 4px;border:1px solid #fff;line-height:23px;font-family:Tahoma, Arial, sans-serif;font-size:12px;color:#e46044;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Cancel</a></center></div><div class="iuohulcoder saym3rayt hucoder-twitterr"><div id="twitic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#32def4;text-align:center;"><center><a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibUJkKCo4wT9CRkslirWIfx6UI4UGHFlGegwE_vlq0SPlVPF00DTEGw02VR7vPVuo0A1zoXAXRtYXcLNrGRS6uqtLKJjVBu1DOb57Efcv0yTanm5VUZ2hHI0fpZ3SF8XGnGngpjD3f8sJ9/s200/twitter-icon.png) no-repeat top left;margin-top:105px;"></a></center></div><center><a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Before entering the site,</a><a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">you can follow us on Twitter ?</a><br/><br/><a href="https://twitter.com/WidgetGenerator" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow us</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#f8f8f8;-webkit-border-radius: 3px;border-radius: 3px;border:1px solid #ccc;line-height:18px;font-family:Helvetica, Arial, sans-serif;font-size:11px;color:#444;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Cancel</a></center></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>$(".gecgec").click(function(){$(".saym1rayt").animate({top:"-100%"},1100);$(".saym3rayt").animate({top:"-100%"},600);$(".saym2rayt").animate({top:"-100%"},1700,function(){$(".saym1rayt").hide();$(".saym2rayt").hide();$(".saym3rayt").hide()})});$(".saym1rayt").click(function(){$("#faceic").fadeOut(200);$("#plusic").fadeIn(200);$("#twitic").fadeIn(200);$(this).animate({width:"50%"},200);$(".saym2rayt").animate({width:"25%",left:"50%"},200);$(".saym3rayt").animate({width:"25%",left:"75%"},200);$("#obenimmil").fadeOut(400)});$(".saym2rayt").click(function(){$("#faceic").fadeIn(200);$("#plusic").fadeOut(200);$("#twitic").fadeIn(200);$(this).animate({width:"56%",left:"22%"},200);$(".saym1rayt").animate({width:"22%"},200);$(".saym3rayt").animate({width:"22%",left:"78%"},200);$("#obenimmil").fadeOut(400)});$(".saym3rayt").click(function(){$("#faceic").fadeIn(200);$("#plusic").fadeIn(200);$("#twitic").fadeOut(200);$(this).animate({width:"50%",left:"50%"},200);$(".saym1rayt").animate({width:"25%"},200);$(".saym2rayt").animate({width:"25%",left:"25%"},200);$("#obenimmil").fadeOut(400)})</script>
<style type=text/css>div.eehucoder {
position:fixed;
text-align:center;
z-index:99990;
}

div. ksahucoderr-facebook {
background-color:transparent!important;
height:75px;
left:0;
overflow:hidden;
top:10px;
width:100%;
}

div. kshucoderr-facebook {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
}

div.hucoder-facebook {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
background-color:#4a6ea9;
cursor:pointer;
height:100%;
left:0;
overflow:hidden;
top:0;
width:32%;
}

div.hucoder-twitterr {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
background-color:#32def4;
cursor:pointer;
height:100%;
left:68%;
overflow:hidden;
top:0;
width:32%;
}

div.hucoder-gopluas {
background-color:#e46044;
cursor:pointer;
height:100%;
left:32%;
overflow:hidden;
top:0;
width:36%;
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );
}

div.ouihucoder,div.iuohulcoder,div.uoihucoder {
position:fixed;
text-align:center;
z-index:99900;
}

</style><style type=text/css>div.eehucoder,</style><style type=text/css>div.ouihucoder,</style><style type=text/css>div.iuohulcoder,div.uoihucoder {
_position:absolute;
}

Codes by: Nitin Mehta

• Now, Save Your Widget.

Make Changes....!

Make some following changes in above codes.

• Replace it WidgetGenerators with your Facebook Page username.
• Replace it WidgetGenerator with your Twitter username.