Design, Tutorial and Tips Trik Blogger | Lostsector

- on 07.05

Design, Tutorial and Tips Trik Blogger | Lostsector

Bagaimana Cara Pasang Widget Email Subscription di Blog Blogger

Posted: 01 Jun 2013 12:28 PM PDT

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 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 !