Today i am going to teach you how to add a floating follow us widget in your blogger blog. to add this widget follow the steps given below
How to Add this Widget to blogger
How to Add this Widget to blogger
- Go to layout>add a gadget>HTML/javascript
- Paste the following code
<div id="bit" class="loggedout-follow-normal" style="bottom: 0px; "><a class="bsub open" href="javascript:void(0)"><span id="bsub-text">Follow</span></a><div id="bitsubscribe" class="open"><h3><label for="loggedout-follow-field">Subscribe via Email</label></h3><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?YOUR-FEED-BURNER-URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" id="loggedout-follow"><p>Get every new post delivered to your Inbox.</p> <p><input type="email" name="email" style="width: 95%; padding: 1px 2px;outline:none" onclick="value=''" value="Enter your email address" onfocus="this.value=(this.value=="Enter your email address") ? "" : this.value;" onblur="this.value=(this.value=="") ? "Enter email address" : this.value;" id="loggedout-follow-field"/></p><input name="uri" type="hidden" value="YOUR-FEED-BURNER-URL" /><input name="loc" type="hidden" value="en_US" /> <p id="bsub-subscribe-button"><input type="submit" value="Subscribe"/></p></form>
</div></div><script type="text/javascript" src="http://yourjavascript.com/215521111543/pop-up-box.js"></script>
<style>#TB_HideSelect{z-index:99;position:fixed;top: 0;left: 0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;height:100%;width:100%;}* html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;_margin-bottom:1px;}#bit, #bit * {*zoom: 1;}#bit {font: normal 13px "Helvetica Neue", sans-serif;_display: none;}.loggedout-follow-shelf {position: fixed;right: 40%;z-index: 999999;bottom: -300px;}.loggedout-follow-normal {position: fixed;z-index: 999999;bottom: -300px;right: 10px;}.loggedout-follow-typekit {margin-right: 4.5em;position: fixed;z-index: 999999;bottom: -300px;right: 10px;}#bit a.bsub {display: block;overflow: hidden;padding: 0 10px 0 8px;float: right;text-decoration: none !important;line-height: 28px;font: normal 13px/28px "Helvetica Neue", sans-serif;color: #CCC;text-shadow: #444 0px -1px 0px;letter-spacing: normal;border: 0; background-color: #464646;background-image: -ms-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image: -moz-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image: -o-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image: -webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));background-image: -webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image: linear-gradient(bottom, #464646, #3f3f3f 5px); -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);box-shadow: 0 -1px 5px rgba(0,0,0,0.20); outline-style: none;outline-width: 0;}#bit a.bsub {-moz-border-radius: 2px 2px 0 0;-webkit-border-radius: 2px 2px 0 0;-o-border-radius: 2px 2px 0 0;-ms-border-radius: 2px 2px 0 0;border-radius: 2px 2px0 0 0;}#bit a.bsub span {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zHhzFit9YZzq3hDB44cxnxhG206ZAQT8u9K2ELCm3wfjCJJyzf5pHyq8sc2pSwL_nDdXUW8NuikJhCpK9Gx0yGCSPwzoWHTXs3g3MdVUGj9R8ZKe_IjNt2QUp2igzCZm6Ols5wEjtzU/s1600/wpcom-admin-bar-icons.png) 0 -77px no-repeat;padding-left: 19px;}#bit a:hover span, #bit a.bsub.open span {color: #ffffff !important;background-position: 0 -117px;}#bit a.bsub.open {background: #333;}#bitsubscribe {background: #464646;color: #fff;padding: 15px;width: 200px;margin-top: 27px;-moz-border-radius: 2px 0 0 0;-webkit-border-radius: 2px 0 0 0;-o-border-radius: 2px 0 0 0;-ms-border-radius: 2px 0 0 0;border-radius: 2px 0 0 0;*float: right;*margin-right: -68px;}div#bitsubscribe.open {-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5);-moz-box-shadow: 0 0 8px rgba(0,0,0,0.5);-o-box-shadow: 0 0 8px rgba(0,0,0,0.5);-ms-box-shadow: 0 0 8px rgba(0,0,0,0.5);box-shadow: 0 0 8px rgba(0,0,0,0.5);}#bitsubscribe div {overflow: hidden;}#bit h3, #bit #bitsubscribe h3 {margin: 0 0 .5em 0 !important;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 300;text-shadow: 0 1px 0 #333;font-size: 20px;color: #fff;text-align: left;}#bit #bitsubscribe p {margin: 0 0 1em 0;*margin: 0 0 0 0;font: 15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 300;text-shadow: 0 1px 0 #333;color: #fff;}#bitsubscribe p a {margin: 20px 0 0;color: #fff;text-decoration: underline;}#bit #bitsubscribe p.bit-follow-count {font-size: 13px;}#bitsubscribe input[type=submit] {padding: 2px 20px;background: #333; /* Old browsers */background: -moz-linear-gradient(top, #333 0%, #111 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #333 0%,#111 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #333 0%,#111 100%); /* Opera11.10+ */background: -ms-linear-gradient(top, #333 0%,#111 100%); /* IE10+ */background: linear-gradient(top, #333 0%,#111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-moz-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;-moz-box-shadow: inset 0 1px 0 #444;-webkit-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;*margin: 1em 0 1em 0;}#bitsubscribe input[type=submit]:hover {background: #222; /* Old browsers */background: -moz-linear-gradient(top, #333 0%, #222 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #333 0%,#222 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #333 0%,#222 100%); /* Opera11.10+ */background: -ms-linear-gradient(top, #333 0%,#222 100%); /* IE10+ */background: linear-gradient(top, #333 0%,#222 100%);color: #fff;-moz-box-shadow: inset 0 1px 0 #4f4f4f;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}#bitsubscribe input[type=submit]:active {background: #111; /* Old browsers */background: -moz-linear-gradient(top, #111 0%, #222 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #111 0%,#222 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #111 0%,#222 100%); /* Opera11.10+ */background: -ms-linear-gradient(top, #111 0%,#222 100%); /* IE10+ */background: linear-gradient(top, #111 0%,#222 100%);color: #aaa;-moz-box-shadow: inset 0 -1px 0 #333;-webkit-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}#bitsubscribe input[type=text] {-moz-border-radius: 3px;-webkit-border-radius: 3px;-o-border-radius: 3px;-ms-border-radius: 3px;border-radius: 3px;font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 300;}#bitsubscribe input[type=text]:focus {border: 1px solid #000;}#bitsubscribe.open {display: block;}#bsub-subscribe-button {text-align: center;margin: 0 auto;}</style>
- Save you Html/javascript gadget
All done
EmoticonEmoticon