Hello all, today in this article i am going to share an another most
beautiful and unique blogger widget with all of you. I shared many
social sharing widgets for blogger in my previous posts but about the widget we going to discuss here its totally different than others we shared. As you can see the screenshot below it contains three different social sharing buttons(
Facebook Like, Google Plus One and Twitter Follow.). it covers full screen/layout of your blog. when someone comes in your blog they can like , +1. or follow you on twitter and then click on cancel button to open up curtain and display your website/blog.
Also read : Beautiful Social Count Widget for Blogger Blogspot
Isn't it cool? would you like to have this widget on your blog?
Just follow the simple steps given below :
Go to
blogger dashboard > Layout > Add a gadgetChoose
HTML/Javascript from the list and copy and paste below code into 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/AVvXsEhjZreTPUN35HKRBGSyLaHLgnlG-eSz0kk12gk42yIJAiDJyg7vz-v4P4mr1PipBA1j48twSHdCxCj30E9u0p6V-LMSG-yeFNSmHS13I7_gpeENvwjHl6v1i1_s_TC5XZ7ll8QeGknHudXs/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%2Fbloggerwidgetgenerators&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/AVvXsEjmKoiJjgBlqDYJHyPEZxqbQgQMS52xq1xmXDnDlttW_dveU0_mnbfVtPKFNZ7-Tzsc9ZUWaKEmWtJ2PLyCqXL9t6vCEUpVkAlvCVNQcFLzFy7NFlCbc9fNCQ9-ltub-gzZANMqkD1u1o7C/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/AVvXsEhY4Qx3jzf4lZPIlWX-nrv22252_zp25JKg4eb3NgXCdSgK_gqFnpLzX-5FV67yK7uGNiJIijAtW4rMZoGjKuLvTYnHtR0_sdiSBNDyH9lni9FSaIKP2I65dCA6sPEM3nasKq5jgwfXcuTC/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/nitinmaheta" 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%}</style><style type=text/css>div.eehucoder,</style><style type=text/css>div.ouihucoder,</style><style type=text/css>div.iuohulcoder{_position:absolute}div.ouihucoder,div.iuohulcoder,div.uoihucoder{position:fixed;text-align:center;z-index:99900}div.uoihucoder{_position:absolute}div.hucoder-gopluas{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") )}</style>
Now, just replace red colored text with username of social profile.
Finally save your widget and you are done :D