Sesuai judul di atas kali ini saya akan share cara untuk memodifikasi kotak komentar blogger. Mungkin sobat blogger pernah melihat kotak komentar yang dapat memasukan video,gambar,emoticon dan elemen terlarang di dalam komentar, nah kali ini saya akan menjelaskan cara membuatnya secara lengkap dari cara mengizinkan elemen terlarang masuk ke dalam komentar sampai membuat pesan formulir komentar kren.
Berikut langkah - langkahnya :
A. Cara mengizinkan video,gambar,emoticon dan elemen terlarang masuk kedalam kotak komentar.
1. Masuk di dasbor blogger
2. Klik Template / Rancangan
3. Klik Edit html
4. Klik Prooced / Lajutkan ( jika editor baru )
5. Cari kode </body>
6. Simpan kode di bawah ini di atas kode </body>
<b:if cond='data:blog.pageType == "item"'>
<script src='https://cunayz.googlecode.com/svn/trunk/jQuery.js' type='text/javascript'/>
</b:if>
7. Cari lagi kode </head> setelah ketemu simpan kode di bawha ini di atas kode tersebut
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Add More Features to the Blogger Comments by Taufik Nurrohman */
img.emo {
display:inline-block;
vertical-align:middle;
}
#comment-holder .cm-youtube {
display:block;
border:none !important;
background-color:#333;
width:370px;
height:218px;
margin:0 auto 30px;
}
#comment-holder .cm-image {
display:block;
margin:0 auto 15px;
outline:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
padding:2px;
max-width: 95%;
}
#comment-holder code,
#comment-holder i[rel="code"] {
font:normal 12px Monaco,"Courier New",Monospace;
color:blue;
}
#comment-holder pre,
#comment-holder i[rel="pre"] {
display:block;
font:normal 12px Monaco,"Courier New",Monospace;
background-color:#333;
color:white;
padding:0.5em 1em;
word-wrap:normal;
white-space:pre;
overflow:auto;
}
#comment-holder blockquote,
#comment-holder b[rel="quote"] {
margin:0 2%;
background-color:#eee;
padding:1em 1.2em;
border-left:4px solid #7498AD;
display:block;
font-weight:bold;
font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
display:block;
overflow:hidden;
border:2px solid black;
position:relative;
width:170px;
height:100px;
margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
content:"Please enable your JavaScript to see this image!";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:red;
color:white;
font-weight:bold;
text-align:center;
padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
content:"Please enable your JavaScript to watch this video!";
}
</style>
</b:if>
7. Simpan template
1. Untuk penggunaan gambar silahkan anda gunakan tag
[img]URL Gambar[/img] atau <i rel="image">URL Gambar</i>
2. Untuk penggunaan video silahkan anda gunakan tag
[youtube]URL Video[/youtube] atau <i rel="youtube">URL YouTube</i>
3. Untuk Emoticon anda bisa gunakan seperti ini.
:) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W
4. Memasukan kode bisa menggunakan tag
<i rel="code">Kode Anda</i> atau [code]Kode Anda[/code]
5. Memasukan kode html / css / jquery bisa menggunakan
<i rel="pre">Kode Anda</i> atau [pre]Kode Anda[/pre]
6. Menggunakan blockquote di komentar bisa menggunakan tag
<b rel="quote">Kata-kata Anda</b> atau [blockquote]Kata-kata Anda[/blockquote]
B. Cara membuat pesan formulir komentar kren.
1. Centang Expand template widget (masih dalam edit html)
2. Cari kode berikut
<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%'/>
Catatan : biasanya terdapat dua kode yang sama sobat ambil kode yang berada di bawah tag <b:else/> seperti di atas
3. Ubah kode yang berwarna hijau dengan kode di bawah 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='430' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
4. Kemudian letakan CSS berikut di atas kode ]]></b:skin> atau </style>
#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
}
5. Setelah itu cari kode berikut
document.getElementById(domId).insertBefore(replybox, null);
dan ubah menjadi kode berikut
document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);
6. Simpan Template
9. 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 Stelan / Save Setting
Artikel ini bersumber dari : SYSTEM OF BLOG dan DTE (hompimpaalaihumgambreng)
- Cara Membuat Related Post Dua Kolom
- Membuat Related Post dengan Efek Ceklis
- Membuat Breadcrumb Terindex Google
- Cara Membuat Menu Navigasi Kwicks Dengan jQuery
- Load Page Blog Lebih Keren Dengan Keyframes
- Cara Memasang Script Iklan Melayang (Ads popout)
- Menu Rocking Rolling Rounded Dengan jQuery
- Trik Mempercepat Loading Home Page Blog
- Cara Membuat Title Otomatis Pada Semua Posting
- Cara Membuat Efek Rotate Miring Dengan CSS3
- Pengertian SEO On Page Dan Off Page
- Cara Membuat Valid XHTML Blogger
- Script Untuk Menghindari Para Tukang Copas
- Cara Meningkatkan Traffic Blog Dengan (Manual)
- Cara Mudah Meningkatkan Traffic Blog dengan AutoSurf
- Cara Vertifikasi Ulang Blog Ke Google Webmaster Tools
- Cara Remove Broken Link Dengan Webmaster Tools
- Cara Membuat Kota Komentar Admin Berbeda
- Menghilangkan Tulisan "Langgan: Entri (Atom)"
- Black Devil Red Horns Emoticon
- Cara Pasang Iklan di Bawah Posting
- Ablewise | Tool Buat Memprediksi PageRank
- Google Index Pages Checker
- Blogger Support Upload Favicon Sendiri
URL : http://blogcunayz.blogspot.com/2012/06/cara-modifikasi-kotak-komentar-blogger.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Modifikasi Kotak Komentar Blogger sebagai Sumbernya.
pertamak dolo lah
ReplyDeleteselamat atas pertamaxnya
Deletewihh kodenya lumayan banyak ya sob,,, bikin kompi nambah beban ya..
ReplyDeletememang banyak sob tapi ga bikin berat ko
Deletewah mantap nie, sepertinya menarik nie, di test dulu ya
ReplyDeletewah berhasil, tapi seperinya ini mengunakan bb code ya, ehm, berasa di kaskus dah.
Deletetenkyu tutorialnya ya, boleh nie di coba.
silahkan gan
Deleteoo kotaknya aja yaa yg di modiff.. lang laennya tidakk
ReplyDeleteitukan plus bisa masukin kode,emoticon,video dll sob emang mau di modif apanyalagi sob?
Deletewuiih,, element terlarang.. bahaiya tu, ntar kena sweping,,hihihihi

ReplyDeletemantep sobat tipsnya,, ntar deh ane terapkan, di bookmark dulu
weh kalo menurut saya ga bahaiya sob wkwkwk
Deletesip lah silahkan di coba kapan2
Huwee.. ternyata gitu toh caranya!!
ReplyDeleteMakanya Ayas sering nemu Kotak komentar Sobat-2 Blogger pake giniaan..
Ternyata MANTAAAAFFF BANGEEEET!!
I Like it SoMad!!
^_^
ia sekarang lagi musimnya pake ginian gan
DeleteHeheheheh bang ayas pakek dunk, biar blognya kelihatan keren?
wkwkwkwkwk

Test gambar:
Wau keren bang
Ckckckckkc sip dah?Delete
terima kasih infonya
ReplyDeletewoww,, mantabb.. bisa masukin video juga,,
ReplyDeletethank gan,emticon sama kode juga bisa
Deletehehe.. asik sebenarnya.. tapi ntar malah kasian sama blogger lain blognya jadi berat akibat isi komentar yang tidak terkontrol..

ReplyDeletekalo di moderasi malah kita yang agak repot jadinya..
bener tu mas apalagi kalau yang di masukan adalah video, maka akan tambah berat.
Delete@ affanibnu dan damas amirul karim : saya tidak memaksa untuk menerapkan trik ini
trik ini cocok dengan blog yang templatenya ringan hidup adalah pilihan begitu juga dengan trik ini agan2 
DeleteLoh kenapa berat mas?
Ini sebenernya tetap sebuah text seperti yang anda ketikkan, tapi ketika halaman termuat, dirubah oleh browser menjadi gambar, <pre>, atau <blocquote>
DeleteWew... Lengkap kali tutornya Mas Bro...
ReplyDeleteIjin praktekin iLmunya Mas Bro... Thanks,,,
Hadir perdana di istana Sobat, izin share : MP3 Inspiratif Bag. XIII, review ya Sob, thanks...
Salam bLogger,
silahkan sob
Deletewew selamat datang
salam blogger
wahh keren bener nih sob,, komentar bisa jadi lebih menarik.
ReplyDeletethank sob,, begitulah hahaha
Deletedicoba, video dr youtube..
ReplyDeleteCara Tercepat dan Terbaik dalam Membantah Tuduhan Terhadap Kaum Muslimin sebagai Teroris
http://www.youtube.com/watch?v=jeUFaC7N88A
keren sob.., thx ilmux ya.. *smile
Deleteyang pertama kurang tagnya sob wkwkwk
Deletesip sama2 sob
kenapa gak blogazine lagi gan? #OOT enyway thanks udah ngingetin
ReplyDeleteiya neh pusing stylenya di comot terus wkwkwk kalo ane ganti sama template jelek kaya gini kan engga wkwkwk
Deleteoh iya sedikit tambahan
Deletesangat menarik,

ReplyDeletetapi kodenya itu banyak banget
heehe makasih ilmunya...
wkwkwk kalo menurut saya kode segitu pendek kok mbak
DeleteBookmark aja dulu sop,ane datangnya kemalaman.biasa mau nonton bola dulu.
ReplyDeleteMakasih dah sharing,happy blogging.
silahkan sob,wkwkwk santai aja ane juga belum tidur jam segini mah
Deletesama2,happy blogging juga
apa ga nambah berat loading blog sob..??
ReplyDeletebila yang berkomentar banyak menyisipkan video dan gambar. bisa saja menambah berat blog tapi, bila hanya kode dan emoticon menurut saya tidak sob
DeleteWah kenapa berat mas, ini tetep sebuah text kok. Nanti kalau halaman sudah termuat baru dirubah sama browser menjadi gambar, video atau apa saja?
Deletekeren sob mantap, blognya udh diganti yh? gk ala blogazine lagi hhe
ReplyDeleteiya sekarang saya sudah berevolusi wkwkwkw
Deletekotak komentarnya jadi keren yach sobat???
ReplyDeleteyah begitulah kurang lebih sob
Deletetu tipsx udh share jg di blog..! qu dpt di sin1aja
ReplyDeleteiya saya juga dapat ilmunya dari sana gan sin1aja itu (SYSTEM OF BLOG) dan juga dari DTE
Deletebookmark dulu sob.....
ReplyDeleteemoticonnya kok gak bisa sob..
ReplyDeletecoba di cek di blog saya
buat jarak kata(spasi) antar emot..
DeleteKeren, tapi cukup rumit gan

ReplyDeleteLike This
ijin copas gan
ReplyDeleteThanks gan. angsung go to tkp.
ReplyDeleteKalo bisa, .....
infox keren
ReplyDelete
ReplyDeleteIjin testing Sob
Tes :

ReplyDeletetest code
:)

ReplyDeletethank you sob, kini blogku bisa dipasang gambar di komentar
ReplyDeletehttp://mathsanimation.blogspot.com/2011/09/cara-memfaktorkan-fungsi-kuadrat.html?
Test

ReplyDeletehttp://kikuta-journal.blogspot.com
DeleteADMINNYA GANTENG
test
ReplyDeletetest
ReplyDeletedari layar saya koq ada kode-kode html yang bertumpuk ya masbro, sebagiannya saya save aja
ReplyDeletesangat membantu sob... mampir juga ia http://thumber-kreatif.blogspot.com
ReplyDeletewah,,, panjang banget kode nya kang.. hehehe
ReplyDeletemau nyoba takut tar blog nya malah lemot.
nice share kang..
kerennn
ReplyDeletescriptnya ada yang bertumpuk ni masbro
ReplyDeletenice gan
ReplyDelete.. widichhhhh,, ocae juga nich ..
ReplyDeleteane udah coba gan, berhasil
ReplyDelete:D
ReplyDeleteemo
ReplyDelete:putnam:
ReplyDelete[youtube]http://www.youtube.com/user/Maroon5VEVO[/youtube]
ReplyDeleteok sob, thanks y infonya,hehe unik plus menarik.
ReplyDeletewww.terapiotak.com
http://www.doleta.gov/regions/reg05/Pages/exit.cfm?vexit=http://testttt.blogspot.com/
ReplyDelete[URL="http://www.doleta.gov/regions/reg05/Pages/exit.cfm?vexit=http://jadululolalall.blogspot.com/"]Jadi[/URL]
ReplyDelete:)
ReplyDeletetes
ReplyDeletekeren..
ReplyDeletewah,, mantap. tes dulu ya
ReplyDeleteKu Coba ya ...
ReplyDeleteNice info ...
ok mantap banget gan infonya, salam kenal aja y?
ReplyDeletekunjungi balik ya?
www.binauralbeats.co.id
wah mantap nih, sepertinya menarik nih..
ReplyDeletethanks ya infonya,,,
ReplyDeletemakasih nih sob atas infonya.
ReplyDeleteBerhasil mas, thank
ReplyDeleteMantap
ReplyDeletewah thanks ya gan
ReplyDeleteMas pada saaat saya menggunakan code ( dan saya taruh di kotak pesan itu )
ReplyDeletekenapa muncul ya mas...
tes
ReplyDeleteKeren banget jadinya, saya sudah praktekkan dan berhasil.
ReplyDeleteditunggu yah coment backnya
Komplit banget
ReplyDeletegak begitu sulit buat di terap kan
ReplyDeletekapan kapan saya praktekan .
ReplyDeletekeren sob
ReplyDeletebagus modifikasi nya gan,tk utk ilmu barunya.
ReplyDeletekunjungi kami gan
ReplyDeletekunjungan pertama gan salam kenal
ReplyDeletemakasih informasinya gan
ReplyDeletemantap gan
ReplyDeletemantap gan infonya
ReplyDelete