Cara Mudah Membuat Pesan Keren Di Atas Kolom Komentar Blog

Cara membuat pesan di atas kolom komentar ini sebenarnya sangatlah mudah untuk diterapkan, meskipun anda adalah pemula, di blogger khususnya fitur tersebut sudah tersedia, tinggal anda mengisinya, tetapi tampilan standar terkesan kaku jika diterapkan pada blog yang memasang template selain dari template bawaan dari blogspot.

Anda mungkin sering melihat pada blog yang menyediakan tutorial atau pun sejenisnya diatas kolom komentarnya terdapat sebuah pesan, dan kali ini itu lah yang akan saya bahas, untuk anda yang ingin membuat sebuah pesan khusus dengan desain menarik menggunakan CSS.

Fungsi Utama

Fungsi dari pesan ini pertama kali digunakan oleh para blogger untuk membuat ultimatum kepada para pengunjung yang sering memasukan komentar dengan link aktif. Selain sebagai ultimatum anda juga bisa memberikan beberapa pengumuman terkait keinginan anda pada pesan tersebut, atau sekedar memberikan sapaan kepada pengunjung yang ingin memberikan komentar di blog anda, mungkin anda melihat yang seperti gambar di bawah ini tepat berada di bawah postingan blog saya : 

Itu adalah pesan yang saya gunakan untuk menyapa para pengunjung saya, isi pesannya terserah anda mau di isi apapun bebas, karena ini adalah pesan pribadi bukan pesan yang akan menjadi penilaian google.

Cara Membuat

Untuk membuatnya sangatlah mudah, anda tinggal ikuti beberapa langkah dibawah ini :

• Masuk ke blogger anda kemudian menu template, kemudian anda klik saja Edit HTML.
• Anda Cari kode seperti dibawah ini

"data:blogCommentMessage" 

• Akan ada 4 jenis kode seperti itu di template anda, dan pilih kode tersebut yang kedua, yang pertama biarkan saja. Biasanya kode tersebut lengkapnya seperti ini tanpa kode warna merah :

 <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>  

• Jika sudah menampakan kode seperti itu, anda tambahkan saja kode yang berwarna merah pada kode tersebut, sehingga bentu kode nya sama seperti kode diatas.
• Lakukan langkah seperti diatas ada kode "data:blogCommentMessage" yang ke empat.
• Sampai disana save terlebih dahulu template anda tetapi anda jangan dulu keluar dari editor HTML anda, anda perlu mencari kode seperti dibawah ini

document.getElementById(domId).insertBefore(replybox, null);

• Anda ganti saja kode tersebut dengan kode dibawah ini :

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Sampai disana anda save kembali template anda, tapi anda jangan dulu keluar masih ada dua langkah lagi yang harus anda terapkan, yaitu memasang CSS untuk mempercantik tampilannya :

• Anda cari kode  ]]></b:skin>
• Kemudian anda tambahkan kode dibawah ini tepat diatas kode tersebut :

#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 } 

• Simpan Template Anda kemudian anda keluar dari editor HTML anda.

Anda sudah berhasil menerapkan pesan diatas kolom komentar anda, dan tinggal anda isi pesan tersebut sesuai dengan yang anda suka, caranya :

• Dasboard ->
• Setelan -> 
• Pos dan Komentar, klik Tambahkan.
  

Dan lihat hasilnya pada postingan anda, dan selamat mencoba. Terima Kasih.

Posted by Imam Munandar

Kali DIBAGIKAN

Share Share Share

Tags :

Related : Cara Mudah Membuat Pesan Keren Di Atas Kolom Komentar Blog