Perlu diketahui sebelumnya bahwa thread comment ini bukan thread comment resmi (not official) dari blogspot.
Sebagai pembeda dari tutorial yang lainnya, di dalam kotak komentar ini langsung saya aplikasikan dengan kumpulan emoticon lucu-lucu untuk menghiasi setiap komentar dari anda maupun dari pengunjung blog anda.
Jadi jika ada yang ingin mencobanya, silahkan mengikuti tahap-tahap pemasangan seperti di bawah ini.
Langkah 1
Buka template anda, kemudian temukan kode ]]></b:skin>, lalu copy paste kode CSS di bawah ini tepat dibagian atas dari kode tersebut.#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 15px;
float: right;
width: 100%;
}
#cm_block img {
margin-bottom: -4px;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar, .cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
border: 1px solid #ddd;
color: #424242 !important;
text-align: center;
text-decoration: none;
background: #EDEDED;
font: normal 11px sans-serif;
width: 42px;
}
.cm_reply a:hover {
text-decoration: none !important;
background: #ccc;
}
.cm_entry, .cm_entry_a {
padding:0;
overflow: hidden;
border-bottom: 1px dotted #DDD;
padding-bottom: 12px;
}
.cm_info {
margin-bottom: -12px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 3px;
}
.cm_info_a {
margin-bottom: -12px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 3px;
}
.cm_name, .cm_name_a {
font-size: 12px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
}
.cm_entry p, .cm_entry_a p {
padding: 5px;
clear: both;
font-size: 11px;
color: #333;
word-wrap: break-word;
margin-left: 45px;
line-height: 2em;
text-align: left;
}
.cm_entry p {
border-left: 5px solid #f4f4f4;
}
.cm_entry_a p {
border-left: 5px solid #Dff0fa;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
.avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-JfASUoXjbMpzCzn9KHlac9rH2w6Gg643czHXntT7lsVqzoNpc2wxsUZnk452OGyNP_F5cwOSscDL6102od_ezxmyQsoJ4kSU8x2ydULNNcDmx_sCjYtk-tD8qKG283XwIPvRGRq8GOWd/s80/none.jpg);
width:35px;
height:35px;
background-size: 35px;
}
.avatar-image-container img {
border:none;
}Langkah 2
Untuk langkah ke-2 ini merupakan kode untuk memasang animasi emoticonnya.Jika anda tidak berminat, langkah 2 ini bisa anda lewatkan.
Temukan kode dibawah ini.
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3 id='comment-post-message'>Tinggalkan Komentar Anda?</h3>
<data:blogCommentMessage/>
<data:blogTeamBlogMessage/>
[hg]<!-- PASTE KODE EMOTICON DISINI -->[/hg]Kemudian paste kode emoticonnya pada bagian yang sudah ditandai dari kode di atas.
<div style='padding-top:10px;padding-bottom:10px;text-align:center;font-weight:bold;color:#000;font-family:Consolas'>
<p><img src='https://lh3.googleusercontent.com/-VPFJ5upIUr8/T3xngKoCzOI/AAAAAAAAAz0/D7EkLYZ9mBM/s40/nangis.gif' width='20'/>
:a:
<img src='https://lh6.googleusercontent.com/-3RJT4NMWj88/T3xnZIgRTCI/AAAAAAAAAzQ/AuuMTIl40Qs/s40/80.gif' width='20'/>
:b:
<img src='https://lh6.googleusercontent.com/-4rZhB1CD3IM/T3xnFOPZ7GI/AAAAAAAAAww/dJKJFsqGYQk/s40/02.gif' width='20'/>
:c:
<img src='https://lh4.googleusercontent.com/-68KGBsXatAs/T3xnXZiG7fI/AAAAAAAAAy8/lhB4nok64_o/s43/77.gif' width='20'/>
:d:
<img src='https://lh6.googleusercontent.com/-Dl8yM83bKHg/T3xnSnk_jmI/AAAAAAAAAyk/6sgxqO_A9Dg/s43/48_002.gif' width='20'/>
:e:
<img src='https://lh3.googleusercontent.com/-LXzka_RPYgQ/TT2zPByhY-I/AAAAAAAAANw/AcYqSXLCMZI/s67/kaget.gif' width='20'/>
:f:<br/>
<img src='https://lh4.googleusercontent.com/-94tN1oyCYzg/T3xneURSxDI/AAAAAAAAAzg/0WG08Ap6X-I/s32/grrr.gif' width='20'/>
:g:
<img src='https://lh5.googleusercontent.com/-ac_eULIx1Jw/T3xnSKTsERI/AAAAAAAAAyg/qpsphdSP56c/s48/39_002.gif' width='20'/>
:h:
<img src='https://lh3.googleusercontent.com/-UpngvG3T1n8/T3xnIbjZ95I/AAAAAAAAAxU/OqmQ9Gv7oXM/s40/17_002.gif' width='27'/>
:i:
<img src='https://lh5.googleusercontent.com/-PGhZnP_3zZY/T3xnW4s9RnI/AAAAAAAAAy4/wqMUf3cX9O0/s58/51_002.gif' width='25'/>
:j: <br/><br/>
<a OnClick='window.open("http://adityas.vacau.com/", "popupwindow", "scrollbars=yes, width=550, height=520");return true' href='javascript:void(0);' rel='nofollow'>Emotion lainnya?</a></p></div>Langkah 3
Temukan kode </body>,lalu letakkan kode di bawah ini pada bagian atas kode </body> tersebut.Langkah 4
Temukan kode seperti di bawah ini.<b:includable id='comments' var='post'>
<!-----------------------------------------
-----------------------------------------
---- HAPUS SEMUA KODE DALAM AREA INI ----
-----------------------------------------
----------------------------------------->
</b:includable>Setelah anda menghapus kode yang berada dalam bagian yang ditandai lalu paste kode dibawah ini.
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>
Belum Ada Komentar
<b:else/>
<span id='cm_total'><data:post.numComments/></span> Respon Komentar
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<script type='text/javascript'>
jml = 0;
</script>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
[hg]<a expr:href='"https://www.blogger.com/comment.g?blogID=GANTI-DENGAN-ID-BLOG-ANDA&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#comment-msg"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>[/hg]
</div>
</div>
<b:else/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
[hg]<a expr:href='"https://www.blogger.com/comment.g?blogID=GANTI-DENGAN-ID-BLOG-ANDA&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#comment-msg"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>[/hg]
</div>
</div>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
<b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
<b:else/>
<data:comment.author/>, said...
</b:if>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p class='adityas-blog-thread-comments'><data:comment.body/></p>
</div>
<b:else/>
<p class='adityas-blog-thread-comments'><data:comment.body/></p>
</b:if>
</div>
<b:else/>
<div class='cm_entry'>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
<b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
<b:else/>
<data:comment.author/>, said...
</b:if>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p class='adityas-blog-thread-comments'><data:comment.body/></p>
</div>
<b:else/>
<p class='adityas-blog-thread-comments'><data:comment.body/></p>
</b:if>
</div>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>Perhatikan kode yang sudah di tandai. Di sana anda akan menemukan tulisan GANTI-DENGAN-ID-BLOG-ANDA. Ganti tulisan tersebut dengan ID BLOG anda.
Untuk mengetahui ID BLOG, perhatikan gambar dibawah ini. Misalkan anda sedang membuka halaman Edit Template.
Dalam kotak berwarna merah merupakan ID BLOG anda.
Untuk mengetahui ID BLOG, perhatikan gambar dibawah ini. Misalkan anda sedang membuka halaman Edit Template.
Langkah 5
Coba anda temukan kode seperti di bawah ini. <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>Jika anda menemukan kode di atas (biasanya terdapat 4 kode sama), ganti ke-4 kode tersebut dengan kode di bawah ini
<b:include data='post' name='comments'/>Terkahir, simpan template.
Good Luck.!
42 Respon Komentar
Wow! Kerja keras nampaknya nih, Mas Adit semalaman bikin tutorial keren ini. Mas Adit emang tutor blogger baik hati..selalu sedia bantu temen-temen yang perlu bantuan. :w: salut pokoknya, Mas! Beruntung banget tu temen yang minta tolong. Sebab dia minta tolong ke orang yang tepat, heheehehe :m:
Btw, gak ada demo-nya, ya Mas? Atawa semalam keburu ngantuk..? :x:
Wadaw,,, bang mux bisa aja ngegombalnya.. :d:
Artikel sejenis dah banyak juga mas jadi g susah buat bikin tutorialnya.. :e:
Ane rasa demo g perlu mas cz Demo'a langsung ane terapin langsung di kotak komentar yg ane pake..
wkwkwkwk @ Wadaw,,, bang mux bisa aja ngegombalnya.. :d:
kalau gitu ane kasih cendol aja deh, Gan.. :24: :e:
Waw kerja keras mas :j:
wkwkwkwk, tidak sekeras sperti yang d bayangkan mas brow... :e::D
full stylish :b:
Beben Koben si bloglang anu ganteng kalem tea :d:
Terima kasih mas Koben :e:
Keren Bos,, mantab jaya lengkap banget dan detail urutannya. . .
Terima kasih gan.. :e:
bro gimana cara membuat form komentar blog saya jadi seperti punya agan ini? reply nya masuk kedalam, tapi model komentarnya kayak agan ini dan emoticonnya :k:
iya tutorialnya yang ini..
agan ikutin aja langkah-langkahnya...
demo dari tutorial ini persis seperti kotak komentar yang ane pake sekarang..
ok gan, tapi sekarang emoticon nya yang gak muncul :a:
gan, ane yakin ente ada yang hapus dari scriptnya, makanya emot g berjalan... /blur
ane saranin ikutin ulang langkah 4 yah.. :34:
ok gan udah sukses
masama gan, semoga bermanfaat /bye
di langkah ke5 masih kurang ngerti gan, :a:
ganti ke-4 kodenya kode yg mana ya?? hehe :e:
di Langkah 5 kan agan d suruh nemuin kode...
kode yang di GANTI adalah kode di bawah ini... (Cari kode ini)
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
* Jika kode yang agan cari sudah terdapat di dalam template blog agan....
GANTI kode tersebut dengan kode di bawah ini.
<b:include data='post' name='comments'/>
Maksudnya, agan di suru timpa kode yang di cari dalam template.
Kode yang di cari itu biasanya terdapat 4 kode yang sama (di tempat yang berbeda)..
Sebanyak 4 kali juga agan di suru timpa kode tersebut.
mudah"an penjelasan ane mudah di mengerti sm agan.. :e:
udah di timpa, tapi masih gabisa.. :a:
oia, kode nya itu yg sama cuman ada 2 kalo di saya. hhe
hadeuuh bingung sendiri /blur
Gini aja neng biar g ribet...
templatenya d kirim k email saya aja, biar sy yg bantu gmn..??
adityamr15@gmail.com
waaah, emg maunya sii gitu hehe :y:
okee" ntar saya kirim..
makasi ya gan, jadi ngerepotin niih :e:
g sukses gan /floor /blur
g sukses sprt apa gan.?? :c:
bisa krimin sy link blog agan..??
Gan masa Fitur Emoticonnya gak bisa Contoh Kan saya taruh kode upin ipin yang :[ama tulisan f]: nah pas dicoba malah jadi begini :[amatulisanf] tanpa ada gambar emoticonnya ! http://narutositez.blogspot.com/2012/06/cara-remixkan-diri-dengan-virtual-dj.html mohon diliat pliz
ane dh blas pesan d page facebook gan.. :e:
efisiensi99.blogspot.com
kyk g ada prubhan sma skli gan...n emo nya jg g nongol...
tlong bntuannya y gan...:a
gan, ane dh lihat source d blog agan..
di sana emticon g muncul cz agan kayaknya g masang kode" emoticon pada Langkah 2..
Fungsi thread comments juga g berfungsi dengan baik karena ada salah cetak dalam javascript tersebut...
agan bisa mengulang lagi Langkah 3 dan ganti kode javascript yang sudah ada sebelumnya...
ane dh coba ninggalin komentar d salah satu artikel agan dan mencoba fungsi emoticon, dan emoticon work 100%... :c:
wah iya...kok mncul y?
trz yg lngkah 2 itu d html ane nemu 4 ""
hrus di copas dmn gan?yg sblmnya ane copas ke yg prtma gan...
yg lngkah k 3 itu emang klo dpaste jd pnjang gt y gan?kan aslinya pndek...
saya kembali :), gan gimana membuat fungsi scroll di theathed comment ini gann
Di bagian CSS #comments tambahin overflow : auto;
height : 400px;
nilai height tergantung selera agan... :)
gan, masa gagal pas saya coba, hhe :e: coba agan cek http://storyfauziah.blogspot.com/ yg keluar malah kode" yang di atasnya, :c:
kira" kesalahnnya dimana ya gan?
terimakasih :n:
sis, kode CSS nya knapa bisa di body..??
tanpa tag <style> juga...
pantesan keluar code di atas..
pastikan lagi sis, klo penempatan CSSnya g salah...
klo masih bermasalah, krim aja yah template'a lagi...
hmmm :)
udah ga keluar lagi kode yg di atas gan,
tapi emoticonnya yg ga muncul, hehe :e:
tag style nya itu yg mana ya gan?
hhe mau nyoba mandiri dulu gan, kalo udah pasrah
baru deh minta btulin, hhe /hmm
tag <style> untuk CSS...
Dari Langkah 1
ga muncul juga :a:
kalo ga ngerepotin,
boleh pasangin emoticonnya ga gan? hehe :e:
entar saya kirim templatenya,
terimakasih :y:
gimana supaya tombol reply-nya tidak popup? trims sebelumnya dan mohon dicari solusinya gan?
ane udah coba ngulik scriptnya gan tapi dari pihak blogspotnya menanam script di dalam halaman comment form yg fungsinya menolak untuk d tampilkan jika melalui iframe dll kecuali dr window baru..
itu salah satu alasan keamanan saja dr spam dsb... CMIIW
:q: wah pencerahan neh ,,,, mo di coba dlu...
Siipp :a:
Salam om,, makasih emoticonya.. ijin rewrite yah :e:
saya yg versi I berhasil tapi yang versi II kok gagal yah,, bantuannya dunk gan :c:
Ok Sippp.... trims kang brow...
Tinggalkan Komentar Anda?
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar
Emotion lainnya?