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: 
Ever wondered to know how to hide secret messages in images, audioand video files? Well, in this post I will take you through a concept called steganography using which, it is possible to hide your secret information in image files, songs or any other file of your choice. At the end of this post, you can also download free stegnographic tools and start hiding your data.
