Thursday, June 14, 2012

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


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

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

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="http://1.bp.blogspot.com/-XyYjgghpO7A/TwqccHW47QI/AAAAAAAACSU/OvETkV56ui8/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="http://2.bp.blogspot.com/-7IkUBD3wuB0/Twqcbg9ZbZI/AAAAAAAACSQ/NFTv36TcJho/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="http://2.bp.blogspot.com/-JLpoSgJD_BE/Twqcdf5jwYI/AAAAAAAACSg/MPBORcd7Sbs/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="http://2.bp.blogspot.com/-00WPNGJANes/Twqcc-h41wI/AAAAAAAACSc/BLBwbXHIP3o/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.

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

Please spend few moments to share this if you like

1 comment: