Sunday, October 16, 2016

Cara Memasang Widget Berlangganan Via E-mail Pada Blog

widget belangganan



sudah banyak sekali cara untuk mempercantik blog, mulai dari memasang widget, template, menu, dll. disini saya akan membagi tutorial bagaimana cara memasang widget berlangganan via email pada blogger.

widget berlangganan ini nantinya untuk pengunjung sobat agar bisa menerima pemberitahuan postingan terbaru sobat via email pelanggan. dimana jika kita membuat artikel baru, maka pemberitahuan langsung muncul di email pelanggan. langsung saja kita praktikkan.

langka 1. 
buka blogger.com =>tata letak => tambah widget, lalu pilih html atau java script

pilih dan copy kode dibawah ini
<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>Terimakasih telah membaca artikel kami,silahkan masukkan email anda dan dapatkan pemberitahuan postingan ter-update via e-mail</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=ganti ini', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='nama anda' placeholder='nama anda' />
               <input type='text' name='email anda' placeholder='email anda' />
               <input type="hidden" value="ganti ini" 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.artikeljuos.blogspot.com'>artikeljuos</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>




dan lihat apa yang terjadi, 


sekian dulu tutorial dari saya, semoga bermanfaat :)

KOMENTAR DISINI GAN!!

0 komentar