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

Wednesday, January 9, 2013

CSSed EXE-SlideUp Social Widget With Show-Hide Button

This Article Was Live On: Wednesday, January 9, 2013 And Till Now Have20 comments.
CSSed EXE-SlideUp Social Widget With Show-Hide Button

After the previous widget of Stylished Footer Bar, i am here to share a new awesome and stylish social widget that is just as before but now it is eating less space of yoy webpage or even will not take your post space if you are using left right sidebar in blogger.

This widget is simply awesome and stylish with all the latest trented social buttons and links to get your social profile heavly loaded from your fans, it contains Show/Hide features that is working without <script> Or $ tag means no JavaScript Or Jquery and it leads to a quick load time and a faster responcive site, It contain DOM effect with HTML and CSS only.

It is fully customizable so that you can customize the text with your desaired data and the text will apper in Close/Open button too from that you can attrat your visitors too. There is facebook, twitter, googleplus, and rss links with awesome hovered 3D images that you will understand after viewing the demo, There is also a FeedBurner EMail subscribe with awesome and stylish added gadget, There is not a lot of images and the rest of images is highly optimized with alt and title tag so that this widget is also optimized.

It will remain fixed throughout the scrolling of page and work better, the simple background shade is also CSSed, finally you will never understand what i am trying to say so without any more time delay, you should visit the DEMO so you will bw able to understand what i am trying to say.


1.) Like Us On Facebook Text With Icon.
2.) Follow Us On TwitterText With Icon.
3.) Add Me In Circle With Icon.
4.) Subscribe Our RSS With Icon.
5.) E-Mail Subscribtion Form Powred By FeedBurner.
6.) Show/Hide Or Open/Close Button Without JavaScript Or JQuery.
7.) Pure HTML-CSS Code.
8.) No JavaScript Or JQuery Code.
9.) Quick To Load And Easy To Install.
10.) Awesome And Stylish In Look.
11.) Cross Browser CSS Gradient Background.
12.) 3D Icon And More Awesome On Hover Or Mouse Over.
13.) Add Custom Text With Your Desiter.
14.) Only 4-Images+Hovers And Rest Of Code.
15.) Increase Your Social Network Increadibly.
16.) Optimized Images With Alt And Title Tag.
17.) For Right SideBar Websites And Blogs.
18.) 300x250 Pixel Wide Widget.
19.) DOM Effect Enabled.
20.) HTML4 And CSS2 For Able To Support Old Browsers.

How To Add In Blogspot?

1.) Go To Your
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.

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.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. -->
<style type="text/css">
* EXE-SlideUp Social Widget- © EXEIdeas (
* This notice must stay intact for use.
* Visit for full source code.
#exefixedfootermain{width:300px;height:300px;position:fixed;bottom:0%;right:5px}#exefixedfooterdiv{border-top:3px solid #444;border-right:3px solid #444;border-left:3px solid #444;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;background-image:url(images/exe-footer-background.png);background-color:#d7d7d7;overflow:none;width:300px;height:250px;position:fixed;bottom:0%;right:5px;background:#fff;background:-moz-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#e5e5e5));background:-webkit-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-o-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:-ms-linear-gradient(top, #fff 0%,#e5e5e5 100%);background:linear-gradient(to bottom, #fff 0%,#e5e5e5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e5e5e5',GradientType=0 )} #exefixedfooterhide{ position:absolute; bottom:250px; right:5px; width:285px;height:25px;cursor:pointer;background-image:url(images/exe-footer-background.png);background-color:#fff;padding-top:5px;border-top:3px solid #444;border-left:3px solid #444;border-right:3px solid #444;border-top-right-radius:5px;border-top-left-radius:5px}#exefixedfootershow{ position:absolute; bottom:0px; right:5px; width:285px;height:25px;cursor:pointer;background-image:url(images/exe-footer-background.png);background-color:#e5e5e5;padding-top:5px;border-top:3px solid #444;border-left:3px solid #444;border-right:3px solid #444;border-top-right-radius:5px;border-top-left-radius:5px}.exefixedfooterdownarrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333}.exefixedfooteruparrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #333}.exefixedfooterblockarrow{width:8px;height:10px;background-color:#333}#exefixedfootersocial{ position:absolute; bottom:220px; right:10px; width:280px;height:30px;float:right}#exefixedfootersocialicon{ position:absolute; bottom:135px; left:10px; width:auto;height:64px}#exefixedfooteremailsubscribe{ position:absolute; bottom:0px; width:242px;height:90px;right:30px}.exefixedfooteremailsubscribebox{padding:7px 10px 7px 10px;font-family:"Arial","Helvetica",sans-serif;width:218px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.exefixedfooteremailsubscribebox input.subscribe{ -moz-box-shadow:inset 0px 1px 0px 0px #fff;-webkit-box-shadow:inset 0px 1px 0px 0px #fff;box-shadow:inset 0px 1px 0px 0px #fff;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );background:-moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#c9c9c9');background-color:#f0f0f0;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777;font-family:arial;font-size:13px;font-weight:bold;padding:6px 18px;text-decoration:none;text-shadow:1px 1px 0px #fff}.exefixedfooteremailsubscribebox input.subscribe:hover{background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );background:-moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9',endColorstr='#f0f0f0');background-color:#c9c9c9}</style><!--[if IE]><style>.exefixedfooteremailsubscribebox input.subscribe{width:243px}</style><![endif]--><!--[if gte IE 9]><style type="text/css">.gradient{filter:none}</style><![endif]--><div id="exefixedfootermain"><center id="exefixedfootershow"onmouseup="document.getElementById('exefixedfooterdiv').style.display='block'"><table style="margin-top:-2px;"><tr><td><center style="color:#333;font-size:15px;font-weight:bold;">Be Socialized And Subscribed</center></td><td><center><div class="exefixedfooteruparrow"></div><div class="exefixedfooterblockarrow"></div></center></td></tr></table></center><div id="exefixedfooterdiv"><center id="exefixedfooterhide"onmouseup="document.getElementById('exefixedfooterdiv').style.display='none'"><table style="margin-top:-2px;"><tr><td><center style="color:#333;font-size:15px;font-weight:bold;">Be Socialized And Subscribed</center></td><td><center><div class="exefixedfooterblockarrow"></div><div class="exefixedfooterdownarrow"></div></center></td></tr></table></center><div id="exefixedfootersocial"><center style="color:#333;font-size:12px;">Recive All Latest And Hottest Articles,Tips And Tricks,Awesome Widgets Directly Into Your Inbox And Stay UpDate With Us...!!!</center></div><div id="exefixedfootersocialicon"><table><tr><td><a href=""><img height="48px"width="48px"title="Like Us On Facebook"alt="Facebook"src=""onmouseover="this.src=''"onmouseout="this.src=''"/></a><br /><a href=""><img height="48px"width="48px"title="Follow Me On Twitter"alt="Twitter"src=""onmouseover="this.src=''"onmouseout="this.src=''"/></a></td><td width="75px"valign="top"><a style="font-size:12px;color:#333;font-weight:bold;"href="">Like Us On FaceBook</a><br /><br /><a style="font-size:12px;color:#333;font-weight:bold;"href="">Follow Us On Twitter</a></td><td><a href=""><img height="48px"width="48px"title="Add Us To Your Circle"alt="Google Plus"src=""onmouseover="this.src=''"onmouseout="this.src=''"/></a><br /><a href=""><img height="48px"width="48px"title="Subscribe Our RSS"alt="RSS"src=""onmouseover="this.src=''"onmouseout="this.src=''"/></a></td><td valign="top"><a style="font-size:12px;color:#333;font-weight:bold;"href="">Add Me <br />In Circle</a><br /><br /><a style="font-size:12px;color:#333;font-weight:bold;"href="">Subscribe <br />Our RSS</a></td></tr></table></div><div id="exefixedfooteremailsubscribe"><div class="exefixedfooteremailsubscribebox"><form action=""method="post"target="popupwindow"onsubmit="'','popupwindow','scrollbars=yes,width=550,height=520');return true"><input class="email"type="text"id="email"name="email"value="Enter Your Email Here.."onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/><input type="hidden"value="EXEIdeas"name="uri"/><input type="hidden"name="loc"value="en_US"/><br /><input class="subscribe"name="commit"type="submit"value="Subscribe Our News Letter Now"/></form></div><center style="color:#333;font-size:8px;">E-Mail Will Be Delivered By FeedBurner.</center></div></div></div>
<!-- This Is A CopyRight Code.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. -->


1.) Change "EXEIdeas2010" With Your Facebook Name.
2.) Change "EXEIdeas" WithYour Twitter UserName.
3.) Change "102256859586166648016" With Your Google Plus ID Code.
4.) Change "EXEIdeas" With Your FeedBurner UserName.
5.) Change Black Bold Text With Your Desire One.
6.) Save And Done.

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

Don't Forget To Read This Also...


  1. Really awesome widget, great for increasing social presence, Thanks a lot for sharing.

  2. this is completly corrupt dear pls edit yaar

    1. Dude, It's Working Fine, Please Follow All The Instruction To Run It.

  3. this one so good thanks , i want you 2 see my bloge if they are any thing need 2 fix plz

  4. Please give the way to put g+ pop up box like facebook.......

    1. Be With Us, We Will Fulfill Your Desire Also...

  5. hey buddy i have added this in my wordpress blog. Its working fine in chrome but it is not visible in firefix, safari and IE. means its working only in chrome not in any other browser.

    here is my site:

    1. It's Working Fine In Chrome, FireFox, Opera And Safari. If You Have Any Error, Just Contact Us With Screen Shoot...

    2. sorry muhammad i just checked it and it is working fine... thnx for such great share...

  6. can i get a highlight author comment widget and in this widget when i insert in my page i get some errors....they are the box seems transparent and when open my webpage the box seems open i want it to be closed i mean when i click at that time it should open....please help me fast

    1. Can I See The Live DEMO Of Your Problem...???

    2. here you can get:

    3. Everything Is Working Fine, Do You Want To Change The Blogger Comment Box Template As Mine?

    4. ya i need...and one more whenever i open my website everytime i see it is open i want it to be down and when i click it should open...

    5. We Will Post The Code Of This Soon.
      Please Send Us An E-Mail For The Desire Changes In This Code.


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.