Cara Membuat Pesan Diatas Kotak Komentar di Blogger

Pada kesempatan ini saya akan membagika
n cara membuat pesan diatas kotak komentar. silahkan ikuti langkah - langkah nya

Langkah

1. Login pada blog Anda masing-masing,
2. Pada menu dashboard pilih Setelan terus pilih Pos dan komentar seperti gambar di bawah

3. Tuliskan pesan yang ingin disampaikan diatas kotak komentar. (jika ingin memasukan code html di dalamnya gunakan html konverter terlebih dahulu sebelum dimasukan ke dalam kotak tersebut).
4. Masuk ke menu edit template, dan cari

<data:blogCommentMessage/>

Biasanya ada 4 code seperti itu di default template, cari yang ke 2 dan ke 4 Ganti code pertama dan kedua dengan code dibawah 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>

5. Kemudian cari code seperti dibawah ini :

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

ganti dengan

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

6. Kemudian setelah semuanya tergantikan, silahkan masukan kode CSS ini diatas

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

Sobat bisa menambahkan mempercantiknya dengan mengubah kode CSS tersebut. Untuk menambahkan tombol konversi html bersambung pada artikel berikutnya.

Semoga berhasil

Subscribe to receive free email updates: