Cara Membuat Catatan Pesan di Atas Kolom Komentar Pada Blog - agun82 I Blog Tutorial Blogger -->

01 July 2018

Cara Membuat Catatan Pesan di Atas Kolom Komentar Pada Blog

Catatan Pesan Kolom Komentar agun82
Apa itu Catatan Pesan di Atas Kolom Komentar dan Apa Fungsinya?, Catatan Pesan di Atas Kolom Komentar adalah sebuah catatan/ pesan khusus yang dibuat oleh admin baik bernada peringatan/ larangan, himbauan, atau sekedar informasi biasa menyapa setiap pembacanya yang berkomentar diblog. Namun, pada umumnya catatan/ pesan ini lebih terasa dan terlihat seperti sebuah tata cara/ aturan yang boleh dan tidak dilakukan pada saat pembaca memberikan komentar disebuah blog.

Fungsinya sendiri pada dasarnya adalah untuk mengingatkan kepada para pembaca yang ingin berkomentar untuk tidak sembarangan dalam menuliskan komentarnya. Mengapa demikian? komentar pada sebuah blog sangat berpengaruh terhadap kemurnian dari konten utama yang bisa menyebabkan naik turunnya peringkat pada SERP (Search Engine Result Page). Catatan/ pesan ini semata-mata hanya untuk menjaga konten dari kata-kata yang tidak pantas dan mengandung kata-kata terlarang (hal yang berkaitan dengan pornografi, kekerasan, isu sara), tidak relevan, tautan ke situs terlarang atau iklan spam yang disisipkan oleh orang yang berkomentar. Apalagi bagi blog yang menjadi publiser Adsense, setiap komentar yang dipublikasikan harus melalui proses persetujuan admin blog / harus di moderasi, karena Adsense sangat anti dengan hal tersebut diatas.

Jadi, untuk menghindari hal tersebut diatas tidak ada salahnya sahabat memasang catatan/ pesan ini di blog sahabat semua.

Masih bingung dan belum terbayang? 🤔. Baiklah, mungkin sahabat bisa lihat Demo atau lihat catatan/ pesan yang sudah dipasang diblog ini.

Gimana sekarang sudah tahukan ?, terus gimana cara membuat dan memasangnya di blog?, jika sahabat tertarik untuk membuat dan memasangnya dengan beberapa pilihan versi seperti Demo diatas, berikut langkah-langkah tutorial

Cara Membuat Catatan Pesan di Atas Kolom Komentar Pada Blog.


  1. Budayakan membaca dan mencoba sebelum sahabat berkomentar.
  2. Tutorial yang saya bagikan sudah 100% berfungsi di template Blogger bawaan ataupun template modifikasi pada umumnya (tergantung pada template yang sahabat gunakan).
  3. Selamat mencoba dan tetap semangat...
  • Direkomendasikan ikuti langkah demi langkah terlebih dahulu tanpa harus merubah/ mengganti sebagian atau seluruh kode CSS, JS atau HTML. Modifikasi dilakukan setelah kode tersebut berhasil diterapkan pada template.
  • Backup Template sebelum merubah sebagian atau seluruh dari isi template, guna menghindari terjadinya kesalahan / ketidak sesuaian/ erorr saat merubahnya nanti. Berikut dibawah ini cara backup template bagi yang belum mengetahuinya.
  • Login Blogger > Menu Theme > Edit HTML
  • Cari kode </style> atau </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F
  • Copy kode CSS dibawah ini Pilih Salah Satu Versi tampilan sesuai Demo diatas yang ingin digunakan, kemudian


  • Paste tepat diatas atau sebelum kode </style> atau </body> tersebut.
  • Save Template
  • Untuk modifikasi tampilan bisa dirubah pada CSS kode ini.
  • Masih pada > Menu Theme > Edit HTML
  • Cari kode <data:blogCommentMessage/> untuk mempermudah gunakan shortcut Ctrl + F biasanya dalam suatu template akan ada 4 kode seperti ini, namun ingat kita hanya akan mengedit kode ke-2 dan ke-4 saja.
  • Setelah sahabat menemukan <data:blogCommentMessage/> pada kode ke-2 , tambahkan kode ini tepat diatasnya:
    <div id='threaded-comment-form'>
    <div class='blockqv1'>
    Jika dirasa ada hal yang kurang jelas, silahkan untuk berkomentar dibawah sesuai dengan judul artikel. Saya sangat menghargai dan menghormati apabila sahabat berkomentar dengan bijak, sopan, dan mohon tidak menyertakan link aktif atau SPAM.
    </div>
  • Ganti tulisan yang berwarna Biru dengan salah satu Versi model sesuai demo diatas dan warna Hijau dengan redaksi tulisan yang sahabat kehendaki.
  • Contoh penulisannya akan terlihat seperti dibawah ini. Untuk memudahkan silahkan Copy



  • Lakukan hal yang sama seperti diatas setelah sahabat menemukan <data:blogCommentMessage/> pada kode ke-4
  • Save Template.
  • Masih pada > Menu Theme > Edit HTML
  • Cari kode document.getElementById(domId).insertBefore(replybox, null);
  • Setelah sahabat menemukan kode tersebut Hapus, dan ganti dengan kode berikut :
    document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
  • Contoh gambar dan keterangan.

    ×
  • Save Template.
  • Selamat, besar kemungkinan jika sahabat mengikuti setiap langkah diatas akan berhasil seperti blog saya ini, untuk menguji hasil dan memastikan semua berjalan baik coba sahabat berkomentar dibawah dan saya akan mengunjungi balik blog sahabat.
  • Lakukan modifikasi lanjutan untuk tampilan sesuai dengan selera sahabat pada CSS kode diatas.
  • Demo Versi 1 s/d 7 diatas hanya sebagai referensi dibuat dengan properties CSS yang bisa sahabat kembangkan kembali menjadi model tampilan yang lebih menarik dan bagus tentunya.
  • Download file lengkap .txt tutorial ini sebagai media pembelajaran.

Silahkan sahabat memodifikasi lanjut untuk penempatan, ukuran, warna, dan model gambar disesuaikan dengan gaya template sahabat. Hindari memodifikasi yang berlebihan terkadang malah jadi menggangu baik tampilan maupun fungsi.
Demikian semoga membantu...
logo agun82
logo agun82
Please Share

Artikel Lainnya Terkait Costumized

0 komentar:

Post a Comment

Jika dirasa ada hal yang kurang jelas, silahkan untuk berkomentar dibawah sesuai dengan judul artikel. Saya sangat menghargai dan menghormati apabila sahabat berkomentar dengan bijak, sopan, dan mohon tidak menyertakan link aktif atau SPAM.