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:
Waw kerja keras mas :j:
@MUXLIMO 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..
@Donstera wkwkwkwk, tidak sekeras sperti yang d bayangkan mas brow... :e::D
full stylish :b:
Beben Koben si bloglang anu ganteng kalem tea :d:
@Beben Koben Terima kasih mas Koben :e:
@Aditya Meilaz Rahmanto wkwkwkwk @ Wadaw,,, bang mux bisa aja ngegombalnya.. :d:
kalau gitu ane kasih cendol aja deh, Gan.. :24: :e:
Keren Bos,, mantab jaya lengkap banget dan detail urutannya. . .
Terima kasih gan.. :e: @Effand Bocah Nozh
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:
@Ridho iya tutorialnya yang ini..
agan ikutin aja langkah-langkahnya...
demo dari tutorial ini persis seperti kotak komentar yang ane pake sekarang..
@Aditya Meilaz Rahmanto ok gan, tapi sekarang emoticon nya yang gak muncul :a:
@Ridho gan, ane yakin ente ada yang hapus dari scriptnya, makanya emot g berjalan... /blur
ane saranin ikutin ulang langkah 4 yah.. :34:
@Aditya Meilaz Rahmanto ok gan udah sukses
masama gan, semoga bermanfaat /bye
@Ridho
di langkah ke5 masih kurang ngerti gan, :a:
ganti ke-4 kodenya kode yg mana ya?? hehe :e:
@Fauziah Azahra 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
@Fauziah Azahra 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
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
@didead g sukses sprt apa gan.?? :c:
bisa krimin sy link blog agan..??
@Yandiie Moelyadi 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: @didead
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
@Ridho 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:
@Fauziah Azahra 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
@Fauziah Azahra 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?
@Najwa Rahman 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?