Memodifikasi Tampilan Artikel Berlangganan Feedburner

Emang aneh kalau belum posting soal Pasang Artikel Berlangganan di Blog, sekarang malah udah posting cara memodifikasi, mempercantik atau memperindah tampilan form berlangganan ini. Hehe. 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 bawah posting, carilah kode <p><data:post.body/></p>
• Kemudian taruh kode berikut ini di bawah kode tadi:
  

  <!-- Script Artikel Berlangganan -->
  <div class='kotakRSS1'>
  <div class='Rssardi33'>
  Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/diesilver' 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'>die-silver.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=diesilver&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='diesilver'/>
  <input name='title' type='hidden' value='ardi33'/>
  <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/diesilver'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/diesilver?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 :
  
  1. Ganti kode yang berwarna hijau dengan kode feed kalian. Biasanya kode ini yang tertera di kolom berikut pada feedburner.com:
     
  2. Ganti kode yang berwarna merah dengan data Anda
  3. 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; }

• Tinggal Simpan deeeh :D

Untuk kode-kode di atas bisa Anda ubah sendiri, tapi kalau tidak mengerti ya sebaiknya jangan karena akan mengacaukan, hhe... :))
Semoga bermanfaat!!!

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Gunakan Tombol berikut untuk menyimpan halaman :
Memodifikasi Tampilan Artikel Berlangganan Feedburner
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..