LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing » Awesome CSS Slides-Out Social Widgets For Blog And Website.

Awesome CSS Slides-Out Social Widgets For Blog And Website.

Awesome CSS Slides-Out Social Widgets For Blog And Website.

Another Hack To J-Query..!!!
It’s Pure CSS But With J-Query Effect That Make It 99.99% Same As J-Query Widget That I Have Posted Earliers In Two Version…
1.) Facebook, Twitter, Google Plus, Subscribe J-Query PoP Out Widget For Your Blog & Website
2.) Facebook, Twitter, Google Plus, Subscribe, YouTube J-Query PoP Out Widget For Your Blog & Website
But This Is Pure CSS. Now The Simple Question Is That We Are Going To Solve Is “How To Add Stylish And Awesome CSS Slides-Out Social Widgets For Blog And Website To Spice Them Up And Can Get More Real Fans And Followers?”

Before Proceeding You Have To View The DEMO So That You Can Understand What I Am Try To Say. This Is Basically Based Of Transition Effect So It Will Not Work On IE, The Demo Is Of J-Query Widget That Will Work On All Browsers But This Widget Work 99.99% Same As J-Query Did. It Has A Lot Of Features So Before Proceeding You Have To See The List Of Features That Will Ensure You What You Are Going To Add In Your Site/Blog.

Awesome CSS Slides-Out Social Widgets For Blog And Website. Awesome CSS Slides-Out Social Widgets For Blog And Website. Awesome CSS Slides-Out Social Widgets For Blog And Website. Awesome CSS Slides-Out Social Widgets For Blog And Website. Awesome CSS Slides-Out Social Widgets For Blog And Website.

Features:

1.) Full CSS, Not A Single Line Of J-Query/JavaScript Code.

2.) Slide Out With Smooth Effect On Mouse Hover.
3.) 5 Stylish Widget Of Social Network With RSS And E-Mail Subscription Box.
4.) Facebook Awesome Big Fans Widget.
5.) Twitter Stylish Big Followers Widget Like Facebook.
6.) Google Plus “Add To Circle” Beautiful Widget.
7.) YouTube Subscribers Awesome Widget.
8.) RSS Feed And E-Mail Subscription Box.
9.) Quick To Load And Easy To Install.
10.) Awesome, Simple, Stylish And Beautiful Designed Latest Widget.
11.) It Will Not Work On IE.(Work On Chrome, FireFox, Safari, Opera)
12.) For Blogspot And Website Also.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

Recommended For You:
Open/Show And Close/Hide DIVs On-Click By CSS Code Only

<!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<!--[if IE]>
<style type="text/css">
#fornetscape {display:none;}
</style>
<![endif]-->
<style type="text/css">
/***********************************************
* EXE-SlideOut Social Widget- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit https://www.exeideas.com/ for full source code.
***********************************************/
div.facebook-main {width: 270px;top:8%;right:-234px;position:fixed;}
div.facebook-main div.facebook-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.facebook-main div.facebook-transition iframe {border:0px;overflow:hidden;position:static;height:260px;}
div.facebook-main:hover div.facebook-transition {margin-left: -234px;}
div.twitter-main {width: 270px;top:25%;right:-234px;position:fixed;}
div.twitter-main div.twitter-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.twitter-main:hover div.twitter-transition {margin-left: -270px;}
div.googleplus-main {width: 270px;top:42%;right:-234px;position:fixed;}
div.googleplus-main div.googleplus-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.googleplus-main:hover div.googleplus-transition {margin-left: -331px;}
div.youtube-main {width: 270px;top:59%;right:-234px;position:fixed;}
div.youtube-main div.youtube-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.youtube-main:hover div.youtube-transition {margin-left: -306px;}
div.subscribe-main {width: 270px;top:76%;right:-234px;position:fixed;}
div.subscribe-main div.subscribe-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.subscribe-main:hover div.subscribe-transition {margin-left: -226px;}
</style>
<div id="fornetscape">
<div class="facebook-main"><div class="facebook-transition"><table><tr><th valign="top" ><img src="https://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #3c95d9;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&amp;locale=en_GB&amp;width=245&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260" scrolling="no"></iframe></th></tr></table></div></div>
<div class="twitter-main"><div class="twitter-transition"><table><tr><th valign="top"><img src="https://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #6CC5FF;"><script type="text/javascript" src="https://script-ot.googlecode.com/svn/twitterbox.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("exeideas");</script></th></tr></table></div></div>
<div class="googleplus-main"><div class="googleplus-transition"><table><tr><th valign="top"><img src="https://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #006ec9;width:325px;"><iframe src="https://www.google.com/s2/u/0/widgets/ProfileCard?uid=102256859586166648016" width="100%" height="125px" scrolling="no" style="border:0px;"></iframe></th></tr></table></div></div>
<div class="youtube-main"><div class="youtube-transition"><table><tr><th valign="top"><img src="https://1.bp.blogspot.com/-NCdhprqaK10/T0BfYEMH7VI/AAAAAAAABQ8/hn0n3XoKq2Q/s1600/YouTube.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #ff0000;"><iframe src=http://www.youtube.com/subscribe_widget?p=exeideas style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe></th></tr></table></div></div>
<div class="subscribe-main"><div class="subscribe-transition"><table><tr><th valign="top"><img src="https://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png" height="101" width="32" style="margin-right:-3px; margin-top:-1px;" /></th><th style="background-color:#fff; border: 2px solid #5b5b5b;"><center><p style="color:#F66303;">You Can Also Receive Free <br />E-Mail Updates:</p> <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="Trickstreasure" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center></th></tr></table></div></div>
</div>
<!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<!--[if IE]>
<style type="text/css">
#fornetscape {display:none;}
</style>
<![endif]-->
<style type="text/css">
/***********************************************
* EXE-SlideOut Social Widgets- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit https://www.exeideas.com/ for full source code.
***********************************************/
div.facebook-main {width: 270px;top:8%;right:-234px;position:fixed;}
div.facebook-main div.facebook-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.facebook-main div.facebook-transition iframe {border:0px;overflow:hidden;position:static;height:260px;}
div.facebook-main:hover div.facebook-transition {margin-left: -234px;}
div.twitter-main {width: 270px;top:25%;right:-234px;position:fixed;}
div.twitter-main div.twitter-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.twitter-main:hover div.twitter-transition {margin-left: -270px;}
div.googleplus-main {width: 270px;top:42%;right:-234px;position:fixed;}
div.googleplus-main div.googleplus-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.googleplus-main:hover div.googleplus-transition {margin-left: -331px;}
div.youtube-main {width: 270px;top:59%;right:-234px;position:fixed;}
div.youtube-main div.youtube-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.youtube-main:hover div.youtube-transition {margin-left: -306px;}
div.subscribe-main {width: 270px;top:76%;right:-234px;position:fixed;}
div.subscribe-main div.subscribe-transition {-webkit-transition: margin-left 0.5s linear;-moz-transition: margin-left 0.5s linear;-o-transition: margin-left 0.5s linear;-ms-transition: margin-left 0.5s linear;transition: margin-left 0.5s linear;}
div.subscribe-main:hover div.subscribe-transition {margin-left: -306px;}
</style>
<div id="fornetscape">
<div class="facebook-main"><div class="facebook-transition"><table><tr><th valign="top" ><div style="margin-right:-3px; margin-top:-1px; width:32px; height:101px; background-position:0px 0px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #3c95d9;"><iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&amp;locale=en_GB&amp;width=245&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260" scrolling="no"></iframe></th></th></tr></table></div></div>
<div class="twitter-main"><div class="twitter-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:101px; background-position:0px -101px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #6CC5FF;"><script type="text/javascript" src="https://script-ot.googlecode.com/svn/twitterbox.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("exeideas");</script></th></th></tr></table></div></div>
<div class="googleplus-main"><div class="googleplus-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:101px; background-position:0px -202px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #006ec9;width:325px;"><iframe src="https://www.google.com/s2/u/0/widgets/ProfileCard?uid=102256859586166648016" width="100%" height="125px" scrolling="no" style="border:0px;"></iframe></th></tr></table></div></div>
<div class="youtube-main"><div class="youtube-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:103px; background-position:0px -303px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #ff0000;"><iframe src=http://www.youtube.com/subscribe_widget?p=EXEIdeas style="height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe></th></tr></table></div></div>
<div class="subscribe-main"><div class="subscribe-transition"><table><tr><th valign="top"><div style="margin-right:-3px; margin-top:-1px; width:32px; height:102px; background-position:0px -405px; background-image:url('https://lh4.googleusercontent.com/-4J1bPhh42w0/UBYg3rN3I1I/AAAAAAAACsA/RFyKlBYhF-U/s700/EXEIdeas-Slide-Out-Widget.png')"> </div></th><th style="background-color:#fff; border: 2px solid #5b5b5b;"><center><p style="color:#F66303;">You Can Also Receive Free E-Mail Updates:</p> <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="Trickstreasure" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center></th></tr></table></div></div>
</div>
<!-- This Is A CopyRight Code Of EXEIdeas International®.It Is Free To Use But With HTML Design Code.
If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Customization:

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

Recommended For You:
Best 3 Stylish CSS Page Navigation Widget For Blogger

You Like It, Please Share This Recipe With Your Friends Using...

22 Responses to “Awesome CSS Slides-Out Social Widgets For Blog And Website.”

  1. Doesn’t work on my blog. Just tried it now and images are not showing. But this is an awesome post. Please fix the problem. thank you. im using Google chrome BTW.

    • EXEIdeas says:

      Sorry For The Bug But Now It Is Fixed, Here Are The Two Codes, Use One Of Them And Let Me Know If There Is Still An Error…

  2. Admin says:

    nice post bro
    it awesome in website but twisted in blog
    you the best….

  3. radi says:

    yess..
    you can do it..
    thank a lot hassan

  4. Anonymous says:

    Hey bro twitter tab is not working in your demo and also in my site !!
    HELP AS SOON AS POSSIBLE

  5. Anonymous says:

    Yes my mistake
    You Rocks !!!

  6. Anonymous says:

    Cant seem to get it to work in IE. It works great in FireFox, Chrome and Safari but does not show up in IE

  7. Yoedha Com says:

    yes..
    100% work..
    thanks..

  8. admin says:

    doesn’t work with IE ?!

  9. Anonymous says:

    I am using your tabs everything is going on fab.
    But there is a problem these tabs are getting hide by the flash of pictures on my side
    means the hover effect is working but the tabs are getting hidden below the image

  10. Anonymous says:

    ok actually mine website is not live by now.. i am actually using a html made flash of images and the buttons are getting hidden below them on that page .
    I am going to make the site live on 10 march and i am now using your’s ribbon buttons of fb and others.Dat are also amazing..
    i will post the url with these slide out’s on 9th march evening for you to see it.ok.
    and here’s one compliment for you ->
    i am really amazed from your work i visit your site dialy atleast times .
    really hats off for your work.
    you rock bro .. 🙂 🙂

    • EXEIdeas says:

      Really Thanks For Appreation As You Are Pur Regular Visitor, Feel Free To Ask Any Problem. Welcome Here Again, Waiting For Your Site And Thanks For Using Our Others Widget…

  11. sunny cute says:

    Dear twitter Box is empty .how to fix it? plz

    • EXEIdeas says:

      Since Twitter Upgrade Its API So Old Twitter FanBox Isn’t Working. Check Out The Below Article And Get The Latest Working Twitter Fanbox And Replace With This Twitter FanBox Code.

      New Twitter Followers/FanBox Widget With Faces For Blog And Website

Leave a Reply to Yoedha Com Cancel reply

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