Cara Tips Terbaru: 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9rCxg2kr-ZjjTDtAbxkvzcNAS0TPVJxCDnlPOK_lyna6QWFZSj0QH72i9u62Q1sTlFRxNhswDP-wIms3GGmon3-Ano7uSw7rUaRop6g9GC5BOo7usNhCUVdM-QtwPAxS9sXqbSVxlf4E/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

Cara Tips Terbaru

Minggu, 08 Januari 2012

Cara Membuat Kotak Komentar Wordpress di Blog Blogger

Iklan

kategori