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='https://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="https://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" alt="" /><iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&locale=en_GB&width=200&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://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.png" /><script src="https://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="https://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="https://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 == '') {this.value = 'Enter Your E-Mail Here...';}" onfocus="if (this.value == 'Enter Your E-Mail Here...') {this.value = '';}" type="text" /><input value="EXEIdeas" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://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…
This Widget Is UpDated With YouTube Subscribe Widget.
Check The New One Also…
Thanks Its Working for me
http://www.Expertiseblog.net
You Are Welcome…
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
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.
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!.
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…
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
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…
Where are the instructions on how to do this with a website, and not a blog? Would be very helpful thanks.
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.
how would you remove only the “subscribe” popout and leave the other 3. thank you!
Search The Code At The End Of Second Code…
< div id=”on”>
Remove Them To The End.
Save And Done…
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.
Give Me All Your Data Via Contact Form With E-Mail Then I Will Send You The Final Code.
I contacted you on Google plus with the info for the pages. Thank you!
You Are Welcome…
Why my google plus can’t connect in this pop up? my blog http://rizkyprawinto.blogspot.com
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…
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
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.
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
Worked Perfect. Thanks
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=%5BYour 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.
You Are Welcome…
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
Yeh, It Will Increase Your Loading Time 1-2 Sec More…
Bhai Google plus ki ID kaha se mele gi???
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…
Bro Ya mein lagata Ho Lekin Kaam Nahi karta..!
Is It Showing An Error…???
Hai…!
Use The Below Code
< iframe src=”http://www.google.com/s2/u/0/widgets/ProfileCard?uid=%5BYour 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.
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.
Check The Below URL…
https://www.exeideas.com/2012/07/pure-css-slide-out-social-widgets.html
It works fine now.Thanks a lot.
You Are Welcome…
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
This Is The Way Of Web-Designing. You Have To Learn It First.
ok..thanks..
You Are Welcome…
my website. and thank you
http://projuktirkhela.blogspot.com/
You Are Welcome…
i am not able to select any script in your site with options select all and deselect all
Use Firefox Or Chrome, The Next Generation Rules… 🙂