What is Slide out Follower Button?
If you're looking to growth your followers, together with therefore this slide out follow push volition render y'all a swell chance to convert your visitors into followers. This follower push sticks to the bottom right side of your screen, allowing your visitors to easily subscribe to your weblog for updates.
Since, because of the slide out characteristic this widget doesn't takes a lot of infinite on your screen. Therefore, it does non compromise on user friendly experience nor it interrupts a user piece he is browsing or ready your content.
You tin hit notice banking company check the demo of this widget here.
Add Slide out Follow push Widget inward Blogger:
To add together a Google friend's connect follow push inward blogger delight follow the below instructions correctly:
The really kickoff affair y'all demand to create is to add together the CSS codes. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag together with only inward a higher house it glue the next code. You tin hit notice also customize the below codes to fit your mode of template color scheme:
#arlinafollowSubscribe {
background-color: #464646;
width: 220px;
color: #fff;
position: fixed;
z-index: 999;
right: 10px;
bottom: 0
}
.arlinafollowButton {
background: #464646;
color: #fff;
font-size: 13px;
line-height: 28px;
padding: 0 10px;
text-decoration: none;
position: absolute;
top: -28px;
right: 0;
display: block;
border-radius: 2px 2px 0 0;
height: 28px;
font-weight: 700
}
.arlinafollowButton bridge {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsRBcsxOybKaxZF55KUx4_iqjVDCZRPibSJ8MMNryr3HEHe3t_OjAZVkPka7yltW12UbXCFZWbdac7A6rMHcjV8OT09FM6Dmq3TNGmnyMZVON5qSZYOVMKOoW3tb4GthxNgUpgFP71AxKP/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;
padding-left: 15px
}
.arlinafollowButton:hover,
.arlinafollowButton:focus,
.followActive,
.followActive:hover {
color: #fff
}
.arlinafollowButton:hover span,
.followActive bridge {
background-position: 0 -37px!important
}
.followactive {
background-color: #333
}
.arlinafollowForm {
padding: 15px;
margin: auto;
text-align: center;
font-size: 12px
}
.arlinafollowForm p {
margin: 10px 0
}
.arlinaFollowFooter {
text-align: center;
font-size: 11px;
padding: 7px 0;
margin: 0 0 -15px;
border-top: 1px enterprise #3c3c3c
}
.arlinaFollowFooter a {
color: #aaa;
background: none;
text-decoration: none
}
.arlinaFollowFooter a:hover {
color: #fff;
background: none
}
Again inward the template, search for </head> together with only inward a higher house it glue the next jQuery code:
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
Once everything is done, press Save Template push introduce at the really overstep of your screen.
Now to brand the widget appear on your blog, y'all receive got to also add together the HTML Codes of this widget. Go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript and glue the next code inward the HTML box.
<div id="arlinafollowSubscribe" style="bottom: -971px;">
<div class="arlinafollowForm">
<a class="arlinafollowButton" href="#" title="How to add together Slide out Google Friend's Connect Follow push inward Blogger"><b>+ Follow</b></a>
<br />
<a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" title="How to add together Slide out Google Friend's Connect Follow push inward Blogger" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8a86W-VNMUWMIS8VnqzZM6Xkg6Z8I6_QfTqOv-3veYGZ_lxV5zibUwSFuyqfCguGCjeFqQO-vxtTCk0iTUfMlrzrOwb6Jibkfs6dGGv2c3e3lxjETzTxsQwXBZj29I-XjZdhCuqyQKfvV/s1600/Follower.png" alt="how to add together Facebook follow push inward Blogger How to add together Slide out Google Friend's Connect Follow push inward Blogger" /></a>
<br />
<p>with Google Friend Connect</p>
</div>
</div>
After pasting the inward a higher house code inward the text box, y'all demand to supervene upon the blogID i.e. 7342017194742683056 alongside your blog's ID. You tin hit notice run into this tutorial on how to detect your Blog ID inward Blogger. After replacing the weblog ID, salve the widget past times pressing Save widget button.
We hope this tutorial has helped y'all inward learning how to add together slide out Google friend's connect follow push inward blogger. If y'all similar this widget, experience gratuitous to part it on Facebook, Google+ or Twitter.
Comments