Awesome And Simple EXE-Social Widget With Subscription Box

This Article Was Live On July 20th, 2012 And So Far Have: 6 Comments...
Last Updated on June 21st, 2014

Am sharing with you again another cool subscription box which comprises of subscription box, and social sharing buttons. In my previous post, there is so so many widgets and it is another to that is simple but stylish. I have design it to the perfect taste so that it wouldn’t affect your blog loading time. To add this subscription box to your blog, In this I put a Email subscription from and three social sharing link FaceBook, Twitter, LinkedIn, Google+, YouTube, Rss And Other Social , so that this widget fulfill your both requirement. I used CSS3 to rotate these on hover design this widget so it take only few seconds to load. This Widget can be add in Blogger, WordPress or Any other HTML website. simply follow the few steps below.

CLICK HERE TO SEE DEMO

Features:
1.) Social Network Icon With Subscription Box.
2.) Twist The Icons On Hover.
3.) FaceBook, Twitter, LinkedIn, Google+, YouTube, Rss And Other Social.
4.) Simple And Stylish Design.
5.) HD Icons.
6.) Quick To Load CSS.

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:

Stylish Collection Of J-Query Sliders For Blog & Website

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. -->
<style>
#exeideasbody {
background:#f8f8f8;
margin:0 0 40px 0;
padding:10px;
border: 3px outset #ff0000; -moz-border-radius: 10px; border-radius: 10px;
overflow:hidden;
font-size: 14px;
}
.spinning_icons a{
width:36px;
height:36px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.twitter{ background:url('https://4.bp.blogspot.com/-05nZtw8WXLE/T1h_HuxjRnI/AAAAAAAADgo/rw88iwdiKIM/s000/twitter.png'); }
.facebook{ background:url('https://4.bp.blogspot.com/-P9SChCbjibg/T1h_HlnZ0YI/AAAAAAAADgs/wNmJ5EKi6lE/s000/facebook.png'); }
.linkedin{ background:url('https://4.bp.blogspot.com/-7KqOsBoC-aY/T1h_KhOoPCI/AAAAAAAADhA/cjRF7qiGZOY/s000/linkedin.png'); }
.rss{ background:url('https://1.bp.blogspot.com/-ff_XfJA8KM8/T1h_KqwUURI/AAAAAAAADhI/KB9DvIVr9jo/s000/rss.png'); }
.youtube{ background:url('https://lh6.googleusercontent.com/-EjnvqvxdSIQ/T40l3XSfhlI/AAAAAAAAB9s/4VnPEZgDXSQ/s32/YouTube.png'); }
.googleplus{ background:url('https://3.bp.blogspot.com/-3elsv4uhSzs/T1h_KSLDYVI/AAAAAAAADg4/Nw8kol8SBhE/s000/gplus.png.png'); }
.mixsocial{ background:url('https://lh6.googleusercontent.com/-xcHvGi2TpZk/T6jP9vrvTMI/AAAAAAAACGg/7mFW9zJeCic/s32/myspace.png'); }
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->
<center id="exeideasbody">
<div class="spinning_icons">
<a href="http://twitter.com/EXEIdeas" class="twitter" title="twitter">Twitter</a>
<a href="http://facebook.com/EXEIdeas2010" class="facebook" title="facebook">Facebook</a>
<a href="http://pk.linkedin.com/in/exeideas" class="linkedin" title="linkedin">Linkedin</a>
<a href="https://plus.google.com/102256859586166648016" class="googleplus" title="Google Plus">Google Plus</a>
<a href="http://feeds.feedburner.com/EXEIdeas" class="rss" title="rss">RSS</a>
<a href="http://www.youtube.com/EXEIdeas" class="youtube" title="youtube">YouTube</a>
<a href="https://www.exeideas.com/p/about-us.html" class="mixsocial" title="Other Social">Social</a>
</div>
<div id="email-news-subscribe"> 
<div class="email-box">
<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 class="email" type="text" style="width: 150px; font-size: 12px;" 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" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div>
</div>
</center>
<!-- 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.) Change All Blue Link With Your Links.
2.) Change Red Text With Your FeedBurner ID.
3.) Sav3 And Done.

Recommended For You:

How to Change Home, Newer Post and Older Post Link Into Button In Blogger

6 Responses to “Awesome And Simple EXE-Social Widget With Subscription Box”

Nurudeen Shittu says:

July 22, 2012 at 9:28 AM

How can i add this below post in blogger.
Thanks

- EXEIdeas says:
  
  July 22, 2012 at 10:40 AM
  
  To position the buttons at the bottom of post, place the code below
  < data:post.body/>
  In Your Template…
- Nurudeen Shittu says:
  
  July 23, 2012 at 5:44 AM
  
  I found 4 of this i don`t which one paste below.
- EXEIdeas says:
  
  July 23, 2012 at 5:46 AM
  
  Try After Each…
Asim Nawaz says:

July 27, 2012 at 1:46 PM

when will this popup pop out? i mean on loading home page? can i put it in a link or a widget?
http://downloadsandtricks.blogspot.com/
An Informative site which provides free softwares, ebooks, wallpapers, videos, solution manuals, programming, blogging tips & tutorials & much more Interesting Stuff

- EXEIdeas says:
  
  March 4, 2013 at 6:24 AM
  
  This Is Not A POPUP Widget, It’s A Simplae Social Widget…