Cara Menciptakan Kotak Komentar Wordpress Di Blog Blogger

Cara Membuat Kotak Komentar Wordpress di Blog Blogger. Beberapa waktu yang kemudian sempurna saat gencar2nya para blogger yang ber-platform Blogspot ingin mempunyai kotak komentar menyerupai wordpress, yaitu kotak komentar yang mempunyai 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 sanggup menciptakan atau menemukannya. Tepat di awal tahun 2012 ini aku sanggup isu besar hati dari seorang sobat Blogger saya...sebut saja beliau Ka' Damar, wkwkwk...yapz pemilik blog yang beralamatkan di http://tabloidpulsanews.blogspot.com/search?q=threaded-comments-for-blogger-comment
Penasaran bagaimana hasilnya?
Silahkan lihat di blog aku yang satunya atau klik di sini
Bagi sobat yang tertarik untuk menciptakan kotak komentar tersebut, maka sanggup lihat tutorial di situs aslinya...
Tapi bagi sobat Blogger yang merasa sulit, maka sanggup 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 isyarat CSS berikut di atas isyarat ]]></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/AVvXsEiH1-CnlxLQFSbezluCTqoXF7RbhrXvSyuzfMQD5GnyySr1KMoYe-L8kX4VUkkF3YNr1beNQkNCvI5dFwpaS7KYGaRRr-kfKKTH81CE-KcQYcAzhKEONiWIX_cuM4DmQOBPA1F3W4Na4Qs/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 isyarat tag </body>

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

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

Kode yang harus sobat ganti...

</b:includable>

Di bab goresan pena yang berwarna merah di atas yaitu kode2 yang harus sobat ganti dengan isyarat 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 aku tandai warna merah dengan ID Blog milik sobat. Jika kesulitan untuk mendapatkannya, silahkan untuk memperhatikan gambar berikut

Atau dengan tampilan lama...

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

Sekarang silahkan di-save hasil kerjaan anda
=> Silahkan lihat alhasil 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 menciptakan komentar wordpress, komentar wordpress di Blogger, menciptakan reply pada blogspot, tombol reply untuk blogspot

Breaking

Sabtu, 05 Oktober 2019

Cara Menciptakan Kotak Komentar Wordpress Di Blog Blogger

RELATED:

Breaking

Sabtu, 05 Oktober 2019

Cara Menciptakan Kotak Komentar Wordpress Di Blog Blogger

RELATED:

OTHER RELATED NEWS