Membuat Widget Sederhana Untuk Email Subcribe Keren di Blogger

Apa kabar sahabat Blogger, semoga hari mu menyenangkan dan selalu bisa berkarya di jagat online ini. kali ini saya akan membahas bagai mana cara membuat Widget untuk Subscribe atau langganan bagi para pengunjung blog kamu.

Widget ini tergolong Widget Sederhana dan dapat di terapkan tanpa membongkar template HTML kesayangan kamu. kita tinggal menambahkan saja pada Widget HTML yang baru.

Kode dari widget ini telah di lengkapi dengan CSS Style, artinya tidak ada hubungannya dengan CSS Style pada tempalte bawaan. jika kamu ingin memodifikasi CSS yang ada maka dapat di lakukan dengan mudah sob...

Banyak blogger yang tidak memanfaatkan tool ini, dengan alasan "tidak ada pembaca yang mau entry emailnya" dan ada juga yang berdalih "mendingan share artikel di media sosial aja..." ya sudah lah sob... mungkin itu pandangan mereka, tapi tidak bagi sebagian orang yang lain.

Dari pada banyak ngoceh, yang ada nanti kita yang pusing sob, mendingan kita langsung mulai membahasnya.

Cara memasang Widget Sederhana ini adalah sebagi berikut :

1. Masuk ke blogger, dan pilih Tata Letak
2. Tambahkan Widget baru pada posisi yang akan kamu inginkan (bisanya di samping content post)
3. Copy Kode dibawah ini, selanjutnya ganti tulisan merah di dalam kode di bawah ini

Baris dengan text berwarna merah dalam code di bawah adalah username atau id feedburner milik blog kita. jadi kamu harus menggantinya, terdapat 2 baris yang berwarna merah dari kode tersebut.

ganti-id-anda Menjadi -> id Feedburner kamu

jika kamu tidak menemukan id Feedburner kamu, silakan baca artikel berikutnya.

Baca : Mengetahui ID Feedburner pada Blogger

 <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'>  
         Dapatkan Pembaruan  
        </div>  
          <p>Masukkan nama dan email, lalu Klik Subcribe, Selanjutnya cek Email untuk konfirmasi berlangganan situs ini.</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-id-anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
         <input type='text' name='name' placeholder='Name Anda' />  
         <input type='text' name='email' placeholder='Email Aktif' />  
         <input type="hidden" value="ganti-id-anda" name="uri"/>  
         <input type="hidden" name="loc" value="en_US"/>  
             <input value="Subscribe..!" class="button" type="submit" />  
        </form>  
        </div>  
 <p id='credits'>Powered By : <a href='http://www.rpmadani.com'>rpmadani.com</a></p>  
        </div>  
  <style type='text/css'>  
    #byard-emailsubsocial {  
    width: 290px;  
    height: 300px;  
    border: 1px solid #ddd;  
     border-radius: 5px 5px 0px 0px;  
    }  
    #byard-emailsubsocial .heading {  
 padding: 5px 2px;  
 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>  

Kenapa penting memasang Widget ini ? ya menurut saya widget ini sangat penting untuk dipasang, karena akan mempermudah bagi pelanggan blog kita mendapatkan pembaruan dari blog kita.

Bayangkan saja jika pelanggan blog yang kamu miliki haingga ratusan atau bahkan ribuan, tanpa membagikan kepada mereka, secara otomatis mereka akan mendapatkan pemberitahuan.

Yakin dan percayalah, jika content blog kamu menarik dan di ulas dengan penulisan yang ramah lingkungan, pasti banyak penggemar yang ingin berlangganan di sana.

Dan hampir setiap blog terkenal juga memasang yang widget ini,  termasuk situs ini. Saya persilahkan buat kamu mengisi email dan nama di kotak yang ada di samping untuk mendapatkan pembaruan dari blog saya..... ini namanya promo gan....

Terakir untuk uji coba Widget ini, silahkan minta teman kamu mencobanya, jika ada kendala bisa tuliskan kendala kamu di kolom komentar, Terimakasih.

---

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Sandi Fadilah

Artikel Terkait