Rabu, 23 Februari 2011

Modifikasi Kotak Berlangganan di Blogspot

Seperti janji saya kemarin pada memasang artikel berlangganan di blog, kali ini saya akan memberikan tutorial tentang cara memodifikasi tampilan artikel berlangganan. Sebagian blogger menganggap feedburner wajib ada di dalam blog kita. Manfaat yang paling di rasakan adalah pengunjung lebih mudah dalam berlangganan artikel kita melalui email mereka. Sehingga setiap kita update postingan, pengunjung akan menerima artikel kita dalam bentuk pesan email

Lalu, bagaimana caranya membuat tampilan kotak feedburner menjadi lebih menarik. Sehingga pengunjung bisa betah berlama-lama di blog anda? Caranya adalah dengan modifikasi tampilan artikel berlangganan. Baik, langsung saja ke langkah-langkah pemasangannya :
  • Login ke Blogger
  • Masuk ke bagian Rancangan
  • Pilih Edit HTML, centang Expand Widget Templates
  • Kode ini bisa diletakkan 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/co/vlpg' 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'>Creating Website</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=co/vlpg&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='co/vlpg'/>
    <input name='title' type='hidden' value='co/vlpg'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='sbmtRssardi33' type='submit' value='Subscribe'/></div>
    </form></td>
    <td align='left' style='padding:4px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/co/vlpg'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/co/vlpg?bg=99CCFF&amp;fg=444444&amp;anim=0' 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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOb1yQMdoVwUMJz-hTjsRmZH9_T8uEk40Xp8QvO2XuWpkYxLpXLyWrUw_83K-UaEN6vr5eU7j3-PzKA4lTPRPrOGRgDqBwXCHtL0tCHtQoeig5wO1xZ4LA8WomP99cGMalYn7yb06IJQ/s1600/maskolis.co.cc.jpg&#39;) no-repeat bottom right; } .Rssardi33 a { background: none;} .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px; font-size: 11px; padding:3px 4px 4px 10px;} .sbmtRssardi33 { padding:2px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }
  • Klik save/simpan, selesai
Kotak berlangganan artikel feedburner anda sekarang sudah berubah dan lebih menarik, sekarang tinggal temen-temen mau dimodif seperti apa, itu terserah bisa disesuaikan dengan selera masing-masing.


Artikel Terkait:


Diposting oleh Ichsan Saputra di 16.03
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Komentator Blog Ini