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.
Table of Contents
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.
Features:
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 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.
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 (www.exeideas.com)
* This notice must stay intact for use.
* Visit https://www.exeideas.com/ 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('https://lh3.googleusercontent.com/-rUv4L_9nz-8/T9sfSSJaZNI/AAAAAAAACf0/ETEgFKt-rR4/s128/exeideasopacity0.5.png');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 input.email{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="https://lh6.googleusercontent.com/-AFD06JykayU/UScEWRwFHQI/AAAAAAAAFFE/ZFRVy0slr6w/s64/facebook-white-64-64.png"width="64px"height="64px"alt="Facebook"/>Facebook<div id="exe-facebook-hide"><!-- Facebook Like --><div style="margin-top:80px;"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FEXEIdeas2010&send=false&layout=button_count&width=100&show_faces=false&font&colorscheme=light&action=like&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="https://lh5.googleusercontent.com/-ClrTeJirDSU/UScEXdyUP9I/AAAAAAAAFFM/kWeAYWDWQMA/s64/twitter-white-64-64.png"width="64px"height="64px"alt="Twitter"/>Twitter<div id="exe-twitter-hide"><div style="margin-left:50px;margin-top:10px;"><a href="https://twitter.com/EXEIdeas"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.id=id;js.src="//platform.twitter.com/widgets.js";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="https://lh4.googleusercontent.com/-oo0HJh5vqHw/UScEWddjveI/AAAAAAAAFFA/ZZxJaVf9tA0/s64/googleplus-white-64-64.png"width="64px"height="64px"alt="GooglePlus"/>Google Plus<div id="exe-google-hide"><div style="margin-top:20px;"><a target="_blank" href="//plus.google.com/102256859586166648016?prsrc=3"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="//ssl.gstatic.com/images/icons/gplus-32.png"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="https://lh6.googleusercontent.com/--eT9bRIfqVc/UScEWQ3VrSI/AAAAAAAAFE8/SDyWWJ-KQXQ/s64/rss-white-64-64.png"width="64px"height="64px"alt="RSS"/>RSS<div id="exe-rss-hide"><div style="margin-top:50px;"><div class="exefixedfooteremailsubscribebox"><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=exefixedfootersocialicon','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='';"onblur="if(this.value=='')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. -->
Customization:
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.
Awesome Widget
Thanks For Leaving Your Views About It…
Nice Dear Keeep Its 🙂
Welcome And Thanks For Liking…
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.
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…
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- http://bit.ly/11wAfJa !!
Thanks For Liking. We Change The Widget As Your Desired. Now Leave Your Views About The New Update And Also Feel Free To Share More Concepts…
Now It’s perfect, I added this widget to my new site malayaliscorner.com and It’s working fine 🙂 I heard somewhere (I think it’s from you) that adding widget by layout tab cause low page loading on mobile devices, Is it true? Can I add this code before </body> tag?
Thanks For Using. After Visiting Your Site, I Think There Should Be An Extra CSS. Please Add The Below CSS in Your Blog To Make This Widget Perfect.
#exestylepopup img{display: inline;}
Yes, It’s Right That If You Add It Before Body End Tag Then Your Page Will Faster Ever Than If You Add It In HTML/JavaScript Gadget.
I added the css.. Now it’s look more beautiful..Thanks for your extra care :D. Now I wan’t to ask an of topic question, I added a script to customise my static page after body tag ( Here’s the script- http://textsave.de/D4J ). It successfully hides the footer, comments etc, but unfortunately the content area is not expanding to 100% width. look at this static page- http://www.makeuseofandroid.com/p/table-of-contents_21.html .. Can you please help me..
You are really a genius 🙂 Now static page working fine.
Thanks For Using.
Use This Code Instead Of Yours: http://www.textsave.de/f5J
Thanks For Liking Our Service…
Hi bro..It’s me again :D.. Now I added this widget to my other site http://www.makeuseofandroid.com, Now the ads in the page overlaying this widget. How to fix it? I tried #exestylepopup img {display: inline;}, but not worked..
Now it’s working fine 🙂 .. But when I try to paste this code before </body> tag, I got html well not formatted error. But after converting html using encoder (http://www.mybloggertricks.com/2008/10/convert-special-html-characters-to.html), the popup appears. But the hover and clicking doesn’t seem to work.
Sorry For That, Code Updated…
Can We See The Red Error ScreenShoot While Saving Your Template In Blogger…???
ScreenShot Link Please?
I need Facebook, YouTube and twitter only…..I don’t want the others…please help?
Thanks For Your Feedback. We Will Surely Fulfill Your Desire Too. However It’s Only For Four Networks…
thanks can i use only facebook and twitter then? cn i delete the others?
Yes, You Can Use Both. Just Send Us An E-Mail. We Will Send You The Updated Code…
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.
Welcome Here. Yes, We Have Shared This Code To At “How To Highlight/Select All DIV/Span Content Using JavaScript?“. Have A Look There And Leave Your Comment…
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
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…
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???
Thanks For Liking This. We Will Surely Released The Next Version With This Feature Too. Stay With Us…
Ok… Thank you very much
thank you this is cool, but widget pop out on every reload or visiting any pages feel free to visit my blog:http://eviltek.blogspot.com/
Yes. Its CSS. You Can Make This One Time If You Want To Add J Query But It Can Increase Your Blog Load Time?
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
Thanks For Liking Our Widget. Yes, You Can Do It But That Will Need JQuery. Do You Want To Add JQuery?