Widget komentar merupakan widget yang sering muncul di sebuah blog. Nah widget komentar yang satu ini berbeda dari yang sudah ada. Dengan adanya efek animasi dan juga untuk mengontrol komentar admin untuk tidak tampil serta dengan 2 pilihan tema.

Widget Komentar Terbaru Blogspot Efek Animasi - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Widget komentar merupakan widget yang sering muncul di sebuah blog. Nah widget komentar yang satu ini berbeda dari yang sudah ada. Dengan adanya efek animasi dan juga untuk mengontrol komentar admin untuk tidak tampil serta dengan 2 pilihan tema.

Widget Komentar Terbaru Blogspot Efek Animasi

Widget Komentar Terbaru Blogspot Efek Animasi

Sebuah blog pada umumnya dilengkapi tempat untuk berkomentar dimana pengunjung dapat memberikan komentar terhadap artikel yang dibacanya. Biasanya didalam form komentar juga terdapat informasi yang penting, karena bisa sebagai salah satu tempat saling berbagi informasi. Serta tempat bagi pemilik blog dalam menjawab pertanyaan diblog mereka.

Untuk melihat ada tidaknya komentar baru, pada umumnya blogger memasangkan widget komentar dibagian sidebar. Nah kali ini saya akan membagikan widget komentar terbaru dengan animasi dan admin kontrol. Berbeda dengan widget sebelumnya, widget kali ini dilengkapi dengan avatar serta saya memberikan efek animasi yang hampir sama dengan widget posting terbaru dengan animasi.
Dalam pemasangan diblog anda ikuti langkah berikut:

Pemasangan Widget

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script>
<div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
id_containrc:"#rcentcomnets",
animatedRecentcomments:true,
numComments:10,
url_blog:"URL_blogmu",
adminBlog:"nama_akun blogger/google+"
});
});
//]]>
</script>

NB: Jika di template anda sudah ada jQuery library maka kode ini <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> tidak perlu dicopy.

Themes (CSS)

Selanjutnya ke Blogger > Settings > Template. NB: BackUp terlebih dahulu Template Anda lalu klik Edit HTML > Proceed.

Kemudian letakkan salah satu kode CSS di bawah sebelum ]]></b:skin>.

.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}
.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black}
ul#kmtranimasi p{margin:15px 0 0}

Opsi-Opsi

Opsi
Keterangan
url_blog
Diisi dengan url dari blog contoh: url_blog:"http://mkr-site.blogspot.com".
id_containrc
ID tempat widget akan ditampilkan misal: <div id="rcentcomnets"><span class="loadingxrcm"></span></div> maka id_containrc:"#rcentcomnets".
numComments
Jumlah komentar yang akan ditampilkan, default:6
avatarSize
Ukuran avatar yang tampil, default 50.
animatedRecentcomments
Jika bernilai true maka animasi/efeknya akan aktif, default false.
limitspyrkm
Jumlah komentar yang tampil jika animasi aktif, default 4.
intervalspyrkm
Kecepatan animasi slidedown (dalam milidetik), default 4000
tickspeedrkm
Kecepatan transisi fadeIn (dalam milidetik),default 1000 .
characters
Panjang karakter/jumlah huruf yang ingin ditampilkan, default 100 .
defaultAvatar
Avatar yang muncul jika yang memberi komentar tidak memiliki avatar misalnya pada Anonim, default "http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png".
maxfeeds
Maksimal jumlah feed yang dicari, default 50. NB: Semakin banyak loading widget akan semakin lambat
adminBlog
Jika tidak ingin menampilkan komentar admin blog diisi dengan nama admin blog, contoh adminBlog:"Satank Mkr".


NB: Sebaiknya file JS disimpan di google code anda sendiri. Jika ingin tahu cara menyimpannya di google code silahkan ke tutorial Menyimpan file di Google Code.

Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

26 comments:

  1. horee , namaku ada discreenshot , :>)

    woi bagus mas widgetnya..?
    kira" bisa gak mas ditambahin notifikasi seperti widget komentar dari DTE :]..?

    BalasHapus
    Balasan
    1. kalo widget ini tdk bisa.. [-(

      Hapus
    2. Jia dalam blog ada fasilitas hapus komentar ini dihapus oleh penulis, apakah widget ini tetap bisa menampilkan resent comment kak ?

      Hapus
    3. Saya belum pernah coba..
      asalkan feed komentar blog yang ada tidak berubah formatnyaxx mungkin masih bisa..
      bisa berikan contoh blog/web yang seperti anda katakan??
      saya akan coba melihat format feednya..
      jika masih sama pasti masih berfungsi..

      Hapus
  2. Karya besar tetapi tidak terlihat seperti dalam demo. Jika tidak ada perubahan CCS terjadi. [-(

    Terima kasih banyak.

    BalasHapus
    Balasan
    1. Waduh..
      iya ada kesalahan dibagian CSSx..
      sekarang sudah diberbaiki... (o)

      Hapus
  3. Untuk melihat ada tidaknya komentar baru,

    BalasHapus
  4. hello mkr...
    can you give me "errorx" script that you use it in your template :D

    BalasHapus
  5. It is just perfect .. thank you very much

    BalasHapus
  6. mantap juga sob, saya udah praktekin di blog saya ...thanks ya sob, jangan lupa berkunjung ke blog saya sob...

    BalasHapus
  7. Saya bookmark dulu ya mas untuk di pelajari, maklum masih pemula saya dalam blogging.

    BalasHapus
  8. kok ku praktekin eror loading feed ya?

    aku masih bingung di tahap opsi no 2.

    apaan maksudnnya? @-)

    BalasHapus
  9. Tantangan Untuk Mas Satank :
    Untuk Template Atau Widget (Recent Comment)Selanjutnya

    Bisakah Mas satank mendesainnya sperti ini ,
    http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/

    hehehe :D

    BalasHapus
    Balasan
    1. Bisa sih..
      Karena saya lihat sruktur HTMLnya tidak terlalu rumik..
      Tapi karena CSS3 3D jadi efek nya hanya terlihat pada browser yang mendukung CSS3 tersebut..
      Soal membuatnya tidk tahu kapan..
      btw kenapa bukan anda coba buat sendiri?
      supaya bisa lebih paham JSON dan JS..
      karena diatas sudah ada script Recent Comment, sisa dibuat keluarnya sama seperti struktur HTML
      rsponsive css timeline width 3d effect

      Hapus
  10. gan ane mau nnya ni, ada kagak toturial buat ni http://4.bp.blogspot.com/-pG8rVwe4nxs/UVvqzpskEcI/AAAAAAAAAjs/n88a4ZBekPw/s320/1.JPG

    BalasHapus
  11. wah keren nih,, ijin pasang sob

    BalasHapus
  12. Mas, mau nanya, kok pas saya paste codingan CSS nya ke template saya recent commentnya gak bergerak ya ? padahal peletakannya bener nih, mohon dibales ya mas, makasih

    BalasHapus
  13. google codenya modyar gan. tolong d update ;(

    BalasHapus
  14. gan, pas saya buka http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js ko minta user sama pass? tadinya saya mau coba simpen ke googlecode gan..
    balas cepat gan :d

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP