Cara Membuat Kotak Komentar Wordpress di Blog Blogger

Cara Membuat Kotak Komentar Wordpress di Blog Blogger. Beberapa waktu yang lalu tepat ketika gencar2nya para blogger yang ber-platform Blogspot ingin memiliki kotak komentar seperti wordpress, yaitu kotak komentar yang memiliki fitur "Reply"...saya jadi ikut-ikutan buat mencari informasi. Ternyata ada beberapa Blogger Indonesia yang sudah membahas tutorial untuk hal tersebut, namun sayangnya masih belum sesuai dengan keinginan...yaitu simple dan tetap kelihatan menarik.

Walau begitu, tak berarti trik tersebut tak ada alias tak ada yang bisa membuat atau menemukannya. Tepat di awal tahun 2012 ini saya dapat berita gembira dari seorang teman Blogger saya...sebut saja dia Ka' Damar, wkwkwk...yapz pemilik blog yang beralamatkan di prasutan.blogspot.com tersebut memberitahu saya bahwa trik untuk membuat kotak komentar wordpress di blog Blogger yang ada tombol "reply" itu telah ditemukan oleh orang luar...saya belum tahu pasti dia orang mana...yang jelas ini alamat blognya sob http://artistutorial.blogspot.com/2011/09/threaded-comments-for-blogger-comment.html
Penasaran bagaimana hasilnya?
Silahkan lihat di blog saya yang satunya atau klik di sini
Bagi sobat yang tertarik untuk membuat kotak komentar tersebut, maka bisa lihat tutorial di situs aslinya...
Tapi bagi sobat Blogger yang merasa sulit, maka bisa mengikuti tutorial berikut (sesuai dengan sumbernya)

1. Silahkan login ke Blogger anda
2. Klik "design" atau "rancangan"
3. Jangan lupa untuk mencentang kotak "expand widget templates"
4. Silahkan untuk meletakkan kode CSS berikut di atas kode ]]></b:skin>

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
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: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.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;
}

5. Letakkan script berikut di atas kode tag </body>

6. Langkah terakhir, perhatikan kode berikut...cari kode <b:includable id='comments' var='post'> untuk mempermudah...

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

Kode yang harus sobat ganti...

</b:includable>

Di bagian tulisan yang berwarna merah di atas adalah kode2 yang harus sobat ganti dengan kode berikut...

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'></div>

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

<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='"https://www.blogger.com/comment.g?blogID=154513103004606848&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#form"' 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>
</div>
</div>

<div class='cm_entry'>
<span class='cm_arrow'></span>
<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>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>

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

<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>

Jangan lupa: ganti ID BLOG yang telah saya tandai warna merah dengan ID Blog milik sobat. Jika kesulitan untuk mendapatkannya, silahkan untuk memperhatikan gambar berikut

Atau dengan tampilan lama...

Nah, bagian yang telah di-highlight (kuning) tersebut lah yang disebut ID BLOG :D

Sekarang silahkan di-save hasil kerjaan anda
=> Silahkan lihat hasilnya di blog anda. Jika ternyata gagal padahal sudah menerapkan trik yang sesuai, silahkan untuk menghubungi si pembuat tutorial melalui email: artistutorials[at]gmail[dot]com

Semoga bermanfaat...

Tags: Cara membuat komentar wordpress, komentar wordpress di Blogger, membuat reply pada blogspot, tombol reply untuk blogspot

29 comments

Ka Damar

8 Januari 2012 14:53

mangtab gan . . . keep posting.
Mari makan tongseng :D

Nurmayanti Zain

8 Januari 2012 16:12

mantap :D

ubay

12 Januari 2012 04:24

sudah dicoba mas.. siip dah..

jasa penerjemah

12 Januari 2012 15:40

nahhh...ini sob yg saya cari, buat blog saya yang baru...salam sukses selalu.thanks

SEO | Computer

13 Januari 2012 11:29

Tutorial yang berguna gan.. Oya, izin tukar link, ditunggu konfirmasinya. Thanks

Ristia Yuanita

14 Januari 2012 02:32

Kalo yang ini sih lebih dari manfaat mas. thanks ya share nya

optimasi seo

14 Januari 2012 22:40

hai,, artikel kamu bagus. oh ya aku sudah udah join kamu di Google Friend Connect. Join q juga, please...thank you.

Widhi

15 Januari 2012 22:40

COba dulu kang. soalnya leave comment ane standart bawaan templatenya :D

Kunjungi blog ane juga ya gan. thanks

dede

15 Januari 2012 23:46

i like post!!!
thanks sangat membantu!!!
:)

Widodo

16 Januari 2012 20:56

makasih tipsnya sob bisa di coba nih

Mas Sugeng

18 Januari 2012 06:11

Mantap tutorialnya gan, ini yang sedang ane cari cari Adrian Firmansyah | Blogger Newbie Bekasi

indahnya berbagi hal unik

18 Januari 2012 23:37

bagus infonya mas, izin pakai ya.

Azrina

20 Januari 2012 03:18

makasi tips nyaaa :D hihi useful bgt!

Ramy

21 Januari 2012 05:53

makasih mas tipsnya, nambahin dikit setelah saya coba, itu background nya kan source nya dari imageshack, tapi malah jadi gambar kodok beku. Jadi lebih baik diganti atau dihilangkan aja background avatarnya :D

Iqbal

21 Januari 2012 10:43

Hahaaha...pikiran e tongseng ae..
Ki aku ge' bar ngubah kotak komentar e ben iso nge-reply...heehe

21 Januari 2012 10:44

Yupz, sama2...
Untuk tukar link, silahkan surfing ke halaman berikut:
http://t4belajarblogger.blogspot.com/p/link-exchange.html

#Semoga membantu

21 Januari 2012 10:46

Oke...thanks masukannya sob
:D

Greenz

27 Januari 2012 05:16

mantap gan
follow blog gue ya http://greenz-somethingnew.blogspot.com/
thanks atas infonya
numpang copas

Mustika

27 Januari 2012 08:45

ma kasih info nya yah mas..salam dari ayu mustika

Valghan

28 Januari 2012 21:54

Good job dude...keep blogging!
:12

Maulana Yazid Al Annuri

29 Januari 2012 03:19

Wow.. websitenya sangat menarik ya !!!
Banyak Info yang bisa saya dapatkan disini
Moga-moga engunjungnya makin ramai
Numpang promosi ya !!!
Jual DVD games PC termurah terlengkap berkualitas 5000/DVD, beli >50 DVD = Rp 4000/DVD kunjungi http://pcgamemura.blogspot.com/
Jual accessories hp nokia, bb, sony ericsson original termurah kunjungi http://accesorieshpmura.blogspot.com/
Tips menambah tinggi badan dengan cepat dan akurat ada di http://growtallerfastly.blogspot.com

Anonim

30 Januari 2012 00:43

mau 1 dollar gratis per bulan??? silahkan klik http://signup.wazzub.info/?lrRef=d1dda , udah banyak yang daftar, jangan sampe lo ketinggalan

Idesainer

7 Februari 2012 21:52

Kok Kotak Komentar blog ini gak pake seperti tutorial diatas ya,,,,

10 Februari 2012 10:27

@Maulana Yazid Al AnnuriAmiiiien....tanks kunjungannya sob...
:D

10 Februari 2012 10:29

@IdesainerBukan tidak pakai sob, tapi belum pake.
Sekarang suda menerapkan tutorial di atas. Tanks telahg berkunjung sob...
Keep blogging :D

KIDFiveThree

18 Februari 2012 02:29

HELP gan...!!
di blog saya..
avatar pengguna terdaftarnya ko gak muncul ya???
yg muncul malah avatar milik pengguna anonim..

18 Februari 2012 06:51

@KIDFiveThreeGa jadi gan...
udah bisa..
hehe

Junior Iqfar

18 Februari 2012 19:29

wah ini info bagus sekali...
thks bang...

19 Februari 2012 04:52

@KIDFiveThreeSip-sip... :D
Jika hal tersebut terjadi lagi, sobat tinggal me-refresh halaman blog sobat...
Semoga membantu. Keep blogging!

Poskan Komentar

Komentar anda sangat penting! Oleh karenanya saya sangat berterima kasih bagi anda yang tidak SPAMMING di sini. Komentar SPAM, mengandung SARA, dan menyinggung pihak lain akan saya hapus. Terima kasih telah berkunjung :D

T4 Belajar Blogger

Cari Tutorial

Minggu, 08 Januari 2012