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>Now just replace WidgetCraft with your feed id and RSS URL and all social media URLs with your profile URLs
.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('http://feedburner.google.com/fb/a/mailverify?uri=WidgetCraft', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
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>
Having any problems then leave a comment.....
