Bagaimana Cara Pasang Widget Email Subscription di Blog Blogger

Bagaimana Cara Pasang Widget Email Subscription di Blog Blogger - Widget email subscription (berlangganan email) merupakan sarana yang memudahkan pembaca blog untuk mendapatkan artikel terbaru yang bisa mereka dapatkan melalui kotak masuk email mereka. Hal ini juga akan memberikan manfaat kepada anda untuk menjaga lalu lintas pembaca ke blog agar tetap stabil. Untuk itu, postingan kali ini akan membahas bagaimana cara pasang / menginstall widget email subscription (email berlangganan) kedalam blogger.

Widget Email Subscription di Blog Blogger

Widget ini sepenuhnya bisa anda sesuaikan dan modifikasi sehingga menghasilkan tampilan yang lebih menarik. Untuk kode CSS, HTML dan cara pemasangannya kedalam blogger, berikut penjelasannya.

Install Widget Email Subscription Ke Blogger

  • Login ke akun blogger.com
  • Di dalam dashboard, pilih tata letak.
  • Tambah gadget baru. Pilih HTML/Javascript
  • Copy kode di bawah dan masukkan kedalamnya
<style type="text/css">
#subscribe-box{background:#fff;border:0px solid #ccc;border-radius:3px;padding:0;margin:0px 0 5px 0}
.sub-wrap{background:#EDEDED; background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) ); background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none}
.sub-form{clear:both;display:block;margin:10px 0}
form.sub-form{clear:both;display:block;margin:10px 0 0;width:auto}
.email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff ;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px 10px 10px;width:80%}
.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:none;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}
</style>
<div id="subscribe-box">
<div class="sub-wrap">
<p>Subscribe to Our Email Newsletter and Receive Updates  in Your Email Inbox.</p>
<div class="sub-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Lostsector" class="sub-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Lostsector', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Lostsector" />
<input name="loc" type="hidden" value="en_US" />
<input class="email-field" name="email" autocomplete="on" placeholder="Masukkan email anda disini"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" />
</form>
</div>
</div>
</div>
Catatan :
Ganti "Lostsector" dengan username feedburner anda
  • Simpan gadget, refresh blog anda dan lihat hasilnya.
Demikianlah Cara Membuat Widget Email Subscription (Email Berlangganan) Untuk Blogger di atas. Semoga bermanfaat !

Unknown
Unknown

8 comments:
Write comment
  1. AnonymousJune 02, 2013

    mas bagaimana cara modifikasi judul sidebar seperti blog mas...... ada lengkungan kebawahnya......

    ReplyDelete
    Replies
    1. Ntar sya bikinin tutorialnya. Di tunggu aja ya!

      Delete
    2. iya tuh bener saya jga ingin pnya sidebar kya blog ini..

      Delete
  2. keren,,terimakasih sob..

    salam kenal...follow sukses..visit back ya sob !!

    ReplyDelete
  3. AnonymousJune 03, 2013

    Keren sob , jangan lupa kunjungi balik ya..

    ReplyDelete
  4. Mantabb ni Infonya....
    makasi kak, lg butuh. Lngsung praktekin :)
    Oia, Join balik Blog aku dunn Kak. hee ^^

    Ditunggu kunjungannya :
    Stevanieshare.

    ReplyDelete
  5. saya sudah nyoba tapi ga paham di bagian
    Ganti "Lostsector" dengan username feedburner anda

    ReplyDelete