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

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot POP UPs / Blogspot Social Sharing / Website / Website POP UPs / Website Social Sharing » Awesome Windows 8 Style Social POP-Up Widgets For Blog/Site

Awesome Windows 8 Style Social POP-Up Widgets For Blog/Site

Awesome Windows 8 Style Social POP-Up Widgets For Blog/Site

Are You Using Win-8 On Your PC? Did You Like It’s Desktop? So Why You Don’t Have Same Desktop For Your Blog? Now Add Awesome Windows 8 Style Social POP-Up Widgets For Blog/Site In Easy Way.
How can you tell that a blog or a website is successful? Obviously, some would say that it depends on the traffic, increase subscription rates, and develop loyal readership. We also follow that but design and ofcource Responsive Design is a key to be pro with web.Recently the release of windows 8 that have an awesome design metro style desktop that look so cute ever then before any version of windos even Win7 Dock menu.

What Is Metro Style?

Metro is an internal code name of a typography-based design language created by Microsoft, originally for use in Windows Phone 7. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics (“content before chrome”). Early uses of the Metro principles began as early as Microsoft Encarta 95 and MSN 2.0, and later evolved into Windows Media Center and Zune. Later the principles of Metro were included in Windows Phone, Microsoft’s website, the Xbox 360 dashboard update, and Windows 8.(Source:Wiki)

What Are POP-Ups?

PoP-Ups are the divs that will be like a wall between the eyes of your reader and your content, It insist the visitor to see him first before any other thing on the site. Creating pop-ups for your website is not an easy task. You need to have knowledge of programming to be able to generate the codes that define your intended pop-up. Fortunately, there are lots of easily configurable pop-up codes available all over the internet with jQuery and JavaScript. But there are also CSS Based PopUp that even not contain Script tag Or JQuery file as we have shown you in our previous post.

What We Have?

We just release our CSS based Social POPUP that contain all four most important big social network in Metro Style without any JavaScript code. In our POP-Up, we have Facebook Page Like buttom with count in framed content, Twitter Follow button with count in Script tag as they offically have, Google plus add to circle official button and rss email subscribtion form, These four are all about it and On-Haver effect is also enabled. It will increase your social existant and fans, It’s also light weight, So without any more preface, just get the code by going throught features list and the live DEMO.


1.) Awesome And Stylish POP-UP.
2.) Full CSS-Based, Without Script Tag Or jQuery File.
3.) Windows 8 Style Metro Type POP-Up.
4.) Facebook Like Button Included.
5.) Twitter Follow Button Included.
6.) Google Plus Add To Circle Button Included.
7.) FeedBurner E-Mail Subscribtion Included.
8.) Close Button Enabled.
9.) Quick To Load And Easy To Install.
10.) Hover Effect Also Enabled.
11.) Css3 Code Added.
12.) Works On All Working 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">
* Windows 8 Style POP-Up Social Widget - © EXEIdeas (
* This notice must stay intact for use.
* Visit for full source code.
* html #exestylepopupdiv{position:absolute} #exestylepopupdiv{z-index: 9999999;display:block;top:0px;left:0px;width:100%; height:100%; position:fixed; background-image:url('');margin:0;overflow-y:auto}#exestylepopup{overflow:none}.exestylepopup{width:700px;height:400px;position:fixed;top:50%;left:50%;margin-top:-200px;margin-left:-350px}#boxes{margin:0 auto;width:700px;height:400px}#exe-facebook{position:relative;float:left;width:445px;height:195px;color:#fff;font:15px Arial;text-align:center;background-color:#2C84EE;text-decoration:none;line-height:175px}#exe-facebook-hide{display:none;background-color:#2C84EE;color:#fff;position:absolute;top:0px;left:0px;width:445px;height:195px;box-shadow:0px 0px 6px 3px #2C84EE;-webkit-box-shadow:0px 0px 6px 3px #2C84EE;-moz-box-shadow:0px 0px 6px 3px #2C84EE;-o-box-shadow:0px 0px 6px 3px #2C84EE;-ms-box-shadow:0px 0px 6px 3px #2C84EE}#exe-twitter{position:relative;float:left;width:245px;height:195px;margin-left:10px;color:#fff;font:15px Arial;text-align:center;background-color:#00BBE2;text-decoration:none;line-height:175px}#exe-twitter-hide{display:none;background-color:#00BBE2;color:#fff;position:absolute;top:0px;left:0px;width:245px;height:195px;box-shadow:0px 0px 6px 3px #00BBE2;-webkit-box-shadow:0px 0px 6px 3px #00BBE2;-moz-box-shadow:0px 0px 6px 3px #00BBE2;-o-box-shadow:0px 0px 6px 3px #00BBE2;-ms-box-shadow:0px 0px 6px 3px #00BBE2}#exe-google{position:relative;float:left;width:245px;height:195px;margin-top:10px;color:#fff;font:15px Arial;text-align:center;background-color:#E51400;text-decoration:none;line-height:175px}#exe-google-hide{display:none;background-color:#E51400;color:#fff;position:absolute;top:0px;left:0px;width:245px;height:195px;box-shadow:0px 0px 6px 3px #E51400;-webkit-box-shadow:0px 0px 6px 3px #E51400;-moz-box-shadow:0px 0px 6px 3px #E51400;-o-box-shadow:0px 0px 6px 3px #E51400;-ms-box-shadow:0px 0px 6px 3px #E51400}#exe-rss{position:relative;float:left;width:445px;height:195px;margin-left:10px;margin-top:10px;color:#fff;font:15px Arial;text-align:center;background-color:#fd9f13;text-decoration:none;line-height:175px}#exe-rss-hide{display:none;background-color:#fd9f13;color:#fff;position:absolute;top:0px;left:0px;width:445px;height:195px;line-height:0px;box-shadow:0px 0px 6px 3px #fd9f13;-webkit-box-shadow:0px 0px 6px 3px #fd9f13;-moz-box-shadow:0px 0px 6px 3px #fd9f13;-o-box-shadow:0px 0px 6px 3px #fd9f13;-ms-box-shadow:0px 0px 6px 3px #fd9f13}.gradient{background:-moz-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(0,0,0,0.25)),color-stop(100%,rgba(0,0,0,0)));background:-webkit-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(135deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000',endColorstr='#00000',GradientType=1 )}.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;width:400px}.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 gte IE 9]><style type="text/css">.gradient{filter:none}</style><![endif]--><!--[if lte IE 6]><style type="text/css"> html{overflow-x:auto;overflow-y:hidden}</style><![endif]--><div id="exestylepopupdiv"><div id="exestylepopup"class="exestylepopup"><!-- Windows 8 Style POP-Up Social Widget By EXEIdeas DIV Start --><div id='boxes'><!-- Windows 8 Style POP-Up Social Widget By EXEIdeas Boxes Start --><div id="exe-facebook"class="gradient"onmouseover="document.getElementById('exe-facebook-hide').style.display='block'"onmouseout="document.getElementById('exe-facebook-hide').style.display='none'"><img align="middle"src=""width="64px"height="64px"alt="Facebook"/>Facebook<div id="exe-facebook-hide"><!-- Facebook Like --><div style="margin-top:80px;"><iframe src="//;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90"scrolling="no"frameborder="0"style="border:none;overflow:hidden;width:100px;height:90px;"allowtransparency="true"></iframe></div><!-- Facebook Like --></div></div><div id="exe-twitter"class="gradient"onmouseover="document.getElementById('exe-twitter-hide').style.display='block'"onmouseout="document.getElementById('exe-twitter-hide').style.display='none'"><img align="middle"src=""width="64px"height="64px"alt="Twitter"/>Twitter<div id="exe-twitter-hide"><div style="margin-left:50px;margin-top:10px;"><a href=""class="twitter-follow-button"data-show-count="true"data-size="medium">Follow</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs)}}(document,"script","twitter-wjs");</script></div></div></div><div id="exe-google"class="gradient"onmouseover="document.getElementById('exe-google-hide').style.display='block'"onmouseout="document.getElementById('exe-google-hide').style.display='none'"><img align="middle"src=""width="64px"height="64px"alt="GooglePlus"/>Google Plus<div id="exe-google-hide"><div style="margin-top:20px;"><a target="_blank" href="//"rel="publisher"style="text-decoration:none;display:inline-block;color:#333;text-align:center;font:13px/16px arial,sans-serif;white-space:nowrap;"><span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">Add on</span><img src="//"alt="Google+"style="border:0;width:32px;height:32px;"/></a></div></div></div><div id="exe-rss"class="gradient"onmouseover="document.getElementById('exe-rss-hide').style.display='block'"onmouseout="document.getElementById('exe-rss-hide').style.display='none'"><img align="middle"src=""width="64px"height="64px"alt="RSS"/>RSS<div id="exe-rss-hide"><div style="margin-top:50px;"><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 Us To Get Our News-Letter Directly Into Your E-Mail"/></form><center style="color:#333;margin-top:10px;font-size:10px;">E-Mail Will Be Delivered By FeedBurner.</center></div></div></div></div><!-- Windows 8 Style POP-Up Social Widget By EXEIdeas Boxes End --></div><br /><center class="gradient" style="padding:10px;background-color:#66CD00;color:#fff;cursor:pointer;text-align:center" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Thanks For Providing Me Your Social Networks Link, Let's Take Me In...</center><!-- Windows 8 Style POP-Up Social Widget By EXEIdeas DIV End --></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 Page Name.
2.) Change EXEIdeas With Your Twitter USerName.
3.) Change 102256859586166648016 With Your Google Plus ID.
4.) Change EXEIdeas With Your RSS FeedBurner User Name.
5.) Save And Done…

Some Tips

There are many other customization can be added in this widget like you can fix it for only post page or home page to appear using blogger condition tag or can add a delay timer in it from this it will be popup after some time visitor spent on your page. For any type of extra customization, fell free top contact us and don’t forget to leave your comment.

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

33 Responses to “Awesome Windows 8 Style Social POP-Up Widgets For Blog/Site”

  1. GhOsT^ says:

    Nice Dear Keeep Its 🙂

  2. Anonymous says:

    hi bro.. i just want to give u a suggestion
    make a html/javascript code for Like/Follow on G+/Tweet/Subscribe by feedburner OR wait ~seconds to see the post.

    this will capture more follower. by the way awesome work.. keep it up.

    • EXEIdeas says:

      Thanks For Giving Us A Suggestion. We Will Try Too But There Is A Problem That Every Visitor Didn’t Have The Facebook Account Or Login At That Time So This Can Cause A Huge Drop In Pageviews Too…

  3. Sebin Thomas says:

    Needless to say awesome widget bro..I have two suggestions.. Can you please make it open Google plus follow in a new tab and customise “Thanks For Providing Me Your Social Networks Link, Let’s take me in”. It is more beautiful if it was in a metro rectangle like this image- !!

  4. Anonymous says:

    I need Facebook, YouTube and twitter only…..I don’t want the others…please help?

  5. Anonymous says:

    thanks can i use only facebook and twitter then? cn i delete the others?

  6. Hassan Bro, Can you tell how to add the Code Box like yours, i mean the box in which you pasted the code with Select and Deselect Button. Please Tell.

  7. Vali says:

    First, I want to thank you for the wonderful work that you share. I’d like to ask if it is possible that this great pop up disappear after I click outside (also with the timer) and rectangle where it says to press so I could go on, can write anything alse. Thank you and I whait your response

    • EXEIdeas says:

      No. Currently You Can’t Disappear By Clicking Outside The POPUP However You Can Add Time To Hide This Automatically And Can Change The Text To Close The POPUP Easily…

  8. I love this PopUp widget… I have been looking for his widget for long, Thank you once again. BUT is there a way to customize the widget to popup once a day???

  9. steve carl says:

    thank you this is cool, but widget pop out on every reload or visiting any pages feel free to visit my blog:

  10. This is the best Popup widget on the internet…. and as a matter of fact, I love it so mush….. BUT the sad part is, I don’t like the way it popup on every reload…. I will prefer once in a day or once in 3days

    Can you help us with that pls…. I will be looking forward to see your reply thank you sir

Leave a Reply

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