Amazing Email Subscription Form For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

First of all this widget is created by MBT and i'am just posting it all credits goes to those guys Thanks. It's a great widget with a beautiful form and some round social media icons. I was thinking about to add widget generator to make it easy but it would be little crappy so here we go :

• Go To Blogger > Layout > Add A Gadget > HTML/Java Script

• Paste following code :

<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=WidgetCraft&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WidgetCraft' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjOQBWK78WHrl-n5RcW_0h2MuzvRcvbbBZ53rPC6rM86qT1nIJRGkp_FTo68KvoGwoSBllhZxSDNQFDRP8LQzUdpR-U3aOXeO5LCGUEkCMt6t5o-agQnICw1sC3-37539xGJW95JgdkZ8/s1600/facebook500.png' alt='facebook'/></a>
<a href='TWITTER URL' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjafE92u6GZ5Ta6MSo5mwhdTFAYgspbfGJx2OY2l1NEFlx2MN_von46I_-1p5vVX_NTNQuu41v9zSsQy8D7eZ52phyphenhyphennUZGxMS0XAZqouI76M9oIJn8_FlylA3wsa1Tierdyk9eDtktaCDU/s1600/twitter.png' alt='twitter'/></a>
<a href='GOOGLE+ URL' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ1e64hzsiraZskW1n0JynKK38RVAP6wA9JQHtCGxgCtoGaq9QLhpp61BC1dwEFBC5OVl13ceQqQxlCc6nib7WeJZZaaALBs25p2IezECaV6EhzOM-J_g9lmKaygzWIlOJpj2pdLviOZA/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jnLcmh0E4ra49Oc9vos5DpShVRO6N_sOmMGdOuqTdAkoZwERszxmfbOeucp77Unv6lqYwpTWD2DYAIo7X0-iWRNeSCcaSmhbD3jg-LjLFDO904Ds0uU7SR5W0kz-xjDKCoN9I_Ix3bQ/s1600/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwkwyvOFtEZ99HRWJZ92mDt-ir2yLwr2XdacyFiopsCXuZS5Mxg57B4icPzxg_rQ1ca3ORahWp1Gf4On_UlAuC8ykzfb0w2G_f7om2lamCHHLwIZB_Kne7LduyXeAHK4EAXvCleaedSM/s1600/rss.png' alt='rss'/></a>
</div>
</div>

Now just replace WidgetCraft with your feed id and RSS URL and all social media URLs with your profile URLs

Having any problems then leave a comment.....

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.