Flat UI Email Subscription Box For Blogger

Flat UI Email Subscription Box For Blogger - Email Subscribe adalah salah satu widget yang awalnya disedian oleh Google FeedBurner yang bertujuan untuk memberikan pelayanan update artikel disebuah blog yang akan dikirim langsung ke alamat email yang melakukan subscribe ke blog tersebut setiap kali blog melakukan update artikel.

Jadi Subscribe Email ini memudahkan pembaca membaca artikel blog kita langsung dari akun email mereka. Sehingga menjadi lebih mudah untuk diakses oleh mereka pada subscriber email. Pada artikel sebelumnya saya juga pernah berbagi tentang subscribe box, yaitu: Clean Social Subscribe Widget for Blogger. Jika anda belum membaca artikel tersebut, silahkan anda baca juga. :)

Untuk anda yang ingin Memasang Flat UI Email Subscription Box For Blogger, Silahkan anda ikuti langkah-langkah dibawah ini dengan mudah :

• Masuk ke Akun Blogger
• Pilih Tata Letak > Tambah Gadget > Pilih HTML/Javascript
• Lalu paste kode berikut dalam konten box, kemudian simpan gadget.

 <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' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SemuaTutorial-ku', '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="SemuaTutorial-ku" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>                <input value="Sign Up Now!" class="button" type="submit" />

              </form>
             </div>

             </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;
   }

     </style> 

• Silahkan ganti ID "SemuaTutorial-ku" dengan ID FeedBurner anda.
• Selesai

Nah, sekarang anda sudah memasang  "Flat UI Email Subscription Box For Blogger". Semoga widget ini dapat bermanfaat untuk anda. Jika anda ada masalah atau pertanyaan seputar topic diatas, silahkan ajukan disini. Sampai jumpa.