Membuat Pesan di atas Form Komentar Menjadi Keren

Membuat Pesan di atas Form Komentar Menjadi Keren

Rio Ilham Hadi

04 February 2014

Cara Membuat Pesan di atas Form Komentar Menjadi Keren di Blog - Bagaimana cara merubah desain pesan di atas form komentar menjadi keren, warna juga bisa diganti sesuai selera.

Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, mau pun aturan berkomentar...

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. 

Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.

Langkah Pertama : Cari Kode <p><data:blogCommentMessage/></p> biasanya ada 4, cari yang ke 2 dan ke 4. Kurang lebih kodenya seperti ini :

 <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%'/>

Tambahkan Kode Diatas, dan dibawah dengan kode dibawah ini :

 <div id='threaded-comment-form'>

...KODE DI ATAS...

</div>

Dan Hasilnya menjadi seperti 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>

Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.

Langkah Kedua : Cari Kode dibawah ini :

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

Lalu Ganti Dengan kode dibawah ini :

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

Langkah Ketiga : Untuk membuat desain menjadi keren, tambahkan CSS di atas ]]></b:skin>

/*-- Modifikasi Pesan Komentar--*/

#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

    }

Lalu Simpan Template...

Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klik Tambahkan.



Tulis pesan sobat pada kolom isian, kemudian klik Simpan Pesan di pojok kanan atas dasboard.

Semoga bermanfaat...

 Source : http://blog.kangismet.net/2013/05/membuat-pesan-di-atas-form-komentar.html 

 Jangan Lupa Klik Tombol Like dan Tombol Share Yaa... 

Share This