Envelope Subscribe Feed Box For Blogger

Sebenarnya Koben belum meminta izin untuk sharing tutorial berikut kepada empunya blog :"> Tapi gue yakin, bakalan tidak keberatan kalau saya share ;)) Make subscribe box alias membuat kotak berlangganan via email dengan gaya tampilan amplop, dan ketika disorot akan keluar kotak langganan via email! Memang rada sulit menerangkan kode-kode ke bentuk kalimat :D
Beberapa tut serupa siapa tauk berkenan bagi anda:

• Make simple subscribes box for you.
• Beautiful subscribes box.
• Make subscribe box and serelek jebret menu.

Okay, mari kita buat envelope subscribe feed box for blogger. Berikut ini ramuan & bumbu kotak langganan dengan tema amplop plus animasi CSS on hover.

#wrap_amplop {
width:530px;
margin:20px auto 0;
}
#form_wrap {
overflow:hidden;
height:446px;
position:relative;
top:0;
-webkit-transition:all 1s ease-in-out .3s;
transition:all 1s ease-in-out .3s;
}
#form_wrap:before {
content:"";
position:absolute;
bottom:128px;
left:0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfiAFjz7lQHbYBm9Tsa5QfC3NJ5PAdVJDJABUDM6SlODKpcfzioQ54ODu2IUC0zOcglvwOdwhSyqeFSlmK2aVis2fi9A56Was5nNvBRjW5OiEYBi85LGyMAud0KKbTkrCGdp_ERutLWo/s1600/before.png');
width:530px;
height:316px;
}
#form_wrap:after {
content:"";
position:absolute;
bottom:0;
left:0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6P5UBsO2nHSTuC0nUfPdnSRDZnJkvZ_LfoZFRh2JbgYtfyLuBhuAGOHAHYZeQcCFbAUI86oDWx9W5SvqLi13xzP7GH9LOFwwcFrZmF4K6JwNTrUtX7v4MpdmX9cb0OYHsAj8Cg4sdUE/s1600/after.png');
width:530px;
height:260px;
}
#form_wrap.hide:after,#form_wrap.hide:before {
display:none;
}
#form_wrap:hover {
height:777px;
top:-200px;
}
#form_wrap form {
background:#f9f3eb;
position:relative;
top:200px;
overflow:hidden;
height:190px;
width:400px;
margin:0 auto;
padding:25px 30px;
border:1px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
box-shadow:0 0 3px #9d9d9d,inset 0 0 27px #fff;
-webkit-box-shadow:0 0 3px #9d9d9d,inset 0 0 27px #fff;
-webkit-transition:all 1s ease-in-out .3s;
transition:all 1s ease-in-out .3s;
}
#form_wrap:hover form {
height:400px;
}
#form_wrap label {
margin:11px 20px 0 0;
font-size:16px;
color:#b3aba1;
text-transform:uppercase;
text-shadow:0 1px 0 #fff;
}
#form_wrap input[type=text] {
display:inline-block;
color:#777;
background-color:#fff;
width:70%;
height:36px;
padding:0 10px;
margin:0 0 0 17px;
border:1px solid #f8f5f1;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0 0 1px #b3a895;
box-shadow:inset 0 0 1px #b3a895;
}
#form_wrap input[type=submit] {
position:relative;
width:20%;
height:33px;
opacity:0;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgb(255,255,255)),to(rgb(221,221,221)));
cursor:pointer;
color:#333;
text-decoration:none;
text-align:center;
display:inline-block;
border:solid 1px #ddd;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-transition:opacity .6s ease-in-out 0s;
transition:opacity .6s ease-in-out 0s;
}
#form_wrap:hover input[type=submit] {
z-index:1;
opacity:1;
-webkit-transition:opacity .5s ease-in-out 1s;
transition:opacity .5s ease-in-out 1s;
}
#form_wrap:hover input:hover[type=submit] {
color:#435c70;
}

<div id='wrap_amplop'>
<div id='form_wrap'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<div align='center'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvUsIiqPN0qwx502AoGaAqMJy9XMM67nyAhQKSVpTwRDtK8z5Wdc33s_Svoo2mmW4KvMtgbDrVImBrK1WCmr0FiMDKbV7hO_ziQsn3r0HwjByywRgy1iZITa_ZKn_BYYywVf8HJjMwXM/s1600/RSS.png' style='width:200px; height:160px;'/><p>Subscribe to my feed and articles delivered to your inbox or feed reader, ABSOLUTELY FREE!</p></div>
<input id='email' name='email' placeholder='Your.Name@email.com' required='' type='text'/><input name='submit' onClick='javascript:alert("Thank you for Signup, Go to your mailbox and click on confirmation link!");' type='submit' value='Go'/>
<p align="center">Now, Sign up for get free email updates, Thanks!</p>
<input name='uri' type='hidden' value='YOUR-ACCOUNT'/>
<input name='loc' type='hidden' value='id_ID'/>
</form>
</div>
</div>

Jika kepengen melihat demo, silahkan datangi web master Pawan Mall www.pawanmall.net. Nanti kalian juga bakal menemukan artikel game super mario bros yg bisa dimainkan pada browser engine!

Thanks master Pawan Mall :)