Cara Membuat Widget Email Subscribe


Caralukman - Email subscribe tidak hanya berfungsi sebagai langganan artikel saja, namun juga berguna untuk menjadi 'reminder' atau pengingat tatkala seseorang pengunjung lupa untuk mengunjungi blog kita secara rutin seperti yang biasa Ia lakukan. Memang tidak mudah untuk mendapatkan banyak pelanggan yang ingin berlangganan artikel blog kita, tapi ada baiknya kita "berusaha" dahulu, yang penting kita harus bersikap user friendly dan menyuguhkan konten-konten yang menarik serta informatif bagi pengunjung, agar pada akhirnya mereka bersedia untuk berlangganan artikel dan menjadi pengunjung loyal blog kita. 

Berikut Cara Pasang Widget Email Subscribe

  1. Pertama , Anda harus Login akun blogger Anda.
  2. Kedua, pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.
  3. Ketiga, Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.
  4. Letakkan kode berikut dibawah kode ]]></b:skin>
    .form {
    border:1px solid #aaa; /* warna garis pinggir form */
    background: #f0f0f0 /* warna background form */
    padding:3px; /* spasi form */
    width:300px; /* panjang form */
    height:120px /* tinggi form */
    }
    .rss {
    background:#f4f4f4;
    }
    .button {
    background: #006699; /* warna tombol subscribe */
    color: #FFFFFF; /* warna font subscribe */
    font-size: 11px; /* ukuran font subscribe */
    font-family: Arial, Tahoma, Verdana; /* font subscribe */
    margin-left: 5px; /* margin kiri tombol subscribe */
    border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
    padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
    font-weight: bold;
    }
  5. Kemudian Kembali Ke Menu Awal, Pilih Tata Letak / Layout.
  6. Klik Add Gadget, Lalu Pilih HTML/JavaScript.
  7. Letakkan kode di bawah ini ke dalamnya. 
    <div class="form">
    <div class="rss">
    <div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/LukmanOfficial"><img src="http://lh3.ggpht.com/_15FopxVONSo/TCXI_jBHdlI/AAAAAAAADPY/Rh5cFsxiV4A/s800/005.png" /></a> <a href="http://feeds.feedburner.com/LukmanOfficial">GET UPDATE VIA RSS</a></div>
    <div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>
    <div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=LukmanOfficial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="LukmanOfficial" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>
    <div style="padding-left:10px"><a href="http://feeds.feedburner.com/LukmanOfficial"><img src="http://feeds.feedburner.com/~fc/LukmanOfficial?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
    </div></div>
  8. Klik "Save/Simpan" gadget, dan selesai.

UPDATE :

membuat Widget Email Subscribe agak lebih bagus. Caranyapun sama dengan diatas agan tinggal ganti kode diatas dengan kode dibawah ^_^

CSS :
#sidebar-subscribe-box{background:url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

HTML :
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Langganan Artikel,Game,Software dan Tutorial Blog, Langsung dikirim ke Email kamu.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=LukmanOfficial" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=LukmanOfficial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="LukmanOfficial" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
<p align="center"><p><a href="http://feeds.feedburner.com/LukmanOfficial"><img src="http://feeds.feedburner.com/~fc/LukmanOfficial?bg=0099FF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p></p>
</div></div>

NB : Sobat ganti nama LukmanOfficial dengan Url RSS blog sobat

Demikian informasi terbaru tentang Membuat Widget Email Subscribe Keren di Blog, baca juga artikel menarik lainya seputar tutorial blog tentang Cara Membuat Contact Form (Kontak Formulir) di Blog, Jangan Lupa Memberi Komentar ya dan Selamat Mencoba :)

31 Responses to "Cara Membuat Widget Email Subscribe"

  1. Akhirnya Nih Artikel Ane cari ketremu juga..
    Thank gan..

    ReplyDelete
    Replies
    1. Mau share bagai mana cara sadap ANDROID, BB dan IPHONE dan SYMBIAN juga berbagai macam ponsel.


      kunjungi : WWW.PENYADAPPHONE.COM

      Info lengkap tentang fiturnya dibawah ini:

      1.Sadap BBM
      2.Sadap SMS
      3.Sadap PANGGILAN SUARA
      4.Sadap FOTO DAN VIDEO DI GALERY
      5.Sadap LOKASI [MELALUI SATELIT]
      6.Sadap WHATSAPP
      7.Sadap FACEBOOK
      8.Sadap BEETALK
      9.Sadap SKYPE
      10.Sadap Email/ YAHOO GMAIL DAN HOTMAIL
      11.Sadap SUARA SEKITAR
      12.Sadap KONTAK NAMA
      13.Sadap HISTORY BROWSER
      14.Sadap KAKAO TALK, PATH

      Dan masih banyak lainnya...

      SADAP SEMUA RAHASIA DI PONSEL DIA SECARA JARAK JAUH, PASANGAN SUAMI/ISTRI ANDA YANG SEDANG SELINGKUH ATAU MELINDUNGI ANAK REMAJA ANDA DARI PERGAULAN BEBAS.

      KETENTUAN/ KEBIJAKAN PENGGUNAAN BERLAKU.


      Info lengkap, Silahkan
      Kunjungi Website : WWW.SADAP.COM

      Delete
  2. sebenarnya alternatif dari widget ini adalah menambahkan G+ follower...kelebihan G+ follower... bisa menambah PV (ada triknya)

    ReplyDelete
  3. tampilan subcribe nya bagus juga :D kira-kira memberatkan loading blog ga min ?

    ReplyDelete
  4. tampilan subcribe nya bagus juga :D kira-kira memberatkan loading blog ga min ?

    ReplyDelete
  5. Wah ini nih yang saya cari cari :D Thanks gan tutornya :)

    ReplyDelete
  6. Yang terima jadi ada ga, gan, yang full color? :D

    ReplyDelete
  7. ternyata lumayan mudah ya sob kalo ada tutor nya, izin bookmark dulu !
    heheh

    ReplyDelete
    Replies
    1. Menyimak, Gan... mungkin nanti bisa buat referensi kl mau ganti desain....

      Thanks tuk sharenya :)

      Delete
    2. Iya sob, mungkin kalo sobat bosen dengan Widgetnya, sobat bisa mengganti widget tersebut dengan widget yang saya share ^_^

      Delete
  8. Wah ini nih yang saya car :D Thanks gan udah share :D

    ReplyDelete
  9. makasih gan tutornya baru dapet ni tutor :D

    ReplyDelete
  10. keren gan.. sundul terus =D izin praktek deh..

    ReplyDelete
  11. keren nih biar nggak default sama template nya :)

    ReplyDelete
  12. Makasih gan untuk informasinya, sangat membantu :)

    ReplyDelete
  13. Terimakasih banyak sob, sangat membantu sekali artikelnya..

    ReplyDelete

/**************** READ ME ****************/

---> Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk komentar menggunakan Anonymous atau Name/URL <---

-----------------------------
NB: Selama Bukan Mengandung Pornografi/Unsur Kekerasan
-----------------------------