Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Saturday, May 12, 2012

Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website

This Article Was Live On: Saturday, May 12, 2012 And Till Now Have45 comments.
Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website


Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & WebsiteFacebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & WebsiteFacebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & WebsiteFacebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website

The Simple Question Is That We Are Going To Solve Is "How To Add Stylish And Awesome J-Query POP OUT Facebook, Twitter, Google Plus, Subscribe, Widget On Your Blog & Website To Spice Them Up And Can Get More Real Fans And Followers?" I try to give you Facebook, Twitter, Google Plus, Subscribe, J-Query PoP Out Widget with one code because i have seen many widget but they are just one either facebook or twitter.

I had developed this Static popout jquery effect widgets for you. In my latest Article (How to Add 5 jQuery Pop out Widget) you can find about Static 5 POP OUT Widget installation manually. Follow these steps to add this widget successfully to your blogger, and you can also use this on website. This is a second version of my previous post.In this version we make little changes to make this widget more beautiful.
Features:
1.) J-Query POP OUT On Mouse Hover.
2.) 3 Stylish Widget Of Social Network With RSS And E-Mail Subscription Box.
3.) Facebook Awesome Big Fans Widget.
4.) Twitter Stylish Tweet Box Widget.
5.) Google Plus "Add To Circle" Beautiful Widget.
6.) RSS Feed And E-Mail Subscription Box.
7.) Quick To Load And Easy To Install.
8.) Awesome, Simple, Stylish And Beautiful Designed Latest Widget.
9) You Can Also Add This On Website. (Feel Free To Ask How To Do This?)


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Edit HTMlL
4.) Now Press {CTRL+F} And Find </head> .
5.) Now Copy The Below Code And Paste It Before </head> .
6.) Click Save, Now Proceed To The Next Step.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></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: -203}, 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>



7.) Now Go To Layout.
8.) Click "Add A Gadget" Where You Want To Add It.
9.) Now Scroll To "HTML-JAVASCRIPT"
10.) Click "+" Icon To Add It.
11.) Now Copy The Below Code And Paste It To There.
12.) Leave The Title Empty.
13.) Click Save, Now You Are Done.


<style>
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
</style>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="http://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" alt="" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&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://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.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('EXEIdeas').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/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png" />
<div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0'; pid='102256859586166648016';</script><script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js"></script></div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<center><br />▼▼▼▼▼▼▼▼▼▼▼▼
<h4 style="color:#F66303;">You Can Also Receive Free E-Mail 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=EXEIdeas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your E-Mail Here...&#39;;}" onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="EXEIdeas" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png" />
</div>
</div>
</div>



Customization:
1.) Replace EXEIdeas2010 With Your Facebook FanPage UserName.
2.) Replace exeideas With Your Twitter UserName.
3.) Replace 102256859586166648016 With Your Google Plus FanPage Code.
4.) Replace EXEIdeas With Your FeedBurner UserName.
5.)Save And Enjoy...

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



45 comments :

  1. This Widget Is UpDated With YouTube Subscribe Widget.
    Check The New One Also...

    ReplyDelete
  2. Thanks Its Working for me
    www.Expertiseblog.net

    ReplyDelete
  3. Hi Hassan thanks for nice tutorial your ideas are always teachable and easy to install.As instructed I have placed the 5 social sharing widget on my blog but they are not hovering can you help in this regard.

    My blog:http://jeshurun777.blogspot.com


    Thanks & regards
    Sreedhar

    ReplyDelete
    Replies
    1. I Just Check Out Your Blog But I Can't Find The Code On Your Blog. Please First Follow These Steps And Then Ask Me If There Is A Prob.

      Delete
  4. Thanks its working! But now the problem is in the subscribe widget where the submit button and email box is not showing in the widget.Kindly do the needful!.

    ReplyDelete
    Replies
    1. In The Second Code Box, Just Find And Change The Following Lines...

      < br/>▼▼▼▼▼▼▼▼▼▼▼▼
      < h4 style="color:#F66303;">You Can Also Receive Free E-Mail Updates:< /h4>

      To...

      ▼▼▼▼▼▼▼▼▼▼▼▼
      < p style="color:#F66303;">You Can Also Receive Free E-Mail Updates:< /p>

      Save And Done...

      Delete
  5. Hi Hasan done as you said but now there is no"Receive free email updates" heading on the subscribe bar.Please check it and give me some suggestions.


    Thanks & Regards
    sreedhar

    ReplyDelete
    Replies
    1. I Check You Blog Code You Just Make A Simple Mistake...
      Where You Add This Code...

      ▼▼▼▼▼▼▼▼▼▼▼▼
      < p style="color:#F66303;">You Can Also Receive Free E-Mail Updates:< /p>

      Remove The Space Between <p And </p

      I Can Post Without Space Because Comment Form Did Not Accept HTML Tags...

      Delete
  6. Where are the instructions on how to do this with a website, and not a blog? Would be very helpful thanks.

    ReplyDelete
    Replies
    1. How To Add In Website:
      Copy The Code From First Box And Paste It Before < /head> Tag In Your HTML Page.
      Then Copy The Code From Second Box And Paste It Between < body> < /body> Tag In Yout HTML Page.

      Delete
  7. how would you remove only the "subscribe" popout and leave the other 3. thank you!

    ReplyDelete
    Replies
    1. Search The Code At The End Of Second Code...
      < div id="on">
      Remove Them To The End.
      Save And Done...

      Delete
  8. what if you don't have a facebook user name... my facebook user name is just page/name/123124u091u204 a bunch of numbers? I tried entering a combination into the field but this wouldn't work...

    also, where can you find your google page code?
    thank you.

    ReplyDelete
    Replies
    1. Give Me All Your Data Via Contact Form With E-Mail Then I Will Send You The Final Code.

      Delete
  9. I contacted you on Google plus with the info for the pages. Thank you!

    ReplyDelete
  10. Why my google plus can't connect in this pop up? my blog http://rizkyprawinto.blogspot.com

    ReplyDelete
    Replies
    1. Because This Widget Provider Site Is Now Down For Construction And Only Works For Old Users. If You Are New You Can Change It With Your Google Plus Official Widget. If Can't Please Send Me Your Profile Link...

      Delete
  11. After Installation All work Perfect but google plus is Showed 404 not Found, How can i Solve this? Thanks my blog Address is
    http://it-allin.blogspot.com

    ReplyDelete
    Replies
    1. Yeh, This Widget Is Limited. You Have To Replace This With Google Plus Official Widget.
      If Don't Know How, Feel Free To Contact Me.

      Delete
  12. I don`t know how to do it, Help with that my G-plus page is https://plus.google.com/u/0/101157269135788523822, My blog http://it-allin.blogspot.com

    ReplyDelete
    Replies
    1. Yeh, This Widget Is Limited. You Have To Replace This With Google Plus Official Widget.
      https://developers.google.com/+/plugins/badge/

      Or
      Use The Below Code
      < iframe src=”http://www.google.com/s2/u/0/widgets/ProfileCard?uid=[Your Google Profile ID]” width=”100%” height=”125″ scrolling=”no” style=”border:0px solid”>

      Instead Of
      < script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0'; pid='102256859586166648016';< script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js">

      In The Second Box Of Code.

      Delete
  13. hey will it effect on my page loading time ??
    because i have a gallary blog which already take 5 10 second 4 me to open it i have 512kbps connection

    ReplyDelete
    Replies
    1. Yeh, It Will Increase Your Loading Time 1-2 Sec More...

      Delete
  14. Bhai Google plus ki ID kaha se mele gi???

    ReplyDelete
    Replies
    1. Open Your Google Plus Profile...
      Go To Profile Button Listed At Second Number In The Left Side Bar.
      Here You Will See The URL Like Mine "https://plus.google.com/u/0/114679207272870704061/posts"
      Copy "114679207272870704061" This Only.
      Here Is Your Google Plus ID...

      Delete
    2. Bro Ya mein lagata Ho Lekin Kaam Nahi karta..!

      Delete
    3. Use The Below Code
      < iframe src=”http://www.google.com/s2/u/0/widgets/ProfileCard?uid=[Your Google Profile ID]” width=”100%” height=”125″ scrolling=”no” style=”border:0px solid”>

      Instead Of
      < script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0'; pid='102256859586166648016';< script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js">

      In The Second Box Of Code.
      Again, remember to replace [Your Google Profile ID] with your own profile ID.

      Delete
  15. Could you please help me with this?i have the same problem as many other users with google plus showing 404 error.I replaced it with the new code you provided above.And the new code appears on Google + widget.What could possibly be wrong?This is my blog http://samisrecetario.blogspot.in/ and my google+ id https://plus.google.com/u/0/109424415831502954355/posts.Thanks in advance.

    ReplyDelete
    Replies
    1. Check The Below URL...
      www.exeideas.com/2012/07/pure-css-slide-out-social-widgets.html

      Delete
  16. It works fine now.Thanks a lot.

    ReplyDelete
  17. I was going through the tutorials and was wondering if u had any for 'how to make your blog look the same in all the browsers'?any tutorial related to this?Did a search but couldn't find a suitable post.
    Thanks in advance

    ReplyDelete
    Replies
    1. This Is The Way Of Web-Designing. You Have To Learn It First.

      Delete
  18. my website. and thank you
    http://projuktirkhela.blogspot.com/

    ReplyDelete
  19. i am not able to select any script in your site with options select all and deselect all

    ReplyDelete
    Replies
    1. Use Firefox Or Chrome, The Next Generation Rules... :)

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.