Formulir Komentar Dengan CSS

Read More »

Akhirnya ada kesempatan buat post Tutorial Blog, kali ini saya akan share cara membuat Pesan Formulir Komentar Keren Dengan CSS.
Mau liat tampilannya, liat gambar dibawah ini aja

• Masuk Ke Akun blogger anda
• Klik Rancangan / Template
• Centang Expand template widget
• Cari kode seperti ini :

<b:else/>      <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='430' id='comment-editor' name='comment-editor' src='' width='100%'

Ingat : kode berwarna hijau itu biasanya ada 2 ( dua )
Tapi Cukup anda cari kode yang berada di bawah kode <b:else/> seperti di atas ..

• Setelah ketemu ganti dengan kode dibawah ini

  <b:else/>
<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='430' id='comment-editor' name='comment-editor' src='' width='100%'/>

• Setelah itu Simpan kode css di bawah ini di atas kode ]]></b:skin>

#threaded-comment-form p {
    position: relative;
    background: #DD0;
    border: 3px solid #38F;
    padding: 10px;
    font-size: 13px;
    line-height: 1.6em;
    color: #000;
    margin-top: 30px;
    }
#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: #38F;
    border-width: 15px;
    left: 10%;
    margin-left: -36px
    }
#threaded-comment-form p::after {
    border-top-color: #DD0;
    border-width: 9px;
    left: 10%;
    margin-left: -30px
    }

•  Setelah itu cari kode seperti ini

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

• Dan Ganti Kode diatas dengan Kode dibawah ini :

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

• Klik SIMPAN TEMPLATE
• Silahkan anda isikan pesan formulir komentar anda caranya:

   - Masuk ke Setting / setelan
   - Lalu klik KOMENTAR
   - Lalu scroll ke bawah dan lihat kata Pesan Formulir Komentar
   - Nah isi kolom tersebut dengan pesan anda lalu klik SIMPAN SETELAN / Save Setting

Sumber : http://sin1aja.blogspot.com/ 

(?•_•)? Backlink CRAZYFUZ

URL

Code For Forum

HTML Code <a href='http://crazyfuz.blogspot.com/2012/10/pesan-formulir-komentar-keren-dengan-css.html' target='_blank'>Formulir Komentar Dengan CSS</a>