Cara Membuat Kotak Pesan Komentar Keren

Assalamualaikum sobat ngeposta,,,sedang apa nehh??? !!!
Kali ini aku mau sharing Cara Membuat Pesan diatas Kotak Komentar Keren. Yaa memang sudah banyak artikel yang seperti ini. Oke deh bagi yang berminat silahkan disimak aja yaa....

1. Masuk ke dasbor blogger kalian masing-masing

2. Pilih edit html, namun sebelumya kalian backup dulu template kalian

3. Kalian cari kode

<p><data:blogCommentMessage/></p>

gunakan Ctrl+F. Biasanya ada 4. Namum tergantung template kalian masing-masing. Ganti yang no 2 dan 4 saja.
 Jika sudah ketemu kodenya nanti 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%'/>

Jika sudah ketemu, kalian tambahkan kode

<div id='threaded-comment-form'>
........kode diatas
</div>

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

 4. Jika sudah, kalian cari kode

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

ganti dengan kode

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

5. Sekarang kita menuju kode CSSnya untuk memperkeren tampilan. Sisipkan kode dibawah ini tepat diatas kode ]]></b:skin>

#threaded-comment-form p {
    position: relative;
    background: #3b5998;
    border: 2px solid #000;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #333;
    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: #000;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #000;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }

Untuk kode yang berwarna merah ganti sesuai dengan selera sobat
Simpan template kalian


Sekarang kita membuat pesannya, untuk tutorialnya, silahkan klik Membuat pesan diatas kotak komentar



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

Share :

Tweet

More

Related Post