Cara Membuat Threaded Comment Keren (Fitur Reply)

You are here: » Home » Tips NgeBlog » Cara Membuat Threaded Comment Keren (Fitur Reply)

Cara Membuat Threaded Comment Keren (Fitur Reply)

5:57 PM Unknown 78 Komentar

Cara Membuat Threaded Comment Lebih Keren (Fitur Reply). Selamat pagi sobat sobat Mas yusa, mungkin post ini melanjutkan dari post bang dirman (Planktoon.blogspot.com). Pernah saya berpikir ingin punya threaded coment dengan fitur reply seperti wordpress. Karena saya kurang tau cara membuatnya....saya PM barng dirman dari facebook. Lalu dia menjawab dengan menyertakan link cara untuk membuat threaded comment. Tapi... (Ada tapinya) penampilan threaded comment yang di share bang dirman masih default alias belum di edit.

Nah maka dari itu....saya akan share Cara Membuat Threaded Comment Lebih Keren (Fitur Reply). Agar anda para admin mudah dalam menjawab para komentator blog anda. Dilain itu, kelebihan dari threaded comment ini yaitu fitur reply tanpa membuka jendela baru seperti fitur reply blog Mas Yusa yang dibawah. Jadi ketika di klik Reply. Kotak komentar akan datang menghampiri...

Screen shoot :

Langsung saja masuk ke caranya :

Sebelumnya backup dulu aja templatenya. (Biar aman)
Masuk Edit HTML blog (Rancangan->Edit HTML->Expand Template Widget)
Cari kode (Ctrl + F) : <b:include data='post' name='comments'/>
Ganti kode diatas dengan kode dbawah :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Note : jika anda sudah memakai Threaded comment langsung aja ke langkah selanjutnya. Dan jika anda menemukan dua kode <b:include data='post' name='comments'/> ganti kedua duanya...
Nah kita melaju ke tahap CSS nya..
Cari kode ]]></b:skin>
Lalu Copy dan paste kode CSS di bawah ini tepat diatas kode ]]></b:skin>

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}

.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px;
}
.comments .comments-content .comment {
padding-bottom:8px;
margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}

.comments .comments-content .user a {
color: #444;
}

.comments .comments-content .user a:hover {
text-decoration: none;
color: #555;
}

.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}

.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Lalu Simpan Template.

Selesai.....Jika ada masalah silahkan ditanyakan..

Labels: Tips NgeBlog

Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Cara Membuat Threaded Comment Keren (Fitur Reply) dan anda bisa menemukan artikel Cara Membuat Threaded Comment Keren (Fitur Reply) ini dengan url http://masyusa.blogspot.com/2012/07/cara-membuat-threaded-comment-lebih.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Threaded Comment Keren (Fitur Reply) ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Membuat Threaded Comment Keren (Fitur Reply) sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar

About Me-->