21 February 2013

Animated Scroll Fade + Opacity Hover Sidebar Widget

Perhaps, the most important part in blogging is to get more visitors engaged on your blog post because without the readers, your posts are just useless --well it depends if you don't want visitors to read your blog posts. While having visitors are very difficult to achieve sharing widgets from social media have become important piece in the process of interaction and engagement between the writers and the visitors. With the help of these sharing social media widgets, publishers can be able to optimize its article thus potentially be reached to readers. That is why there are many websites offered FREE services to publishers or website developers to give bridge on the publishers and the visitors.

So with that in mind, now, this widget will help you get potential visitors in your blog posts. Why? Imagine when you read article downwards then you see a widget and at the same time you like that article. You just click LIKE button there, or if not you opt to share it. When they share something, it will broadcast in their profile, and it creates potential for gathering more visitors in your blog. Now, lets get started.

Animated Scroll Fade + Opacity Sidebar Widget
Before we begin, actually, i modify this widget which improves usefulness with sharing widgets plus design, and displays sidebar widgets with a certain condition. This widget is actually an Animated Scroll to TOP only. Wherein, if you scroll down the page it will show an up arrow and then if you will click the arrow you will be animated to top or if you scroll to up again, it will hide the arrow. Seems pretty useful to me. Now, i improved it to make it more useful in sharing widgets plus opacity hovers thingy.
Flow of the Sidebar Widgert
Here, i just want to put the process or how it works. It is pretty simple process. Initially, it will hide the widget.When the scrollbar is on the TOP position, it will fade out the widget, however if scrollbar is greater than a certain value (i used 100), it will fade in. With the help of jQuery, it can accomplished with smaller procedures.

CSS+JQUERY
You can use this in your websites or in blogging platform like Blogger. With this, since i have put it in my blog. It much more reasonably working if i just put a blogger steps though it is likely the same with normal html page.

Tutorial on Adding Widget(Animated Scroll Fade+ Opacity Hover)
1. First you need to add jQuery Framework, if you have it then you skid this.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
2. Now, since you know the flow of the widget, we need some script here. The idea is that initial value of the sidebar widget is it hides in the page, but whenever the scrolltop is greater than 100 it will fade in and you can see it, else it will fade out.

<script>
$(document).ready(function(){
// hide #mbz-sidebar-widget first
$("#mbz-sidebar-widget").hide();
// fade in #mbz-sidebar-widget
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#mbz-sidebar-widget').fadeIn();
} else {
$('#mbz-sidebar-widget').fadeOut();
}
});
});
});
</script>
3. You need to add some extra icing on the design with CSS. So here, when you hover the widget it will normally displays the color, but if not it has an opacity low or just faded.
<style>
#pageshare {
opacity: 0.5;
position:fixed;
top:200px;
left:6.5%; 
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#eff3fa;
padding:0 0 2px 0;z-index:10;
}
#pageshare:hover{
opacity: 1;
}
#pageshare .sbutton {
float:left;
clear:both;
margin:5px 5px 0 5px;
}
.fb_share_count_top {
width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
 You can put the CSS style AFTER <head> tag, but in blogger you can add it together with the divs in HTML JavaScript Gadget. Then add code below anywhere before </body> tag.
<div id='mbz-sidebar-widget'>
<div id='pageshare'>
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<br/> <span> <a href='http://mabzicle.blogspot.com/2013/02/animated-scroll-fade-opacity-hover.html'>get this</a></span></div>
NOTE:

  •          - left: attribute this is where it displays your widget, however, you can set it to a certain pixel (px) or you can add it statically on your website. But here, i just used that % so that if i will move the browser it will just go to the LEFT position with a certain percent.
  •          - opacity attribute. Now here, i set it to 0.5 (opacity range 0-1) so that it will look faded but whenever i hover the widget it will display 1 opacity and it is normal display color. 
  • you can modify all css attributes here whenever you like.
And now i hope it works pretty well... i can entertain problems and questions regarding this widgets. If it works in you.. Please do share it, like, tweet etc. Thank you ^_^
Advertisement


Featured Offers:
Advertisement