Tempat belajar blogspot

Cara Menambahkan Kotak Pesan di Atas Kolom Komentar Blogger


Cara Menambahkan Kotak Pesan Kolom Komentar

Artikel kali ini mengenai trik untuk membuat kotak pesan kolom komentar pada halaman blogspot selalu berada di bagian atas kolom komentar. Mungkin beberapa dari kita sebagai blogger akan berpikir seberapa penting kah menggunakan kolom komentar ini?
Menurut saya pribadi trik penambahan kotak pesan ini cukup penting, karena dengan kotak pesan ini memungkinkan kita sanggup memberi catatan (kurang lebih hampir sama seperti sticky notes) agar mudah dibaca oleh calon komentator dan dengan begitu maka calon komentator pun bisa memahami persyaratan untuk meninggalkan komentar dihalaman tersebut.

Langsung saja kita bisa mencoba memulai membuat atau menambahkan kotak pesan tersebut dengan melakukan 3 langkah mudah dibawah ini.

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.


Langkah - langkah menambahkan kotak pesan

Cukup dengan 3 langkah kita bisa menambahkan kotak pesan diatas kolom komentar, berikut langkahnya :
  1. Menambahkan kode HTML seperti dibawah ini.
    <div id='threaded-comment-form'>
    ......
    </div>
    Baca juga : Apa itu HTML
  2. Mengubah sedikit kode JavaScript kolom komentar seperti dibawah ini.
    document.getElementById(domId).insertBefore(replybox, null);
  3. Menambahkan kode CSS untuk memberikan tampilan menarik kotak pesan tersebut.
    Baca juga : Prinsip Dasar Penulisan CSS

Langkah 1

Sekarang mari kita mulai dari langkah pertama yaitu dengan mencari kode <p><data:blogCommentMessage/></p>
Perhatikan kode dibawah ini untuk lebih jelasnya.
<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%'/>

Kita akan menemukan kode tersebut sebanyak 4 kali namun kita cukup memberikan sedikit perubahan pada kode yang ke 2 dan yang ke 4. Kode ke 2 untuk memunculkan kotak pesan sebelum ada komentar dan kode ke 4 untuk memunculkan kotak pesan setelah ada komentar. Berikut perubahan yang perlu dilakukan yaitu dengan menambahkan kode yang dibawah ini pada kode <p><data:blogCommentMessage/></p>
<div id='threaded-comment-form'>
......
</div>

Perubahan kode tersebut akan menjadi seperti kode dibawah ini
<div id='threaded-comment-form'>
<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%'/>
</div>

Langkah 2

Cari kode JavaScript seperti dibawah ini
document.getElementById(domId).insertBefore(replybox, null);

Kita hanya menemukan 1 kali dan ganti kode JavaScript tersebut dengan kode dibawah ini.
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 3

Langkah terakhir cari kode ]]></b:skin> untuk menempatkan kode CSS guna memberikan tampilan menarik pada kotak pesan.
Setelah menemukan kode ]]></b:skin>, copy kode dibawah ini dan paste diatas kode ]]></b:skin>
/* Comment Message START */
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 11px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#threaded-comment-form p::before {
    border-top-color: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }
/* Comment Message END */

Setelah selesai sampai tahap terakhir kita bisa save template kemudian coba untuk membuka halaman salah satu post kita, namun sebelumnya kita wajib menyalakan opsi komentar pada menu tata letak atau layout dibagian widget blog posts, untuk lebih jelasnya bisa melihat contoh gambar dibawah ini.

Komentar Blog Posts

Untuk mengganti isi pesan didalam kotak pesan kita bisa mengeditnya melalui setting > post, comments and sharing > comment form message, untuk lebih jelasnya bisa melihat gambar dibawah ini.

Cara Mengisi Kotak Pesan Kolom Komentar

Sampai disini dulu artikel tentang Cara Menambahkan Kotak Pesan di Atas Kolom Komentar Blogger, semoga artikel ini dapat membantu kita yang ingin memodifikasi tampilan kolom komentar blogspot menjadi lebih menarik.
Terima kasih

Artikel ini ditulis oleh :
Amateur Blog Design

28 comments:

  1. bisa langsung dipraktekan nih gan...

    ReplyDelete
  2. Replies
    1. Tidak termasuk emoticon gan, hanya memberi perubaban posisi kotak pesan yang standartnya berada dibawah menjadi bisa di atas kolom komentator..

      Delete
  3. Replies
    1. Hehe iya gan sama - sama belajar mendalami blogspot itu menyenangkan..

      Delete
  4. Ajarin dong gan ~.~ haha newbie nih

    ReplyDelete
  5. Blogger harus tau cara beginian nih gan. Hehe

    ReplyDelete
    Replies
    1. Betul gan saya setuju, minimal tidak hanya sebatas membuat artikel tapi kalau juga memahami sedikit banyak soal kode - kode HTML, CSS, JavaScript dll malah lebih bagus..

      Delete
  6. Replies
    1. Iya gan belajar otak - atik template blogspot emank terkesan rumit gan, tapi klo setelah coba belajar praktek ntar udah ga terkesan rumit koq..

      Delete
  7. ininih yang lagi saya cari izin mencoba gan

    ReplyDelete
    Replies
    1. Hehehehe iya gan bisa di coba gan, jangan lupa backup template terlebih dahulu ya gan sebelum otak atik template blogspot..

      Delete
  8. Untuk hasilnya dimana bisa lihat gan? Saya ingin ganti warna backgroundnya dari pesan diatas kolom komentar milik pribadi.

    ReplyDelete
    Replies
    1. Tampilannya seperti di kolom komentar ini gan hehe..

      Delete
  9. itu emoticonnya sudah ke include ? ato cuma kolom posisi nya doank bro ? :D

    nice info bro, newbie nih :D

    ReplyDelete
    Replies
    1. Emoticon tidak termasuk gan, hanya posisinya aja koq gan..
      hehehe

      Delete
  10. wah mantap gan, langsung dipraktekin tutorialnya

    ReplyDelete
    Replies
    1. Bisa gan langsung dicoba praktek, jangan lupa backup template agan sebelum melakukan perubahan pada template blogspot agan ya..

      Delete
  11. Mantap gan, ini yang sedang saya cari gan.thank banget ya.

    ReplyDelete
    Replies
    1. Wah pas banget berarti ya, sip gan thank you juga udah baca artikel disini..
      Saling berbagi informasi ya gan..

      Delete
  12. keren gan info nya
    ane cobain dulu ya...

    ReplyDelete
    Replies
    1. Oke siap gan bisa dicoba, jangan lupa untuk selalu backup template terlebih dahulu ya gan sebelum otak atik template agar lebih aman gan..

      Delete
  13. Gan bisa buat yang ada emoticonny gk.

    ReplyDelete
  14. apa sudah sama emo nya belum tch gan..

    ReplyDelete
    Replies
    1. Untuk tutorial ini hanya sebatas menambahkan kotak pesan aja gan, tidak ada fitur emoticon untuk penulisan di kolom komentar gan..

      Delete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...