How To Add 4 In 1 Social Sharing Sliding Pop Out Widget In Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Now you can have 4 In 1 social share sliding pop out widget Using jQuery.It make your blogger site more beautiful than before and i am using this.It will save spaces of your blog and enable you to add more gadget.Here you will see sliding Facebook like button , Twitter widget , Google Plus and Subscribe Popup form.This look much useful on your blog with a cute sliding and Jquery effect

Go to Blogger > Design > Edit HTML

Tick Expand Widget Template

Press CTRL+F and find the following code

</head>

And paste the following code just before < / head >

<link rel="stylesheet" href="https://rafiblog.googlecode.com/svn/trunk/pop4.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });
</script>

Now go to Blogger Dashboard > Page Element > Add a Widget > HTML/Javascript and save it

Now paste the following code in HTML/Javascript box

<div id="on">
    <div id="facebook_right" style="top: 18%;">
        <div id="facebook_div">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXhSbS3VNDZDgemAxA74dEnwimauubQFpww1kayLLFEWTDaibn7aWf5EkTyJr9Uy3gdw2JPPUr26Ac_zFEowdt8FOz3F27TNBShyIIU1BvNXFVwge6afBGYlWwBYjtRcP9NIL9BIJ6tHc/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" />

            <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com/TodaysWorldPortal&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe>
        </div>
    </div>
</div>
<div id="on">
    <div id="twitter_right" style="top: 35%;">
        <div id="twitter_div">
            <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qKpGKZnHPEFwwVjm0yBx9l0ga0MWNgmQY9z4nNj_OTvSDat3hfHDXByGYWnKRoBjK9Bhi5qsL-VutrpNdT2eRsGQ1LToM6EuqB17R0OH0UE4lF3FaYCLh24GfLQUHQ0dT_WqYHP_Luxf/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png">
            <script src="http://widgets.twimg.com/j/2/widget.js"></script>
            <script>
                new TWTR.Widget({
                version: 2,
                type: 'profile',
                rpp: 4,
                interval: 1000,
                width: 246,
                height: 265,
                theme: {
                shell: {
                background: '#63BEFD',
                color: '#FFFFFF'
                },
                tweets: {
                background: '#FFFFFF',
                color: '#000000',
                links: '#47a61e'}
                },
                features: {
                loop: false,live: true,
                scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all'                  }
                }).render().setUser('urstrulyAravind').start();
            </script>
        </div>
    </div>
</div>
<div id="on">
    <div id="google_plus_right" style="top: 52%;">
        <div id="google_plus_div">
            <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxa97B0eN6GtI3mwarR7nrL7OjV9rPzqI5VhsDIa7xnWeHHAKSOoS7XF1xxqIoI4gCbi-ssGRqSbz_gaQQuRNEYqkoyEK85YYqg6rkEl8J4wnLYTOuTbWiIF3NEjJUXdLGwjV7DJk8A8JJ/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.png">
            <div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div>
    </div>
</div>
<div id="on">
    <div id="feedburner_right" style=" top: 69%;">
        <div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Todays World', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Todays World Portal" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center>

            <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTB8B8c9DvJ1uEswK8RbsZDIwF1EFYBT1o5bsdgyoZ217a5Hiw3SBhNrIYv1N-UF7A7s-kE2pCjJEXTMJQdmVGU8Xb-KLjIDYUa_uX8pCzWb5TGSVOPVppfOrYkoESxWszTKjpN-_ajiK/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png">
        </div>
    </div>
</div>

Now see your blogger blog is looking more beautiful with those sliding pop out widget to blogger.

Please spend few moments to share this if you like

Tweet

Now you can have 4 In 1 social share sliding pop out widget Using jQuery.It make your blogger site more beautiful than before and i am using this.It will save spaces of your blog and enable you to add more gadget.Here you will see sliding Facebook like button , Twitter widget , Google Plus and Subscribe Popup form.This look much useful on your blog with a cute sliding and Jquery effect Go to Blogger > Design > Edit HTML Tick Expand Widget Template Press CTRL+F and find the following code </head> And paste the following code just before < / head > <link rel="stylesheet" href="https://rafiblog.googlecode.com/svn/trunk/pop4.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); }); </script> Now go to Blogger Dashboard > Page Element > Add a Widget > HTML/Javascript and save it Now paste the following code in HTML/Javascript box <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXhSbS3VNDZDgemAxA74dEnwimauubQFpww1kayLLFEWTDaibn7aWf5EkTyJr9Uy3gdw2JPPUr26Ac_zFEowdt8FOz3F27TNBShyIIU1BvNXFVwge6afBGYlWwBYjtRcP9NIL9BIJ6tHc/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com/TodaysWorldPortal&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356" scrolling="no"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qKpGKZnHPEFwwVjm0yBx9l0ga0MWNgmQY9z4nNj_OTvSDat3hfHDXByGYWnKRoBjK9Bhi5qsL-VutrpNdT2eRsGQ1LToM6EuqB17R0OH0UE4lF3FaYCLh24GfLQUHQ0dT_WqYHP_Luxf/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png"> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 1000, width: 246, height: 265, theme: { shell: { background: '#63BEFD', color: '#FFFFFF' }, tweets: { background: '#FFFFFF', color: '#000000', links: '#47a61e'} }, features: { loop: false,live: true, scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' } }).render().setUser('urstrulyAravind').start(); </script> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxa97B0eN6GtI3mwarR7nrL7OjV9rPzqI5VhsDIa7xnWeHHAKSOoS7XF1xxqIoI4gCbi-ssGRqSbz_gaQQuRNEYqkoyEK85YYqg6rkEl8J4wnLYTOuTbWiIF3NEjJUXdLGwjV7DJk8A8JJ/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.png"> <div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div> </div> </div> <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Todays World', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Todays World Portal" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center> <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTB8B8c9DvJ1uEswK8RbsZDIwF1EFYBT1o5bsdgyoZ217a5Hiw3SBhNrIYv1N-UF7A7s-kE2pCjJEXTMJQdmVGU8Xb-KLjIDYUa_uX8pCzWb5TGSVOPVppfOrYkoESxWszTKjpN-_ajiK/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png"> </div> </div> </div> Now see your blogger blog is looking more beautiful with those sliding pop out widget to blogger. Please spend few moments to share this if you like