Rabu, 12 Januari 2011
Modifikasi Kotak Berlangganan di Blogspot
Seperti janji saya kemarin pada artikel memasang artikel berlangganan di blog, kali ini saya akan memberikan tutorial tentang cara memodifikasi tampilan artikel berlangganan. Bagi sebagian blogger, memasang kotak feedburner itu harus, apalagi untuk blog-blog yang masih prematur seperti blog ini. Banyak sekali manfaat yang kita dapat dengan memasang kotak berlangganan artikel ini, salah satu manfaat yang paling dirasakan 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
Sekarang yang jadi masalah adalah 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 :
- Seperti biasa langkah awal Anda harus login ke Blogger dulu.
- Kemudian masuk ke bagian Rancangan
- Setelah itu pilih Edit HTML, jangan lupa 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 letakkan 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'>Download Disini</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('http://feedburner.google.com/fb/a/mailverify?uri=co/vlpg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'><input class='inpRssardi33' name='email' onblur='if (this.value == "") {this.value = "Ketikkan email anda disini";}' onfocus='if (this.value == "Ketikkan email anda disini") {this.value = "";}' 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&fg=444444&anim=0' style='border:0' width='88'/></a></td><div class='clear'/>
</tr>
</table>
</div>
</div>
</div>
<!-- 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zwMB-_Xq-K6mCcdD6H8_owv28LX2mJwa-qPlfxtvG9AzFZIOVOZ4yHaTPQim5Y2KcC_qs_5B6BipsEsqEDPrWjweLZ-vAXsXzOuNNHSYyWmo3G5yBz6cwOy5VmDDFByzqCTU6KnRLF0/s1600/Download Disini.co.cc.jpg') 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;} - Langkah terakhir adalah 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.
Kode diatas saya ambil dari : http://www.ardi33.web.id/2009/07/memodifikasi-tampilan-artikel.html
Label:
tutorial blog