Well, you might have visited wiki how online knowledge portal and whenever you scroll down on the post you might have seen some scrolling widget that pops out automatically, and today we're going to see how you can add that same widget right inside your blogger blog. Using simple HTML, JavaScript and designing it, using CSS. I cannot say if they have actually designed it, but I got this code right from the blog, so a big thanks goes to them.
Well I do not have any perfect demo for this one, but I have just embed the .GIF image below that shows how actually this widget works.
- Open Blogger > Template > Edit HTML.
- Press
Ctrl +F & search for<footer>or<div id="footer">any one you find & paste below code above it.<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1500) {
$('#scrollwig').fadeIn();}
else {
$('#scrollwig').fadeOut();
}
});
</script>
<b:if cond='data:blog.pageType == "item"'>
<div id="scrollwig" class="sliderbox_06" style="display:none;right: 0px; bottom: 0px;">
<div id="scroll_content">
<div id="follow">
<div class="text">
<p class="para1">Follow Us On</p>
<p class='para2'><span class='googlefollow'>Google+</span> & <span class='fbfollow'>Facebook</span></p>
<br/>
</div>
<div class='g+' style='position:relative;left:5px;float:left'>
<div class="g-follow" data-annotation="vertical-bubble" data-height="20" data-href="//plus.google.com/u/0/108117168464941766416" data-rel="author"></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>
</div>
<div class='fb' style='float:right;position:relative;right:-10px'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-follow" data-href="https://www.facebook.com/hackinguniversity" data-colorscheme="light" data-layout="box_count" data-show-faces="false"></div>
</div>
</div>
</div>
</div>
</b:if>
<div class='clr'/> - Now search for
]]></b:skin>tag & paste below CSS code above it.#scrollwig{bottom:-300px;opacity:0.99;position:fixed;right:-510px;width:275px;z-index:4}#getwidget{bottom:0;color:#323232;float:right;font-size:.65rem;position:absolute;right:85px}#scroll_content{border:5px solid #FFF;border-radius:150px 150px 0 150px;box-shadow:-3px 3px 4px #BFBFBF;margin-bottom:0}#follow{background-color:#FFF;border:15px groove #F8DA39;border-bottom:none;border-radius:150px 150px 0 150px;border-right:none;font-size:.9em;height:185px;margin-bottom:0;padding:40px;text-align:center}.text{margin:0}.para1{color:#47401A;font-family:oswald;font-size:1.9rem;font-weight:400;letter-spacing:1px;margin:0;padding-bottom:.1em}.para2{font-size:.8rem;margin:0 0 0 -9%;width:120%}.fbfollow{color:#3B5998;font-size:1.3rem;font-weight:700}.googlefollow{color:#D34836;font-size:1.3rem;font-weight:700}
- That's it now just Save your Template & refresh your blog.
So guys now your widget is up, and possibly you could get more followers using this awesome widget, well thanks to WikiHow for their widget innovation and Bloggslab for manipulating this widget for the blogger platform. Well I have even created a nice video that demonstrates how to install this widget in blogger check that out too.