3D Subscription Box Widget For Blogger

It look's great and sleek. You can also use this widget on your wordpress blog or on a static HTML page.

It's coded with pure CSS, no images were harmed during creation process. Don't remove credits, and you're free to use or share this widget.

Live Demo

Subscribe To Us

Powered By: RN Hckr.com

Add This Widget To Blogger:

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Paste following code:

<center><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=rnhckr', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login"> <h1>Subscribe To Us</h1> <input type="hidden" value="rnhckr" name="uri" /> <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus> <input type="hidden" name="loc" value="en_US" /> <input type="submit" value="Subscribe" class="login-submit"> <p class="login-help"><a href="http://www.rnhckr.com?src=fbform" rel="nofollow">Powered By: RN Hckr.com</a></p> </form> </center> <style> ::-moz-focus-inner { padding: 0; border: 0; } :-moz-placeholder { color: #bcc0c8 !important; } ::-webkit-input-placeholder { color: #bcc0c8; } :-ms-input-placeholder { color: #bcc0c8 !important; } .input { font: 12px/20px "Lucida Grande", Verdana, sans-serif; color: #404040; background: #ebc9a2; } .input { font-family: inherit; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .login { padding: 18px 20px; width: 200px; background: #3f65b7; background-clip: padding-box; border: 1px solid #172b4e; border-bottom-color: #142647; border-radius: 5px; background-image: -webkit-radial-gradientundefinedcover, #437dd6, #3960a6); background-image: -moz-radial-gradientundefinedcover, #437dd6, #3960a6); background-image: -o-radial-gradientundefinedcover, #437dd6, #3960a6); background-image: radial-gradientundefinedcover, #437dd6, #3960a6); -webkit-box-shadow: inset 0 1px rgbaundefined255, 255, 255, 0.3), inset 0 0 1px 1px rgbaundefined255, 255, 255, 0.1), 0 2px 10px rgbaundefined0, 0, 0, 0.5); box-shadow: inset 0 1px rgbaundefined255, 255, 255, 0.3), inset 0 0 1px 1px rgbaundefined255, 255, 255, 0.1), 0 2px 10px rgbaundefined0, 0, 0, 0.5); } .login > h1 { margin-bottom: 20px; font-size: 16px; font-weight: bold; color: white; text-align: center; text-shadow: 0 -1px rgbaundefined0, 0, 0, 0.4); } .login-input { display: block; width: 100%; height: 37px; margin-bottom: 20px; padding: 0 9px; color: white; text-shadow: 0 1px black; background: #2b3e5d; border: 1px solid #15243b; border-top-color: #0d1827; border-radius: 4px; background-image: -webkit-linear-gradientundefinedtop, rgbaundefined0, 0, 0, 0.35), rgbaundefined0, 0, 0, 0.2) 20%, rgbaundefined0, 0, 0, 0)); background-image: -moz-linear-gradientundefinedtop, rgbaundefined0, 0, 0, 0.35), rgbaundefined0, 0, 0, 0.2) 20%, rgbaundefined0, 0, 0, 0)); background-image: -o-linear-gradientundefinedtop, rgbaundefined0, 0, 0, 0.35), rgbaundefined0, 0, 0, 0.2) 20%, rgbaundefined0, 0, 0, 0)); background-image: linear-gradientundefinedto bottom, rgbaundefined0, 0, 0, 0.35), rgbaundefined0, 0, 0, 0.2) 20%, rgbaundefined0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px 2px rgbaundefined0, 0, 0, 0.3), 0 1px rgbaundefined255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgbaundefined0, 0, 0, 0.3), 0 1px rgbaundefined255, 255, 255, 0.2); } .login-input:focus { outline: 0; background-color: #32486d; -webkit-box-shadow: inset 0 1px 2px rgbaundefined0, 0, 0, 0.3), 0 0 4px 1px rgbaundefined255, 255, 255, 0.6); box-shadow: inset 0 1px 2px rgbaundefined0, 0, 0, 0.3), 0 0 4px 1px rgbaundefined255, 255, 255, 0.6); } .lt-ie9 .login-input { line-height: 35px; } .login-submit { display: block; width: 100%; height: 37px; margin-bottom: 15px; font-size: 14px; font-weight: bold; color: #294779; text-align: center; text-shadow: 0 1px rgbaundefined255, 255, 255, 0.3); background: #adcbfa; background-clip: padding-box; border: 1px solid #284473; border-bottom-color: #223b66; border-radius: 4px; cursor: pointer; background-image: -webkit-linear-gradientundefinedtop, #d0e1fe, #96b8ed); background-image: -moz-linear-gradientundefinedtop, #d0e1fe, #96b8ed); background-image: -o-linear-gradientundefinedtop, #d0e1fe, #96b8ed); background-image: linear-gradientundefinedto bottom, #d0e1fe, #96b8ed); -webkit-box-shadow: inset 0 1px rgbaundefined255, 255, 255, 0.5), inset 0 0 7px rgbaundefined255, 255, 255, 0.4), 0 1px 1px rgbaundefined0, 0, 0, 0.15); box-shadow: inset 0 1px rgbaundefined255, 255, 255, 0.5), inset 0 0 7px rgbaundefined255, 255, 255, 0.4), 0 1px 1px rgbaundefined0, 0, 0, 0.15); } .login-submit:active { background: #a4c2f3; -webkit-box-shadow: inset 0 1px 5px rgbaundefined0, 0, 0, 0.4), 0 1px rgbaundefined255, 255, 255, 0.1); box-shadow: inset 0 1px 5px rgbaundefined0, 0, 0, 0.4), 0 1px rgbaundefined255, 255, 255, 0.1); } .login-help { text-align: center; } .login-help > a { font-size: 11px; color: #d4deef; text-decoration: none; text-shadow: 0 -1px rgbaundefined0, 0, 0, 0.4); } .login-help > a:hover { text-decoration: underline; } </style>

Customizations:

In above code replace rnhckr with your FeedBurner feed id. Also, you can change width of this widget by changing width: 200px; with your preferred width.

Use Over Live HTML Editor for Live Edit and Preview! Click Here
Don't forget to leave your comments.....