2013 July 31 Archive - EXEIdeas – Let's Your Mind Rock

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. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMOFeatures: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.com2.) 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 “ “.3.) Save It, Now You Are Done. /*********************************************** * 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} .gradient{filter:none} html{overflow-x:auto;overflow-y:hidden} Facebook Twitter Follow !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"); Google Plus Add on RSS E-Mail Will Be Delivered By FeedBurner. Thanks For Providing Me Your Social Networks Link, Let's Take Me In... 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 TipsThere 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.