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)
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 [img]http://static.kaskus.co.id/images/smilies/malu.gif[/img]
ReplyDeletewah berhasil, tapi seperinya ini mengunakan bb code ya, ehm, berasa di kaskus dah. [img]http://static.kaskus.co.id/images/smilies/s_sm_ilovekaskus.gif[/img]
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 :D
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? :D wkwkwkwkwk
DeleteTest gambar:
[img]http://static.ak.fbcdn.net/images/blank.gif[/img]
[blockquote]Apapun yang terjadi[/blockquote]
[pre]Top Markotop[/pre]
[code]Wau keren bang[/code]
Ckckckckkc sip dah?
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? :D 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
http://www.youtube.com/watch?v=jeUFaC7N88A
Deletekeren 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
Delete[blockquote]blogazine kan tidak perlu template khusus,template ini juga bisa di gunakan untuk blogazine[/blockquote]
sangat 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? :D
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 :D
buat jarak kata(spasi) antar emot.. :D
DeleteKeren, tapi cukup rumit gan :)
ReplyDeleteLike This :)
ijin copas gan :)
ReplyDeleteThanks gan. angsung go to tkp.
ReplyDeleteKalo bisa, .....
[blockquote] Kunjung balik yaa... http://infoiki.blogspot.com [/blockquote]
infox keren
ReplyDelete[code]Ijin testing Sob[/code]
ReplyDelete[blockquote]Ijin testing Sob[/blockquote]
Tes :
ReplyDelete[img]https://lh6.googleusercontent.com/-KVtaPKwi-24/T49tTDh2mTI/AAAAAAAACdw/fbPv0j9yeVI/s245-c-k/Nikmahku.jpg[/img]
[code]test code[/code]
ReplyDelete[blockquote]test quote[/blockquote]
:) :( =( :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
[blockquote]Kunjungan Sob[/blockquote]
ReplyDelete[code][img]http://crazyfuz.blogspot.com[/img][/code]
thank you sob, kini blogku bisa dipasang gambar di komentar
ReplyDeletehttp://mathsanimation.blogspot.com/2011/09/cara-memfaktorkan-fungsi-kuadrat.html?
Test
ReplyDelete[youtube]http://www.youtube.com/watch?v=3j9K9orQ-_Q[/youtube]
[code]http://kikuta-journal.blogspot.com[/code]
[img]http://i4.ytimg.com/vi/3j9K9orQ-_Q/mqdefault.jpg[/img]
[code]ADMINNYA GANTENG[/code]
Deletetest :D
ReplyDeletetest :D
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 :D
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[blockquote]tes[/blockquote]
ReplyDelete:)
ReplyDeletetes :)
ReplyDeletekeren.. \m/
ReplyDeletewah,, mantap. tes dulu ya \o/
ReplyDeleteKu Coba ya ...
ReplyDeleteNice info ...
ok mantap banget gan infonya, salam kenal aja y?
ReplyDeletekunjungi balik ya?
www.binauralbeats.co.id
[blockquote]Mantap rtikelnya mas, terimakasih banyak sudah berbagi[/blockquote]
ReplyDeletewah mantap nih, sepertinya menarik nih..
ReplyDeletethanks ya infonya,,,
ReplyDeletemakasih nih sob atas infonya. :)
ReplyDeleteBerhasil mas, thank :)
ReplyDeleteMantap :D
ReplyDeletewah thanks ya gan :)
ReplyDeleteMas pada saaat saya menggunakan code ( dan saya taruh di kotak pesan itu )
ReplyDeletekenapa muncul ya mas...
tes :p Jangan di klik
ReplyDeleteKeren banget jadinya, saya sudah praktekkan dan berhasil.
ReplyDeleteditunggu yah coment backnya :D
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