Wednesday, April 21, 2010

Desain Form Berlangganan via e-mail di blogspot

Pasang Artikel Berlangganan di Blog sudah di jelaskan, sekarang malah udah posting cara memodifikasi, mempercantik atau memperindah tampilan form berlangganan via rss. wah... Tentu kalian sudah mengerti yang dimaksud form berlangganan artikel blog lewat/via email dari feedburner kan? Kebanyakan blog sudah memasang form ini sih, tapi nggak ada salahnya saya posting cara memolesnya. Ohya, sebagai contoh adalah pada blog saya sendiri, form berlangganan milik saya mempunyai beberapa background yang membuatnya tampak rapi dan indah. Mau? Terus bagaimana cara memasangnya? Oke, ini dia caranya...

  • Kode ini bisa ditaruh di mana saja Anda suka, tetapi saya menganjurkan di bawah postingan saja, tetapi tidak memaksa karena tidak ada efek apapun (bisa dikatakan sesuai selera). Jika di bawahposting, carilah kode <p><data:post.body/></p>
  • Kemudian taruh kode berikut ini di bawah kode tadi:
  • Atau bisa di taruh pada gadget blogspot
  • Klik Tata Letak disana terdapat sebuah gadget silakan tambah dengan memasang srip di bawah ini

<!-- Script Artikel Berlangganan -->
<div class='kotakRSS1'>
<div class='Rssardi33'>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/belajartrikblog' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#0099DD'>trikblogku.blogspot.com</font>
<div class='ardi33subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=belajartrikblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssardi33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='belajartrikblog'/>
<input name='title' type='hidden' value='raka'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtRssardi33' type='submit' value='OK'/></div>
</form></td>
<td align='left' style='padding:4px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/belajartrikblog'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/belajartrikblog?bg=99CCFF&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a></td>
</tr>
</table>
</div>
</div>
</div>
<div class='clear'/>
<!-- End Artikel Berlangganan -->

  • Keterangan :
  • Ganti kode yang berwarna hijau dengan kode feed kalian. Biasanya kode ini yang tertera di kolom berikut pada feedburner.com:
  • Ganti kode yang berwarna merah dengan data Anda
  • Kemudian yang terakhir ganti kode yang berwarna biru dengan kode feedcount milik Anda. Kode itu yang akan tampil seperti ini:


  • Kembali ke langkah selanjutnya, yaitu memasang kode CSS ini di atas kode ]]></b:skin>:
.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('http://sites.google.com/site/cumaisenggroup/cabinet/dasbor/rss.png') no-repeat bottom right; } .Rssardi33 a { background: none;} .inpRssardi33 {border : 1px solid #B9C1C6; width: 170px; background: rgb(255, 255, 255) url('http://i644.photobucket.com/albums/uu161/kgpromotion/RSS.png') no-repeat 2px 2px; font-size: 11px; padding:3px 4px 4px 20px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; } .sbmtRssardi33 { padding:2px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; } .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }

  • Klik Simpan Template
  • Selesai deh cara mendesain sebuat form link berlangganan
Semilanya ada hal yang kurang jelas jangan tinggalkan  blog ini tentang cara mempercantik form berlangganan, sobat bisa comment di bawah ini dulu.. hehehe

No comments:

Post a Comment

Terimakasih Anda Telah berkunjung di di blog kami...