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::..

Trik Blog

• Masalah Pada Kotak Komentar
• Memberi Penomoran Pada Daftar yang Ditulis
• Editor Baru untuk Posting di Blogspot
• Mengganti Tulisan Read More dengan Gambar
• Cara Mengembalikan Blog yang Terhapus
• Cara Setting Domain Berbayar di Blogspot Tanpa Hosting
• Cara Membuat Status YM Sendiri
• Cara Membuat Read More Menggunakan Span-id
• Cara Memasang Emoticon di Atas Kotak Komentar
• Hosting Gratis 000webhost.com Mengalami Problem
• Cara Membuat Spoiler di Blog
• Cara Memasang Gadget Online Visitor
• Cara Berkomentar yang Baik dan Benar
• Membuat Menu Dropdown Dan Variasinya
• Pasang Alert di Blog Sebagai Pesan Penutup
• Cara Memodifikasi Tulisan PAda Blog
• Cara Membuat Daftar Isi Pada Blog
• Cara Membuat Tabel Pada Blog
• Mempercantik Tampilan Judul Posting pada Label
• Membuat Huruf Posting Bergaya Koran
• Cara Pasang Statistik dan Tracker
• Cara Menampilkan Recent Comments
• Cara menghilangkan Tang dan Obeng
• Memasang Widget Artikel Terkait/Related Post pada Blog