Widget Subscribe Terbaik Untuk Blogger #1 - Feedburner adalah salah satu website penyedia pengiriman artikel blog kita ke alamat e-mail yang telah di daftarkan. Sudah banyak para Blogger menggunakan jasa website yang satu ini.
Namun kali ini disini saya akan memberikan Widget Subscribe Terbaik Untuk Blogger #1, Widget Subscribe ini berguna untuk memudahkan para pengunjung untuk mendapatkan informasi terbaru yang terbit di blog kita. Hanya dengan mengisikan alamat e-mail di form subscribe dan mengonfirmasi di e-mail masuk, otomatis pelanggan tersebut sudah bisa menikmati kiriman artikel terbaru dari blog kita secara otomatis selama pengunjung tersebut masih berlangganan di blog kita.
 |
| Gambar 0.1 |
Perlu di ingat bahwa jika kita ingin membuat Widget Subscribe maka kita harus mendaftar terlebih dahulu di website penyedia pengiriman artikel blog ke alamat e-mail salah satunya Google Feedburner, disini saya anggap anda sudah daftar di Google Feedburner, jika anda belum mendaftar anda bisa baca artikel saya tentang Cara Daftar ID Google Feedburner.
Widget Subscribe Terbaik Untuk Blogger #1
#1. Silahkan login ke akun Blogger anda.
#2. Masuk ke bagian Template > Edit HTML.
#3. Dengan menggunakan tombol CTRL+F di keyword, carilah kode <head> dan letakan kode dibawah ini tepat di bawah kode <head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<!-- Subscribe wajOni -->
<style type='text/css'>
#subscribebox{background:#424242;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#42A5F5}
.subscribe-button:focus{outline:0}
</style>#6. Kemudian masuk kebagian Tata Letak > Tambahkan Gadget (sesuai yang anda inginkan).
#7. Pilih HTML/JavaScript dan masukan kode di bawah ini di kotak Konten untuk Judul, anda bebas mengisinya.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="https://wajoni.blogspot.co.id/" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Wajoni' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Wajoni, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Wajoni'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email Address...'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>Jika anda ingin juga Widget Subsribe lainnya yang lebih keren, lebih responsive, lebih seo friendly. Anda bisa membaca artikel saya tentang kumpulan Style Widget Subsribe Keren Untuk Blogger.
Note: Ganti kode berwarna kuning dengan ID Feedburner anda.
ConversionConversion EmoticonEmoticon