mas template

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

      modifikasi rss maskolis
    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;http://3.bp.blogspot.com/_jeu1dUw9AK4/TS1nXs3efdI/AAAAAAAAAQk/vMny_o0OLEI/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;}
  • 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
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 Creating Website

36 comments:

  1. maaf gan saya mau nanya cara supaya bisa panjang form feedburnernya kayak yang punya agan itu gimanan caranya saya dah otak atik tapi gabisa

    ReplyDelete
    Replies
    1. kren gan artikelnya, salam kenal dan sukses buat blognya
      giribig.com
      idcheat.com

      Delete
  2. Mas Rizal, saya sudah lihat blog anda, mungkin anda harus ganti tulisan subscribe itu dengan "enter" atau "go". Kalau masih belum bisa anda bisa lihat kode width=100% diatas untuk width coba ditambah 120% misalnya. Komentar anda sangat berarti bagi saya, salam kenal

    ReplyDelete
  3. makasih gan,kunjungan balik di tunggu

    ReplyDelete
  4. cara menghapus feed burnernya gimana ya mas

    ReplyDelete
  5. @idel blog:
    Hapus mulai dari

    ................
    ................


    makasih

    ReplyDelete
  6. @Idel blog:
    Hapus kode yang berlatar hitam pada tutorial diatas

    ReplyDelete
  7. Thanks...Infonya, sangat Bermanfaat

    ReplyDelete
  8. Mas Kode warna hijau tuh di mana nemunya ?

    ReplyDelete
  9. maaf om mau tnya...
    cara mengapus iklanya di mana yah..
    dan tulisan "p data:post.body p" ga ada...

    ReplyDelete
  10. @Ardian:
    Dicentang dulu kotak expand widgets template yang ada di atas edit HTML itu mas
    Kemudian cari kode nya dengan menggunakan control + F

    ReplyDelete
  11. terimakasih infonya sangat bermanfaat sekali

    ReplyDelete
  12. mas kalo dikasih gambar dibagian kiri gimana mas

    ReplyDelete
  13. bang mau numpang nanya nih!!! kemarin saya sudah membuat Feedburner.....
    setelah selesai!! ko,witget Feedburner berada dihalaman post!!!

    mas gimana.. memindahkan witget Feedburner di samping halaman blog!!!

    ReplyDelete
  14. Maaf gan klo mengganti dari templet bawaan gimana???
    coz link feeds nya ke yang punya template

    thank before

    ReplyDelete
  15. widihhh mantap bgt dachhh bisa di coba nichhh

    thank's ya

    ReplyDelete
  16. Mas, sudah saya terapkan di Blog saya namun tampilan kotak dan gambarnya tidak sesuai dengan punya anda. Bisa membantu untuk memperbaiki ngga mas ?
    Terima kasih sebelumnya

    ReplyDelete
  17. Mas Kenapa Ya..???
    Saya tidak bisa memasukkan email di kolom "masukkan email anda disini"
    dan Tombol Subscribe'a Tidak Berfungsi...

    ReplyDelete
  18. Mas, numpang tanya, kode feedcount milik kita bisa dilihat dimana ya ? ^^ terimakasih sebelumnya

    ReplyDelete
  19. ijin nyimak plus menerapkan mas Bro... manstab

    ReplyDelete
  20. mas kolis gimana cara membuat kotak berlanggananya, masalahnya yang tampil hanya tulisan berlangganan tetapi kotaknya gak ada. tolong di cek di http://andronam.blogspot.com

    ReplyDelete
  21. Kok saya terapkan ditemplate saya gak bisa ya mas?

    ReplyDelete
  22. nice info mas :v
    http://freebiexp.blogspot.com

    ReplyDelete
  23. kalo untuk tulisan
    div class='kotakRSS1
    div class='Rssardi33
    dipaling atas
    dan

    input class='sbmtRssardi33' type

    itu perlu diganti apa tidak yaa mas, takutnya berpengaruh

    ReplyDelete
  24. gan kalau boleh tau gmn cara supaya tampil gambarnya cz py saya g ada gambarnya thanks kunjungi gan ya http://suksespenuh.blogspot.com

    ReplyDelete
  25. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam 1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  26. Ok trmakasih sob akan saya coba tutorialnya kayaknya oke nih.
    Salam kenal ja gan...

    ReplyDelete
  27. kereen dehh.. makasih maskolis untuk berbagi pengetahuannya ^^

    ReplyDelete
  28. Mas Ini udah responsiv belumkotak feed nya

    ReplyDelete
  29. makasi gan infonya. singgah juga di;
    http://www.digitalonline-store.com/

    Toko Online Store Jual Beli Software, Video Tutorial Pemograman, Networking, Template Custom Design, Tema Desain, Videohive, Plugin, Sistem Operasi Windows & Macintosh

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger