Widget edited by Kage - Zone
XkresssX-TechnologyMamzerdBali CheaterIffat Blogger
David Gunawan 123Satria Cyber

Senin, 01 April 2013

Pesan formulir komentar keren dengan css

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

Tidak ada komentar:

Posting Komentar