Jumat, 04 Mei 2012

Membuat Follow Blog Melalui e-Mail Widget

Situseo Blog : Fitur baru blogger Follow by email, setelah saya coba ternyata mengacu kepada Feed, tidak berbeda dengan widget berlangganan melalui feed yang sudah ada sebelumnya, bagi yang sudah mendaftarkan blognya melalui Google FeedBurner tentu saja widget ini pasti sudah pernah dicoba dipergunakan pada blog.

Untuk memberikan tampilan yang berbeda dengan widget berlangganan (Email Subscriptions) yang ada pada feedburner google, dibawah ini merupakan tampilan email subscription yang sudah dimofikasi tanpa merubah script asli dari email subscriptions FeedBurner.

Untuk melihat hasilnya bisa melaui tombol demo dibawah :





Sebelum memasang scriptnya, sebaiknya kalian mengaktifkan fitur-fitur pada feedburner seperti Mengaktifkan Email Subscriptions dan FeedCount, kenapa ? karena script yang akan kalian pergunakan dibawah ini adalah script untuk Email Subscriptions dan FeedCount (penghitung yang berlangganan melalui email), setelah aktif, kalian bisa menggunakan script dibawah ini atau script yang diberikan dari feedburner (belum dimodifikasi).

<style>
.form{
border:1px solid #7d7d7d;
padding:3px;
width:280px;
height:130px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
.rss{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufaO0DBq4XwdwYuVwtASk5pg2phO-wv7YHK2C0l3qke3N4uac4AIxqn22xEYBUmdQY7pA0bXZ_JK6E9vV_P2yYfezTwBfAtOHyxUFHS_eYlP5k6wCU8qagBBkVGw2qFFhb8K0p9DaQRU/s1600/mail-pic.png") no-repeat bottom left}
.button{
background:#7d7d7d;
color:#FFF;
font-size:11px;
font-family:Arial,Tahoma,Verdana;
margin-left:5px;
padding:3px 5px 3px 5px;
font-weight:bold;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
</style>
<div class="form">
<div class="rss">
<div style="color: black; font-weight: bold; padding-top: 20px; text-align: center;">
<blink><a href="http://situseo.blogspot.com/">
Follow by e-Mail</a></blink></div>
<div style="padding-left: 10px;">
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SituseoBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<div style="padding-bottom: 10px; padding-left: 50px; padding-top: 10px;">
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;your email here...&quot;;}" onfocus="if (this.value == &quot;your email here...&quot;) {this.value = &quot;&quot;}" style="height: 15px; width: 170px;" type="text" value="your email here..." /> <input name="uri" type="hidden" value="SituseoBlog" /><input name="loc" type="hidden" value="en_US" /><input class="button" type="submit" value="Send" /></div>
</form>
<div style="padding-left: 100px;">
<a href="http://feeds.feedburner.com/SituseoBlog"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/SituseoBlog?bg=7d7d7d&amp;fg=ededed&amp;anim=1&amp;label=listeners" style="border: 0;" width="88" /></a></div>
</div>
</div>

Script tersebut diatas penggabungan antara widget Email Subscriptions dan widget FeedCount dari feedburner google, tentu saja sudah dengan penambahan style seperti background gambar dll seperti terlihat pada demo. Jika kalian menggunakan script yang ada pada situseo blog, untuk cara pemasangannya cukup memasukan script tersebut pada ruang widget dengan meng-klik add gadget pada menu layout blogger kalian, dan jangan lupa untuk mengganti alamat feed dengan alamat feed blog kalian yang sudah didaftarkan pada feedburner google, seperti yang diberi tanda warna kuning pada kode diatas.

Semoga dengan tampilan berlangganan melalui email ini bisa memacu pengunjung untuk mulai berlangganan melalui email.

Semoga bermanfaat,

Dengan mencantumkan link sumber Anda lebih bijak http://situseo.blogspot.com/2012/03/membuat-follow-blog-melalui-e-mail.html#ixzz1ttZ0rC8o
Under Creative Commons License: Attribution

Tidak ada komentar: