Cara membuat tampilan form berlangganan feedburner

Posted by ronald | Posted on 03.28 | Posted in ,

Bagaimana cara membuat form berlangganan artikel seperti yang ada di blog ini?? Maksudnya seperti dibawah tiap-tiap artikel. Mungkin ada yang bertanya seperti itu.
Berikut caranya

Pertama
Kode yang ditambahkan pada tag body di template (pada mode edit template), saya meletakkannya di bawah kode <p><data:post.body/></p>.

<!-- Start Berlangganan Artikel-->
<div class='kotakRSS1'>
<div class='RssAlbri'>
Artikel disini berguna bagi anda?, Silahkan <a href='http://feeds.feedburner.com/kapurix' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis. Atau berlangganan via email, dengan begitu anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#009900'>http://k14nk.blogspot.com</font>
<div class='albriIlang'>
<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://www.feedburner.com/fb/a/emailverify' method='post' onsubmit='window.open(&apos;http://www.feedburner.com/fb/a/emailverifySubmit?feedId=i7b925q65utsht0hdoqis3s3e4&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:0px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRssAlbri' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Silahkan ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Silahkan ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Silahkan ketikkan email anda disini'/>
<input name='url' type='hidden' value='http://feeds.feedburner.com/~e?ffid=i7b925q65utsht0hdoqis3s3e4'/>
<input name='title' type='hidden' value='http://k14nk.blogspot.com'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtRssAlbri' type='submit' value='Berlangganan'/></div>
</form></td>
<td align='left' style='padding:4px 0 0 0;' valign='top' width='35%'><a href="http://feeds2.feedburner.com/blogspot/DPcw"><img src="http://feeds2.feedburner.com/~fc/blogspot/DPcw?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a>;</td>
</tr>
</table>
</div>
</div>
</div>
<div class='clear'/>
<!-- End Berlangganan Artikel-->


Kode berwarna merah ganti dengan kode feedburner anda sendiri dan kode warna hijau juga ganti dengan kode anda yang bagian gambar. Gambar maksudnya gambar seperti dibawah ini:

Untuk kode lainnya silahkan anda berexperiment.

Kedua
Kode yang ditambahkan pada deretan CSS, letakkan saja diatas 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; } .RssAlbri { background: url('http://i416.photobucket.com/albums/pp245/ateonsoft/LogoRSSalbri.jpg') no-repeat bottom right; } .RssAlbri a { background: none;} .inpRssAlbri { border: 1px solid #B9C1C6; width: 170px; background: rgb(255, 255, 255) url('http://i416.photobucket.com/albums/pp245/ateonsoft/rssform.png') no-repeat 2px 2px; font-size: 11px; padding:3px 4px 4px 20px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; } .sbmtRssAlbri { padding:2px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; } .albriIlang table {border-collapse: inherit; border: none;} .albriIlang tr { border:0;} .albriIlang td { border:0;} .albriIlang th { border:0;} .clear { clear: both; }


Untuk mengganti background-image ganti warna merah dengan URL gambar kesukaan anda. Kalau sudah simpan template.

dikutip dari : http://www.ateonsoft.com

Comments (0)

Posting Komentar