Bila sobat melihat template atau situs ini pastinya ketika ingin berkomentar diblog ini kok komentarnya beda sih sama blog lain? malah seperti wordpress, tentu saja disini pasti akan membuat orang lain penasaran dan ingin mencoba juga tentu saja untuk membuat tampilan seperti komentar ini memerlukan pemahaman jQuery atau Javascript karena disini sobat harus bisa memainkan Javascript.

Kenapa harus memainkan Javascript? yah karena komentar ini menggunakan fitur database dari Firebase milik Google jadi tentu saja sobat harus paham sedikitnya tentang Javascript ataupun pernah melakukan edit agar lebih paham lagi. Sedangkan saya hanya akan membagikan logika dan sourcenya saja jadi tidak mungkin tampilan nya akan sama seperti punya saya seperti ini. Sobat bisa memainkan CSS dan Javascript untuk membuat tampilan menjadi lebih bagus lagi.

Kembali ke topiknya, apakah sobat pernah dengan yang namanya Firebase? jika belum sobat bisa searching dulu di mbah google. Jika sudah tahu sobat pasti tidak akan asing lagi dengan yang namanya firebase, banyak sekali fitur pada firebase yang sangat menarik menurut saya terutama di Databasenya yang Realtime jadi ketika seseorang mengedit atau melakukan tambahan maka akan terjadi secara Realtime atau sekarang juga. Wih fiturnya keren kan sob, apalagi jika sobat bisa memainkan Databasenya makin hebat nantinya.

Langsung saja ke pembahasanya yaitu bagaimana sih merubah komentar blogger menjadi seperti wordpress? dari sini pasti akan membuat sobat kebingungan karena sobat harus merubah komentar blogger asli menjadi ke firebase menggunakan yang namanya Javascript.

Mari simak langsung caranya dibawah ini biar lebih paham lagi, jangan sungkan untuk bertanya bila kesulitan karena saya selalu terbuka jika sobat ingin bertanya.

Cara Merubah Komentar Blogger

Membuat Akun Firebase

Hal pertama yang harus sobat lakukan adalah membuat akun Firebase terlebih dahulu, nah untuk cara membuat akun firebasenya sobat bisa baca disini.

Bagi yang sudah pernah membuat akun firebase lewati cara diatas dan langsung ke cara membuat komentar firebase dibawah.

Membuat Komentar Firebase

1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian cari kode berikut <b:includable id='comment-form' var='post'> dan hapus bagian dalamnya saja seperti ini

HTML   <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
    </script>
  </div>
</b:includable>

2. Kemudian tambahkan kode kometarnya di dalam kode <b:includable id='comment-form' var='post'>

HTML<div class="row">
  <div class="columns small-12">
    <form action="#" onsubmit="event.preventDefault(); sendMessage()">
      <h1>Send a message</h1>
        <input type="text" name="name" id="name" placeholder="Name" aria-label="Name" />
        <input type="text" name="message" id="message" placeholder="Message" aria-label="Message" />
      <button type="submit">Send</button>
    </form>
    <dl id="messages">
    </dl>  
  </div>
</div>

3. Kemudian tambahkan kode dibawah ini sebelum </body>

jQueryvar myFirebaseRef = new Firebase("https://https://view-d54d5.firebaseio.com/comment/post-id/");

var sendMessage = function () {
  myFirebaseRef.push({
    name: document.getElementById('name').value,
    message: document.getElementById('message').value
  });
  document.getElementById('message').value = '';
};

myFirebaseRef.on('child_added', function(snapshot) {
  var message = snapshot.val();
  addMessage(message.name, message.message);
});

var addMessage = function(name, message) {
  var messages = document.getElementById('messages');
  messages.innerHTML = '<dt class="entry">'+name+'</dt><dd class="entry"> '+message+'</dd>'+messages.innerHTML;
};

Keterangan :
kode yang saya tandai diatas ganti dengan url firebase sobat

4. Simpan Tema dan lihat hasilnya

Ohh iya saya hampir lupa jika komentar yang diterapkan tidak tampil itu belum memasang javascript firebasenya. Untuk memasangnya silahkan ikuti langkah berikut :

1. Klik project overview yang ada disebelah kiri atas

2. Pilih icon web seperti dibawah ini

3. Salin kodenya dan paste sebelum </head>

4. Simpan Tema dan lihat hasilnya

Oh iya, disini sobat mainkan sendiri CSS nya karena di tutorial ini saya ngak kasih CSS nya jadi kembangkan saja lagi mungkin sobat bisa lebih bagus lagi dari pada punya saya. Punya saya kan jelek mana ngerti lagi pakai kode begituan..

Mungkin sekian tutorial tentang Cara membuat komentar dengan firebase dan semoga artikel ini sangat bermanfaat bagi sobat semuanya. Jangan lupa untuk di share ke teman teman yang lainnya.