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


And paste the following code just before < / head >

<link rel="stylesheet" href=""/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
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); }); });

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="" alt="" />

<iframe src=";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 id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="">
<script src=""></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' }
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="">
<div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
<form action="" method="post" target="popupwindow" onsubmit="' 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="">

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: