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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5fmlXEswhvBO-cGgVHzcLcR34Ymg-nvct-u2akSJbLbcxarUUefbhK_N1SwUFYLZ13_waYBLQc8Zsd5pa3MPeyqI38ar8NrOSJgVOjL7AtyRQic_KwR-YyZt0JzkcdzIsb8GhT-M_HEzL/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie00SvOm1k1zqBwP7emSTIg5VoSaLN00KNeQUmZWKqolgDAujtB6BkmStO30w2FcrO_dNYnbWye3EcRdpNw5-6p4Cisyevny7j9ReXv90AgguTUifYEohpSyQNbk0FXCc46ll_7GbDbFiB/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8s-rg9ABWm362SY9Ln4Gcu5IGMe1LOUhMHCNxyzWrK-FbDE4BjF9DouI4ZuMbgMKmKyJXJRYdYNl7sbz37FDikhJY9a3Biog9weHiFdxhWlPy33LzXf9N-pWv9IjADHF9C7_Gi-HNgxSq/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQ7FtK3fbl93EZcS3nfTnYLkuxE4RXXy-ZpyjR7cF5Iq3VhqiIiJ5ULNnh4SHbFmnLEfSi7WmwB0m5ud-tRVRMmnap7ajnFtuYEixv8JJol1hfC3BhE5FxH7rIVQD56JPkCGF-4PJ2h2q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBW5DQ0yi65q1yzP1WQf6FYTq8GE5LZfO5YM28e7zVvSHH2sCNWWJUeiTxMdwK1mf7phBIxXfife0FLqTuv3XvOELf-k9vAKWZln2A78Y-gMiCc-6XtajGwtNdGdS2Odl5BnBF_AQpaU2i/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 :)

Posted by Unknown

Tweet