Widget Email Subscription Keren Untuk Blogger

Postingan kali ini saya akan share tampilan email suscription keren untuk blog. Perhatikan demo gadget gambar di bawah ini. Jika sobat terta...

Postingan kali ini saya akan share tampilan email suscription keren untuk blog. Perhatikan demo gadget gambar di bawah ini. Jika sobat tertarik langsung saja ikuti tutorial ini.

Langsung saja menuju Blogger Dashboard

Selanjutnya pilih Layout atau Tata Letak

Select Add a Gadget dan Pilih HTML Javascript

Langkah Berikutnya copy code di bawah ini

<style type="text/css">
 /* Delete form Here*/
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh16zxzuUNccboLA2x2yhn36f8rAk8SIC5cId8CcoUNK6UOPVOTatb2OU6SyNilEl4vBT3n_FD1FMeJAhFm3zItG1ui9mMt53l0uJLMGGXVX76TMFAMmAEhPCEKxqxnvnEceNmMINP_nM/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="https://www.facebook.com/pajatapuih.iqbal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMUeC5o2bqm-xJ52O4WVyzqbbcAL_f_uI0NmRfDAFn5Whu7JI9ezB3UZyYL1gWrXBVU4DK4ui_azpBUWM14GRpL9a71wwzT9Qpk0CDnDMI56WwFzO0wXUU-3Kbeb1tz8_93ElZ_g8AUY/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="https://twitter.com/02IQb4L" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQuharjBuMC-4VWf9yNFT9QKUVJ6_PAc8waclUx0hbFqYa-b0MssMmrEwvDdkhP3M1xkzbQpd9l5ztJL0zypzO8YcHJLyAlowAvYXarEqvAW_f2go8PUQR-hqTtqZQOnsHCe05AOiSHI/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/masdabang" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEQKwZpyZEChLrrozeT1ot0FMxznDXXLV1GoVt2tvbgd2Z2DqxVE4GFYnTK2fqxoDJmO0tgWoWsDpcyEHFstG9GFPHBnf3oYp5KJ40oK9pDpOjOgKC6X27INBStBdItP7eksoSmIn_SbY/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masdabang', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="masdabang" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Silahkan ganti yang ditandai warna merah dengan FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID milik sobat.

Catatan : Jika sobat tidak suka Mouse over effect dari widget ini silahkan hapus kode dari /* Delete form Here*/ sampai /* Delete to Here*/