“Envy” MPT Subscribe Box For Blogger And WordPress

The subscribe box uses pure HTML5 and CSS3 effects to enhance its look.
Compatibility:

The widget is supported (with effects) in all popular browsers:

Google Chrome
Mozilla Firefox
Opera
IE8+
Safari
And others

Live Demo:

Blogger:

The installation of this subscribe box is quite easy. Just follow these steps for Blogger.

Go to Blogger > Layout
Click on Add A New Widget > HTML/Javascript
Paste the following code in the box:

<div style="text-align:center"><form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MPT-Network', 'popupwindow', 'scrollbars=yes,width=600,height=520');" id="mpt-sub"><h1>SUBSCRIBE TODAY</h1><div id="mpt-img"><img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="email-subscribe" height="48" width="48" /> <p>Sign up and receive our free Newsletter </p></div><input type="hidden" value="mypremiumtricks" name="uri" /><input type="email" name="email" class="login-input" placeholder="Email Address" autofocus="autofocus" autocomplete="off" /><input type="hidden" name="loc" value="en_IN" /><input type="submit" value="Subscribe" class="login-submit" /></form></div><style>#mpt-sub h1{ font-family:mptfont1 !important; text-shadow:-1.05px 0.58px 0.3px rgb(193, 193, 193), -2.10px 1.16px 0.3px rgb(181, 181, 181), -3.15px 1.75px 0.3px rgb(169, 169, 169), -4.20px 2.33px 0.3px rgb(156, 156, 156), -5.25px 2.91px 0.3px rgb(142, 142, 142), -6.30px 3.49px 0.3px rgb(128, 128, 128), -5.25px 2.91px 2px rgba(0, 0, 0, 0.3), -10.50px 5.82px 4px rgba(0, 0, 0, 0.3), -15.74px 8.73px 6px rgba(0, 0, 0, 0.3), -20.99px 11.64px 8px rgba(0, 0, 0, 0.3) !important; color:white !important; font-size:29px !important; } #mpt-img img{ float:left !important; } #mpt-sub{ width:300px !important; -webkit-border-radius:0px !important; -moz-border-radius:0px !important; border-radius:0px !important; padding:12px 16px !important; background:-webkit-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background:-moz-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background:-o-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background:-ms-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background: radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; -webkit-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2) !important; -moz-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2) !important; box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2) !important; -webkit-transition:0.5s linear !important; -moz-transition:0.5s linear !important; -o-transition:0.5s linear !important; transition:0.5s linear !important; } #mpt-sub:hover{ -webkit-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2), inset 0px 0px 31px rgb(17, 15, 24) !important; -moz-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2), inset 0px 0px 31px rgb(17, 15, 24) !important; box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2), inset 0px 0px 31px rgb(17, 15, 24) !important; } #mpt-sub *{ outline:0 !important; } #mpt-img{ padding:1em 0 !important; height:3em !important; } #mpt-img p{ font-family:monospace !important; color:white !important; float:right !important; top:10px !important; position:relative !important; width:19em !important; } :-moz-placeholder{ color:#bcc0c8 !important !important; } ::-webkit-input-placeholder{ color:#bcc0c8 !important; } :-ms-input-placeholder{ color:#bcc0c8 !important !important; } .login-input{ display:block !important; width:16em !important; height:37px !important; margin:8px auto !important; text-align:center !important; padding:0 9px !important; color:white !important; text-shadow:0 1px black !important; background:#443837 !important; border:1px solid #15243b !important; border-top-color:#0d1827 !important; -webkit-border-radius:4px !important; -moz-border-radius:4px !important; border-radius:4px !important; background-image:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; background-image:-moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; background-image:-o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2) !important; -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2) !important; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2) !important; } .login-input:focus{ background-color:#32486d !important; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6) !important; -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6) !important; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6) !important; } .login-submit{ display:block !important; width:100% !important; height:37px !important; margin-bottom:15px !important; font-size:14px !important; line-height:10px !important; font-weight:bold !important; color:#294779 !important; text-align:center !important; text-shadow:0 1px rgba(255, 255, 255, 0.3) !important; background:#adcbfa !important; -webkit-background-clip:padding-box !important; -moz-background-clip:/*@@prefixmycss->No equivalent*/ !important; background-clip:padding-box !important; /*@@prefixmycss->No equivalent*/ :!important; border:1px solid #284473 !important; border-bottom-color:#223b66 !important; -webkit-border-radius:4px !important; -moz-border-radius:4px !important; border-radius:4px !important; cursor:pointer !important; background-image:-webkit-linear-gradient(top, #d0e1fe, #96b8ed) !important; background-image:-moz-linear-gradient(top, #d0e1fe, #96b8ed) !important; background-image:-o-linear-gradient(top, #d0e1fe, #96b8ed) !important; background-image:linear-gradient(to bottom, #d0e1fe, #96b8ed) !important; -webkit-box-shadow:inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15) !important; -moz-box-shadow:inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15) !important; box-shadow:inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15) !important; } .login-submit:active{ background:#a4c2f3 !important; -webkit-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1) !important; -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1) !important; box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1) !important; } </style>

Replace ekWMe with your feedburner feed ID.
That's it! Save the widget and it should work like a charm.

WordPress:

Go to WordPress Admin > Appearance.
Drag a text widget.
Paste the following content in it:

<div style="text-align:center"><form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MPT-Network', 'popupwindow', 'scrollbars=yes,width=600,height=520');" id="mpt-sub"><h1>SUBSCRIBE TODAY</h1><div id="mpt-img"><img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" height="48" width="48" /> <p> Sign up and receive our free Newsletter  </p></div><input type="hidden" value="ProBloggingCafe" name="uri" /><input type="email" name="email" class="login-input" placeholder="Email Address" autofocus="autofocus" autocomplete="off" /><input type="hidden" name="loc" value="en_US" /><input type="submit" value="Subscribe" class="login-submit" /></form></div><style>#mpt-sub h1{ font-family:mptfont1 !important; text-shadow:-1.05px 0.58px 0.3px rgb(193, 193, 193), -2.10px 1.16px 0.3px rgb(181, 181, 181), -3.15px 1.75px 0.3px rgb(169, 169, 169), -4.20px 2.33px 0.3px rgb(156, 156, 156), -5.25px 2.91px 0.3px rgb(142, 142, 142), -6.30px 3.49px 0.3px rgb(128, 128, 128), -5.25px 2.91px 2px rgba(0, 0, 0, 0.3), -10.50px 5.82px 4px rgba(0, 0, 0, 0.3), -15.74px 8.73px 6px rgba(0, 0, 0, 0.3), -20.99px 11.64px 8px rgba(0, 0, 0, 0.3) !important; color:white !important; font-size:29px !important; } #mpt-img img{ float:left !important; } #mpt-sub{ width:300px !important; -webkit-border-radius:0px !important; -moz-border-radius:0px !important; border-radius:0px !important; padding:12px 16px !important; background:-webkit-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background:-moz-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background:-o-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background:-ms-radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; background: radial-gradient(rgb(112, 94, 240), rgb(60, 64, 175), rgb(67, 72, 202)) !important; -webkit-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2) !important; -moz-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2) !important; box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2) !important; -webkit-transition:0.5s linear !important; -moz-transition:0.5s linear !important; -o-transition:0.5s linear !important; transition:0.5s linear !important; } #mpt-sub:hover{ -webkit-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2), inset 0px 0px 31px rgb(17, 15, 24) !important; -moz-box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2), inset 0px 0px 31px rgb(17, 15, 24) !important; box-shadow:5px 4px 0 -1px rgba(56, 44, 197, 0.4), 8px 7px 0 1px rgba(85, 63, 199, 0.3), 12px 12px 0 1px rgba(49, 62, 219, 0.2), inset 0px 0px 31px rgb(17, 15, 24) !important; } #mpt-sub *{ outline:0 !important; } #mpt-img{ padding:1em 0 !important; height:3em !important; } #mpt-img p{ font-family:monospace !important; color:white !important; float:right !important; top:10px !important; position:relative !important; width:19em !important; } :-moz-placeholder{ color:#bcc0c8 !important !important; } ::-webkit-input-placeholder{ color:#bcc0c8 !important; } :-ms-input-placeholder{ color:#bcc0c8 !important !important; } .login-input{ display:block !important; width:16em !important; height:37px !important; margin:8px auto !important; text-align:center !important; padding:0 9px !important; color:white !important; text-shadow:0 1px black !important; background:#443837 !important; border:1px solid #15243b !important; border-top-color:#0d1827 !important; -webkit-border-radius:4px !important; -moz-border-radius:4px !important; border-radius:4px !important; background-image:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; background-image:-moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; background-image:-o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)) !important; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2) !important; -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2) !important; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2) !important; } .login-input:focus{ background-color:#32486d !important; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6) !important; -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6) !important; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6) !important; } .login-submit{ display:block !important; width:100% !important; height:37px !important; margin-bottom:15px !important; font-size:14px !important; line-height:10px !important; font-weight:bold !important; color:#294779 !important; text-align:center !important; text-shadow:0 1px rgba(255, 255, 255, 0.3) !important; background:#adcbfa !important; -webkit-background-clip:padding-box !important; -moz-background-clip:/*@@prefixmycss->No equivalent*/ !important; background-clip:padding-box !important; /*@@prefixmycss->No equivalent*/ :!important; border:1px solid #284473 !important; border-bottom-color:#223b66 !important; -webkit-border-radius:4px !important; -moz-border-radius:4px !important; border-radius:4px !important; cursor:pointer !important; background-image:-webkit-linear-gradient(top, #d0e1fe, #96b8ed) !important; background-image:-moz-linear-gradient(top, #d0e1fe, #96b8ed) !important; background-image:-o-linear-gradient(top, #d0e1fe, #96b8ed) !important; background-image:linear-gradient(to bottom, #d0e1fe, #96b8ed) !important; -webkit-box-shadow:inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15) !important; -moz-box-shadow:inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15) !important; box-shadow:inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15) !important; } .login-submit:active{ background:#a4c2f3 !important; -webkit-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1) !important; -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1) !important; box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1) !important; } </style>

Replace MPT-Network with your feedburner feed ID.
Done! Check your site and you won't be disappointed with the results!

h/t My Premium Tricks

Notifikasi

Mix Blogging

“Envy” MPT Subscribe Box For Blogger And WordPress

SUBSCRIBE TODAY