CSS3 Comment Form Seperti Blog ini-
CSS dan CSS3
Kali ini saya akan mengajarkan CSS3 Comment Form Seperti Blog ini, yg seperti saya itu
Tetapi belum ada Tombol2 di bawah nya itu,Style ini di ambil di
Blog Kangismet,blog yg handal ^_^, gw jg ingin seperti itu sih :v
Dah langsung aja
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 code di atas
<div id='threaded-comment-form'>
...kode di atas...
</div>
hasilnya kurang lebih 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>
Langkah Kedua
Cari kode:
document.getElementById(domId).insertBefore(replybox, null);
Ganti dengan kode d bawah ini!
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
Langkah Ketiga
Memberikan CSS, berarti kode d bawah ini letak di atas kode ]]></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
}
Simpan Template.
Langkah Ke Empat- Memberikan Formulir Pesan
Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klik Tambahkan.
Title : CSS3 Comment Form Seperti Blog ini
Description : CSS3 Comment Form Seperti Blog ini - CSS dan CSS3 K ali ini saya akan mengajarkan CSS3 Comment Form Seperti Blog ini, yg seperti saya itu ...
