Membuat Widget Email Subscribe di Blog

Membuat Widget Email Subscribe di Blog - Widget Subscribe atau Berlangganan ini berguna di blog sobat untuk misalnya seseorang menyukai blog sobat dan orang itu ingin mendapatkan informasi terus di blog sobat misalnya blog sobat bermanfaat dan mengisi Form dengan email dan saat sobat mengupdate artikel di blog sobat orang yang mensubscribe blog sobat tersebut akan mengetahui bahwa blog sobat telah update artikel.

Dan Kemaren Fariz memberikan Tutorial jika sobat ada masalah Baca Juga : CARA MENGATASI EMAIL TIDAK DI SUBSKRIPSI DI FEEDBURNER GOOGLE

1. Sobat login dulu di Blogger dan akan tampil Dashboard blogger klik panah arah kebawah dan sobat klik Tata Letak => Add Gadget => HTML/Javascript

2. Sobat Copykan kode dibawah ini di dalam Tabel di HTML/Javascript tadi :

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' ethod='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=initextyak', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="initextyak" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />
</form>
</div>
<p id='credits'>Powered By : <a href='http://www.brofariz.blogspot.com'>Bro Fariz</a></p>
</div>
<style type='text/css'>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
</style>