02:52
naveed
First If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it.
And now I’m Back here With 4 In 1 Social Share sliding pop out widget Using jQuery ,
and it's not only for facebook like box , but here you will also see your twitter widget sliding same like facebook like box , similarly for the google +1and Subscribe Popup form ,this look much useful and cute on it slide on your blog , live at a side of your blog when some one over his/her mouse over it , it pop up with a cute sliding effect , the Jquery effect ,
so ...let see how to get this.
- Go To Blogger>>>Design>>>Edit HTML
- Tick Expand Widget Template
- Search For The Tag </head> (Using ctrl + f )
- Copy n Paste Below Code Before </head>
<link rel="stylesheet" href="https://sites.google.com/site/topbloggerinworld/linktohow/multipopoutwidget.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>
Note :- CTRL + F To Find Above Red jQuery Plugin URL In Your Template If You Have Already This Plugin Than Remove It .
- Save Your Template
Now Adding HTML Code It's Simple
- Go to Blogger>>Design>>>Add a Gadget
- Choose HTML/Javascript
- Copy n paste below HTML code Into It,
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjMi5Mu68scm5B5Fwcm2jpknoQbkSSHXJYRmH0qa1OmIrm8Oq4XlVb2ypD86eXOpu0kRSpiRvIAUTvCQ0umWNvldBGY8pwP0e9HonZWIM05KQEFpgVU2bfvwrlVV5eifSXeJTHtsHbSwJ/s1600/%255Blinktohow.blogspot.com%255Dfacebook_right.png" alt="" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://facebook.com/prohackersden&locale=en_GB&width=246&connections=9&stream=&header=false&show_faces=0&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/AVvXsEgrambHk-EVjLv8X0o2_mskoGz5HsMkwcNrzanAs5KoYpVCM6l78rqL7e5v1-cYWH40GPwtl6OcbL3fmC8p_QNMZxgksCRV7bcNBDPLg6xonkCvLETcZ-FOOyTwGoi41WUSFgYXhkkpI9eh/s1600/%255Bwww.linktohow.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('prohackersden').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/AVvXsEh9qYyEnszdDtLeoJ6tdhUr5PHvJlzjci2AlTiIzTERHiiQxNLpQMyds_t7qNr9HHS17R7HR5R0cpDxsTx-aIxx27JS1UDcjo84GzKYmAdUBOsA6S2YDV3_4iOjlWRhkLXRMk1UFIG7UXMS/s1600/%255Bwww.linktohow.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=prohackersden', '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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="prohackersden" 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/AVvXsEggb24xC-LhT1AzmT85TqDJJkWTy0uelHR-7-W9SCymoXelmzRqHRmJqPYzbz842_tcc6RswvRYampiAuwIizCJTbgBPf5JY0cO90UKFJT8x9qu8A9fp1CAHGYImnvtjqLfW34d4u4zjzGO/s1600/%255Bwww.linktohow.blogspot.com%255Dfeedburner_right.png" />
</div>
</div>
</div></div>
Note:- Replace In Above Code
1. linktohow With Your Facebook User name
2. linktohow With Your Twitter User name
3. LinktoHow With Your Feed Title
- Save the widget and drag the widget anywhere on your right sidebar. Place it below all widgets on your right sidebar
- Finally Click the orange save button towards top right.
- And that’s all!
- I hope you like and enjoy it!
comment please
Posted in: 
0 comments:
Post a Comment