Cara Membuat Komentar Blog Seperti Wordpress

Cara Membuat Komentar Blog Seperti Wordpress

Tutorial kali ini akan menjelaskan cara membuat komentar bertingkat seperti wordpress. Tutorial ini tidak menggunkan threaded comment blogger yang baru, tetapi menggunakan sistem komentar lama, dan dimodifikasi sehingga menyerupai komentar wordpress (wordpress threaded comment).

Untuk membuat threaded comment pada system komentar blogger yang baru (baca: Cara Mengaktifkan Threaded Comments Pada Blogspot). Untuk tutorial kali ini, kita akan membuat threaded comment pada sistem komentar lama, seperti screenshoot di bawah ini:


Berikut adalah cara membuatnya :

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML.

2. Menjaga kegagalan, backup dulu template anda ---> Download Template Lengkap.

3. Centang Expand Template Widget.

4. Tambahkan kode dibawah ini diatas ]]>
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjti-JIBXs4eiCP_rYU5XPtVLnqN2RhWyc_rsODloQriqnUv7jtvDyPllgoz4CJhvBDPiaCfTWYjUVM_0i7n636SEQaYQzUONB_LdwWdZ5rlIR-IKtF5vShl8tS7AEmVXfcBIE1EcX3RYc/s1600/takdikenal.jpg) center no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOE_UWkEFZDqdqk_1e231eX5BFgQ75mNYCwBlyNRrBPeWzluOTliirrXiKoNEhv3G4uC0AX48RTqlefPZ82xgrlfJOZd2qgLLmtZLLAu-MdGLnyus3T0y0vr4V_uJO4SzXkhOTI8Fqfr8/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
float: left;
}
.cm_name_a {
font-family:"Comic Sans MS", cursive;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Comic Sans MS", cursive;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #ffffff;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.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;
}
/* Comment Admin */
.comment-body-author {
font-family:"Comic Sans MS", cursive;
font-weight: 300;
}

5. Tambahkan kode dibawah ini sebelum tag </body>.

<script src='http://sagita-com.googlecode.com/svn/coments.js' type='text/javascript'/>

Nah, berikut ini langkah yang lumayan rumit, karena dibutuhkan konsentrasi yang maksimal agar dapat mengikutinya dengan baik, kode berikut berpengaruh besar pada komentar pada blog Anda, karena dengan kode di di bawah ini akan merubah keseluruhan tampilan komentar pada blog Anda agar sama seperti wordpress.

6. Selanjutnya, silahkan cari kode pembuka <b:includable id='comments' var='post'> dan ditutupi dengan kode </b:includable>.

Diantara kode tersebut didalamnya terdapat kode yang harus Anda ganti dengan kode baru, dan Anda harus meletakan kode baru di bawah ini di antara kode yang sudah ditentuakn, perhatikan langkah-langkah di bawah ini.

<b:includable id='comments' var='post'>

Kode lama Anda yang harus diganti dengan kode baru.

</b:includable>

7. letakan kode baru di bawah ini diantara kode <b:includable id='comments' var='post'> dan </b:includable>.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<script type='text/javascript'>document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%77%77%77%2E%74%75%74%6F%72%69%61%6C%2D%73%61%67%69%74%61%2E%74%6B%2F%32%30%31%32%2F%30%35%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%6B%6F%6D%65%6E%74%61%72%2D%62%6C%6F%67%2D%73%65%70%65%72%74%69%2E%68%74%6D%6C%27%20%73%74%79%6C%65%3D%27%66%6F%6E%74%2D%73%69%7A%65%3A%39%70%78%3B%66%6C%6F%61%74%3A%72%69%67%68%74%3B%6D%61%72%67%69%6E%2D%72%69%67%68%74%3A%35%70%78%3B%27%20%74%61%72%67%65%74%3D%27%5F%62%6C%61%6E%6B%27%3E%62%79%20%73%61%67%69%74%61%3C%2F%61%3E'));</script>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> <data:commentLabelPlural/>
<b:else/>
<span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/>
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<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'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=0000000000000000000&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEqt9PW94p4-Qsvo4sjwEwQ3bRPXLBkwg7sXxnmPO9miFzrOmoq446eVw2HfwCF9Jfmd1M5wZ6qO9lhp31n02rGxC-cNqTTxcKIlGDt11WUlV8rOpQkOGEFtDoDQvBEdnSRW_sF88xMH4/s1600/adminstar.png' title='Admin' width='20px'/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
<span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span>
</dd>
</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>
Untuk blogID=0000000000000000000, silahkan Anda ganti dengan blogID pada blog Anda, blogID berada pada address bar halaman template anda, contohnya seperti ini :



8. Simpan Template.

Semoga bermanfaat !

+ komentar + 37 komentar

5 Mei 2012 pukul 11.38

thanks tutorialnya sob

11 Mei 2012 pukul 17.09

Nice share ... Makasih banyak tutorialnya ..

Anonim
7 Desember 2012 pukul 22.33

Test dulu.

Anonim
18 Januari 2013 pukul 00.05

Test

25 Januari 2013 pukul 14.51

sippp... mantap

25 Januari 2013 pukul 14.52

test......

25 Januari 2013 pukul 14.56

test,..... lagi

25 Januari 2013 pukul 16.41

Mantab kan ?

25 Januari 2013 pukul 16.44

:-bd :-bd :-bd

29 Januari 2013 pukul 19.55

\o/ keren..!!

31 Januari 2013 pukul 10.09

Masak sih kak ?

1 Februari 2013 pukul 01.44

beneran`tinggal dikit lagi agak kurang dalam warna !! jngan ijo kalau bisa.. :D

komentarnya kaya mas taufik ini original atau editan lagi?
mantep.

1 Februari 2013 pukul 13.41

Tapi aku suka warna ijo nh kak.....

iya nih, aku pelajari sytem-sistem komentarnya dari kak taufik, sumanya telah di bahas disana, cuma aku edit sana-sini agar menyerupai punya kak taufik.

:D :D :D

1 Februari 2013 pukul 20.45

like this bisa minta kah code seperti itu?

1 Februari 2013 pukul 22.53

he he....

rahasia dong.....

aku menghabiskan beberapa hari cuma untuk utak-utik nemuin codenya ini.

tapi dasarnya ada di sini,

silahkan dipelajari, dan semoga berhasil !

4 Februari 2013 pukul 08.51

maaf`ba formulir komentar punya saya malah gini ya?

http://4.bp.blogspot.com/-MMihuDKj5Hw/UQ8TYASZWvI/AAAAAAAAGZk/nhE6Op_OWMQ/s400/Heroes.jpg

Malah ruksak..

4 Februari 2013 pukul 21.10

System komentar anda keseluruhan bukan dari tutorial diatas, jika memang inginsystem komentar seperti diatas silahkan mulai dari awal.

apakah wajar system komentar bukan dari tutorial disini komplainnya disini ?

5 Februari 2013 pukul 23.12

saya sudah coba tutorial di atas tapi tetep sama..!! =(
contoh di bawah

http://4.bp.blogspot.com/-tPUQuOHjpDU/UREu3SEwqaI/AAAAAAAAAC0/f9Yv6WbuFyc/s320/zewDsignet+1.jpg

penempatan delete dan tanggal malah ga beraturan.

5 Februari 2013 pukul 23.51

cek dulu ba..!!
biar tau kesalahanya dmna.

http://azewcreator.blogspot.com/2013/02/terima-kasih.html?showComment=1360079570051#c4134200970580212524

6 Februari 2013 pukul 22.19

System Komentar Anda code css-nya tidak sesuai dengan tutorial diatas, contohnya ini :

.cm_entry .para {
padding:5px 10px 7px;
margin:2px 0 0;
clear:both;
border:1px solid #555;
background-color:#444;
word-wrap:break-word;
}
.cm_entry .para.deleted-by-js {color:#bbb}
.cm_entry .para.deleted-by-js textarea {
width:98%;
height:120px;
display:block;
margin:24px auto;
}
.comments .no-js:target .cm_entry {border:2px solid yellow}
.comments .no-js:target .avatar-image-container {
border:5px solid yellow;
padding:0 0;
}


Dan untuk langkah no 6 dan 7 saya tidak melihat code seperti diatas. sekali lagi jika memang mau komplain atas tutorial di atas samakan dulu seluruh system komentar anda seperti diatas.

6 Februari 2013 pukul 22.33

Coba Anda lihat screenshot pada postingan diatas, setelah itu lihat tampilan system komentar pada blog anda, apakah sama dari warna, sytem reply dll, dan keseluruhan code css, html, dan script sama sekali tidak seperti diatas.

6 Februari 2013 pukul 23.54

Pada langah no 7 emang seperti itu supaya komentar milik embba atau di edit lagi?

maaf bnyak naya masih belajar soal edit" kaya gini.
dan susahnya minta ampun :D

6 Februari 2013 pukul 23.57

saya sudah mengikuti langkah di atas sama percis bentuk komentarya..!! :D

yang jadi inti permasalahan
dari langkah no 7 dan penempatan CSS harus di edit lagi?
atau cuman CSS ya aja??

7 Februari 2013 pukul 07.58

Intinya, hapus seluruh code css, html, script system komentar anda, dan ikuti langkah diatas step by step dulu dari langkah 1 sampai selesai, dan setelah berhasil silahkan edit tampilannya sesuai selera.

7 Februari 2013 pukul 09.59

Mksudnya`hapus seluruh code? Css di atas atau semua yg ada pada template?

siap saya coba dulu :D

8 Februari 2013 pukul 08.09

Bukan keseluruhan, cuma code css komentar saja, dan setelah aku cek udah jadi tuh, coba saja anda memahami komentar balasanku dari awal, mungkin sudah jadi dari kemari-kemarin.

11 Februari 2013 pukul 02.36

ba kalau mau ngerubah tombol delete gimana seperti komentar punya embba. yg saya seperti ini:
Contoh:
http://3.bp.blogspot.com/-55209epOBLU/URf2VewnX0I/AAAAAAAAAKg/zNicb_zdsl8/s320/zewBz.jpg

ampe bingung 3hari ga kelar" ini bikin komentar kaya punya mas taufik dan embaa..!! =(

19 Maret 2013 pukul 10.54

oh'y sudah kami coba dek lihat hasilnya di sini
http://bingkaiframes.blogspot.com/2012/12/koleksi-uang-lama.html

kira2 apa nya yang kurang

22 Maret 2013 pukul 22.16

tapi bisa ga Kalau nofitifikasi komentarnya diginiin
Misalnya Kamu berkomentar 1 pas diklik Membuka tab baru dan Yg muncul nofitifikasi komentar tadi

22 Maret 2013 pukul 22.22

bisa ga dibikin jadi widget

15 Juni 2013 pukul 23.45

Owalahh, haha, rancu aku melihatnya -_- lebih baik tampilkan hasil sendiri aja deh aku :p

Posting Komentar

 
Copyright © 2011. TSC - All Rights Reserved

Distributed By Free Blogger Templates | Lyrics | Songs.pk | Download Ringtones | HD Wallpapers For Mobile

Proudly powered by Blogger