How to add Wordpress Style scrolling Follow Widget in Blogger? Adding this widget to blogger is very simple just follow these steps:
- Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code:
<div id="bit" class="loggedout-follow-normal" style="bottom: 0px; ">Now replace Tricks Donor with your blog's title and also replace tricksdonor with your feed id.
<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">Follow Tricks Donor</label></h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?tricksdonor', '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="tricksdonor" /><input name="loc" type="hidden" value="en_US" />
<p id="bsub-subscribe-button"><input type="submit" value="Subscribe"></p>
</form>
<div id="bsub-credit"><a href="http://tricksdonor.blogspot.com?ref=lof" style="text-decoration:none;color: whitesmoke;">Powered by Tricks Donor</a></div>
</div><!-- #bitsubscribe -->
</div>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/LoggedOutFollow.js"></script>
<style>
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#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/AVvXsEjynAV6QhoYRrPSEzWxK_pEEC4dWeaM9x0ZBUfFv_q73827CC_sY4WzDG1x6sxOeE0YiaeGyHfZDx1u4ITnsuIFe1DbwU_8VKy6WGVOmDsPuoucmOUsRGQwE1HoMZnUzo2VgYPbnW1wy2U/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>
And if you liked this post, please like us on fbpage. Thanks!
Subscribe to our mailing list to get the updates to your email inbox...
0 comments:
Post a Comment
Confused? Feel free to ask
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. You Can add HTML CODE in comments.
2. You can always Test the tutorial.
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Saeed Aquib Ahmed :)