www.van_rembrant.com: 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
diprasutan.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 sobhttp://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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxAI7DomaGYUrw0RoZ1_RS-xcMhvFpUHX0CCUfF-9Kuvjvn5Zzke0tBWz9BgFJiBRCjWSJgW-OAXb-gZJ0EXgdQP8NOWLtbhnev073adArNRmWFtcxF8EeBuu4axeB4hi1d6LGEPxsVDY/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.

www.van_rembrant.com

Pages

Bookmarks

Recent Post

Free Cheater Indonesia Blog

Sound-Blast Blog

Followers

List Post

Search

About Me

Blog Archive

Rabu, 14 November 2012

Cara Membuat Kotak Komentar Wordpress di Blog Blogger

0 komentar:

Posting Komentar

You Might Also Like This

Translate

Our Partners

Resources

Visitor Date

Statistic

Categories