LATEST >>

We Started A Facebook AutoLiker & AutoCommenter. Check Out Our EXELiker & EXECommenter...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing » 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 & Website

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 Recipe With Your Friends Using...

45 Responses to “Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website”

  1. EXEIdeas says:

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

  2. 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

  3. 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!.

    • EXEIdeas says:

      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…

  4. 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

    • EXEIdeas says:

      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…

  5. Anonymous says:

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

    • EXEIdeas says:

      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.

  6. Jameson Ryan says:

    how would you remove only the “subscribe” popout and leave the other 3. thank you!

  7. Anonymous says:

    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.

  8. Jameson Ryan says:

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

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

    • EXEIdeas says:

      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…

  10. 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

  11. Watch Movie online says:

    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

  12. Aftab Boss says:

    Bhai Google plus ki ID kaha se mele gi???

    • EXEIdeas says:

      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…

    • Aftab Boss says:

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

    • EXEIdeas says:

      Is It Showing An Error…???

    • EXEIdeas says:

      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.

  13. Anonymous says:

    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.

  14. Anonymous says:

    It works fine now.Thanks a lot.

  15. Anonymous says:

    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

  16. Anonymous says:

    ok..thanks..

  17. Anonymous says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>