Membuat Pesan di atas Form Komentar Blogger
0 views
Membuat Pesan di atas Form Komentar - Ada beberapa pertanyaan dari sahabat, tentang bagaimana cara membuat atau memodifikasi kotak pesan di atas form komentar. Hal ini mungkin sudah sering terlihat pada blog-blog yang menyajikan tutorial blogger.

Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.
Langkah 1 : Cari kode
Langkah 2 : Cari kode :
Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></b:skin>
Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klik Tambahkan.

Tulis pesan sobat pada kolom isian, kemudian klik Simpan Pesan di pojok kanan atas dasboard.
Semoga bermanfaat.

Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.
Langkah 1 : 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 pada kode diatas :<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>
Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.
Langkah 2 : Cari kode :
document.getElementById(domId).insertBefore(replybox, null);
ganti dengan kodedocument.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></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.Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klik Tambahkan.

Tulis pesan sobat pada kolom isian, kemudian klik Simpan Pesan di pojok kanan atas dasboard.
Semoga bermanfaat.
157 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Terima kasih.
mhon bantuannnya...
http://project-saya.blogspot.com/
Soalnya pengen ane pindahin posisinya..
[code]
#threaded-comment-form p::before {
border-top-color: #5899c9;
border-width: 15px;
left: 10%;
margin-left: -35px;
}
[/code]
document.getElementById(domId).insertBefore(replybox, null);
udah ane pasang :P
thanks atas tutornya,,.
sudah berhasil terpasang ^_^
culkiboy.blogspot.com
fajrimansyahshare.blogspot.com
kan cuman ada 2 di template sy, pas sy terapin kok munculnya hanya pd artikel yg ada komentarnya...sedangkan artikel yg tak ada komentarnya ga muncul...please kang mohon bantuannya,,,
<data:blogCommentMessage/>
www.jordanvengeance.com
code </div>nya di taroh di bawah apa di atas code <b:else/>?
Dan minta masukannya sedikit untuk blog saya :)
[img]http://3.bp.blogspot.com/-3pc6rTT5vNg/UiP2igsi-HI/AAAAAAAADA8/o7jzHAJDUEA/s1600/anaktimor17.bmp[/img]
Sangat bermanfaat Om
Sudah saya terapkan di blog saya dan berhasil
Terima kasih
Nice inpo
thank to share
oiya kang Bonus tombol Konvert Nya mana???
yang kayak [KONVERSI KODE] [TOP KOMEN]
Mohon dibantu
kasih kode HTML NYa Donk
karena hasil yang muncul di blog saya terlalu mepet ke kolom komentar seperti di bawah ini . . .
[img]http://1.bp.blogspot.com/-RMvpRbIYdcA/Ugte8KC8GFI/AAAAAAAAA5Y/mDHeJP-xMbE/s1600/hasil+sementara+kolom+komentar.bmp[/img]
terimakasih kang, mohon pencerahan nya
Salam
DAVID RAJA
www.DavidRaja.com
www.kevin-432.blogspot.com
^_^
btw , gimana cara membuwat lingkaran cirles ( google PLUS folloower ) yang melayang ( stiky ) di sidebar , kayak punya anda kang ....?
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode, gunakan tag ... KODE ...
• Untuk menyisipkan kode panjang, gunakan tag ... KODE ...
• Untuk menyisipkan catatan, gunakan [catatan].. TEKS ...[/catatan]
• Untuk menyisipkan gambar, gunakan [img]URL GAMBAR[/img]
ditunggu jawabannya kang!
Hatur Nuhun
Yang saya edit yang mana saja ? semuanya atau bagaimana bang ?
permasalahan sudah beres.
Good luck bang.
Adanya itu kang.? Kaga apa-apa kalo diganti.?
Infonya menarik kalo aku baca atasnya, ga tau bawahnya... |o|
[img]http://2.bp.blogspot.com/-3WLA5AtAhqs/UbbOFFGrR3I/AAAAAAAAB14/HFijNPpBXjo/s320/sa.png[/img]
punten kang sateacanna abdi seueur naros :)
#comment-editor {width:103% !important;}
sesuaikan persentasenya..
tolong bantuan nya yah mas ..
Ijin pasang di blog saya gan. .
terimakasih tutorialnya. . :-d
sangat-sangat membantu :D
[catatan]document.getElementById(domId).insertBefore(replybox, null);[/catatan]
:(
mohon bantuannya ..
document.getElementById(domId).insertBefore
Minta komentar akang tentang blog saya http://tenlibrary.blogspot.com
hatur nuhun...
Suasana blog jadi ramai bila ditambahkan pesan seperti diatas, thanks tutornya kang :D
http://nandarious.blogspot.com/
ada link donglotnya 'tue, kang? :)
<b:else/>
itu muncul ketika reply, dan yang atasnya
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
itu sebelum ada komentar pada postingan
Jangan Lupa Kunjungan Balik .. Sarannya Bang Buat Blog Saya.. <<< Bisa Bantu Bila Berkenan..
Thanks Kalo Mau bantu..
1. Edit meta tagnya yang ada di template
<meta content='YOUR BLOG DESCRIPTION HERE' name='description'/>
<meta content='YOUR BLOG KEYWORD HERE' name='keywords'/>
2. Edit Preferensi penelusuran di Dasboard
Buat Description Blog ..?
Hasih Contoh Ya Kang..!!
<meta content='Silebo Blog - Paling Unik dan Aneh' name='description'/>
<meta content='silebo, aneh, unik, ilmu pengetahuan, teknologi' name='keywords'/>
Tambahkan atau edit lagi kode di atas
Munculnya Di mana..?