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 :- Menambahkan kode HTML seperti dibawah ini.
<div id='threaded-comment-form'>Baca juga : Apa itu HTML
......
</div> - Mengubah sedikit kode JavaScript kolom komentar seperti dibawah ini.
document.getElementById(domId).insertBefore(replybox, null); - 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%'/>
<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>
......
</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>
<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 inidocument.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 */
#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.
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.
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 :
Perbloggeran
bisa langsung dipraktekan nih gan...
ReplyDeleteSiap gan bisa dicoba gan..
DeletePak itu sudah include emoticon ?
ReplyDeleteTidak termasuk emoticon gan, hanya memberi perubaban posisi kotak pesan yang standartnya berada dibawah menjadi bisa di atas kolom komentator..
DeleteBagus buat pembelajaran nih
ReplyDeleteHehe iya gan sama - sama belajar mendalami blogspot itu menyenangkan..
DeleteAjarin dong gan ~.~ haha newbie nih
ReplyDeleteBlogger harus tau cara beginian nih gan. Hehe
ReplyDeleteBetul 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..
DeleteAduh... Rumt banget... Pusing...
ReplyDeleteIya gan belajar otak - atik template blogspot emank terkesan rumit gan, tapi klo setelah coba belajar praktek ntar udah ga terkesan rumit koq..
Deleteininih yang lagi saya cari izin mencoba gan
ReplyDeleteHehehehe iya gan bisa di coba gan, jangan lupa backup template terlebih dahulu ya gan sebelum otak atik template blogspot..
DeleteUntuk hasilnya dimana bisa lihat gan? Saya ingin ganti warna backgroundnya dari pesan diatas kolom komentar milik pribadi.
ReplyDeleteTampilannya seperti di kolom komentar ini gan hehe..
Deleteitu emoticonnya sudah ke include ? ato cuma kolom posisi nya doank bro ? :D
ReplyDeletenice info bro, newbie nih :D
Emoticon tidak termasuk gan, hanya posisinya aja koq gan..
Deletehehehe
wah mantap gan, langsung dipraktekin tutorialnya
ReplyDeleteBisa gan langsung dicoba praktek, jangan lupa backup template agan sebelum melakukan perubahan pada template blogspot agan ya..
DeleteMantap gan, ini yang sedang saya cari gan.thank banget ya.
ReplyDeleteWah pas banget berarti ya, sip gan thank you juga udah baca artikel disini..
DeleteSaling berbagi informasi ya gan..
keren gan info nya
ReplyDeleteane cobain dulu ya...
Oke siap gan bisa dicoba, jangan lupa untuk selalu backup template terlebih dahulu ya gan sebelum otak atik template agar lebih aman gan..
DeleteGan bisa buat yang ada emoticonny gk.
ReplyDeleteHehehe maaf gan tidak ada fitur emoticon gan..
Deleteapa sudah sama emo nya belum tch gan..
ReplyDeleteUntuk tutorial ini hanya sebatas menambahkan kotak pesan aja gan, tidak ada fitur emoticon untuk penulisan di kolom komentar gan..
Deleteijin coba gan
ReplyDelete