BannerFans.com

Cara Membuat Widget Email Subcribe Di Blog

Cara Membuat Widget Email Subcribe Di Blog - Baiklah kawan pada kesempatan ini seocips.com akan membagikan widget yang lumayan populer dipasang di blog. Sebelumnya juga seocips telah membagikan widget yang tidak kalah bagus tampilannya, mungkin saja sobat tertarik untuk melihatnya.

Widget Email Subcribe atau widget berlangganan ini biasanya di pakai agar nantinya pengunjung anda yang tertarik dengan artikel-artikel diblog anda dapat berlangganan Artikel anda. Mereka akan menjadi langganan artikel lewat email, di mana jika kita membuat artikel baru artikel tersebut akan dikirim ke alamat email yang mereka gunakan.

Tutorial Cara Membuat Widget Email Subcribe Di Blog :

1. Log in akun Blogger anda.
2. Buka Dasboard > pilih Tata Letak > klik Add Gadget > pilih HTML/Java Script
3.Copy Script dibawah ini kemudian Paste dikolom yang telah disediakan :

<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=media', '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="media" 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.mediaimpressive.blogspot.com'>Media</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>

4. Ganti Tulisan Media dengan Username Feedburner anda.
5. Simpan dan Lihat hasilnya.
Previous
Next Post »

PERATURAN BERKOMENTAR :

√ Berkomentarlah Sesuai Artikel Diatas
√ Berkomentarlah Menggunakan Bahasa Yang Jelas
√ Relevan
√ Sopan
Θ SPAM
Θ Link Aktif (Live Link)
Θ Promosi (Iklan)
Θ OOT (Out Of Topic)

BannerFans.com
' type='text/javascript'/>