Cara membuat tombol reply atau balas pada komentar blog

Ada yang nanya sama saya cara membuat tombol reply atau balas pada komentar blog, nah di sini saya mau share caranya,
cara untuk cara membuat tombol reply atau balas pada komentar blog ada beberapa macam, tapi di sini saya akan share cara yang saya gunakan,

Loggin Blogger
Pilih menu Template >> Edit Html (sebelumnya backup dulu template yang kamu gunakan)
Centang expand template widget
Cari kode seperti ini

<b:include data='post' name='comments'/>

Biasanya terdapat lebih dari 1 kode seperti itu, di ganti saja semua nya biar tidak bingung. dan berfungsi dengan baik, seperti contoh template saya mempunyai 4 kode seperti itu,
Lalu ganti dengan kode ini

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

Simpan template kamu.

Nah sekarang blog kamu mempunyai tombol reply pada komentar, tapi tampilannya masih biasa saja,
untuk mengganti tampilan seperti ini

Cara membuat tombol reply atau balas pada komentar blog

Cari kode

<b:includable id='threaded_comment_css'>       
  <style>      
.comments {      
  clear: both;      
  margin-top: 10px;      
  margin-bottom: 0px;      
  line-height: 1em;      
}      
.comments .comments-content {      
  font-size: 13px;      
  margin-bottom: 16px;      
}      
.comments .comment .comment-actions a {      
  padding-top: 5px;      
  padding-right: 5px;      
}      
.comments .comment .comment-actions a:hover {      
  text-decoration: underline;      
}      
.comments .comments-content .comment-thread ol {      
  list-style-type: none;      
  padding: 0;      
  text-align: left;      
}      
.comments .comments-content .inline-thread {      
  padding: 0.5em 1em;      
}      
.comments .comments-content .comment-thread {      
  margin: 8px 0px;      
}      
.comments .comments-content .comment-thread:empty {      
  display: none;      
}      
.comments .comments-content .comment-replies {      
  margin-top: 1em;      
  margin-left: 36px;      
}      
.comments .comments-content .comment {      
  margin-bottom:16px;      
  padding-bottom:8px;      
}      
.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 .icon.blog-author {      
  width: 18px;      
  height: 18px;      
  display: inline-block;      
  margin: 0 0 -4px 6px;      
}      
.comments .comments-content .datetime {      
  margin-left:6px;      
}      
.comments .comments-content .comment-header,      
.comments .comments-content .comment-content {      
  margin:0 0 8px;      
}      
.comments .comments-content .comment-content {      
  text-align:justify;      
}      
.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 .continue {      
  cursor: pointer;      
}      
.comments .continue a {      
  display: block;      
  padding: 0.5em;      
  font-weight: bold;      
}      
.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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;      
}      
.comments .thread-collapsed .thread-arrow {      
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;      
}      
.comments .avatar-image-container {      
  float: left;      
  width: 36px;      
  max-height: 36px;      
  overflow: hidden;      
}      
.comments .avatar-image-container img {      
  width: 36px;      
}      
.comments .comment-block {      
  margin-left: 48px;      
  position: relative;      
}/* Responsive styles. */     
@media screen and (max-device-width: 480px) {      
  .comments .comments-content .comment-replies {      
    margin-left: 0;      
  }      
}      
  </style>      
</b:includable>

Lalu ganti dengan kode ini

<b:includable id='threaded_comment_css'>
<style>
/*------------- START Blogger Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions 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;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.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:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.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 .continue {
  cursor: pointer;
}
.comments .continue 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;
padding:2px 8px; margin-right:10px;
}
.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 {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

/*------------- End of Blogger Threaded Comments  -------------*/
</style>
</b:includable>

Lalu save template kamu.

untuk mengganti warna backgroundnya

cari kode:

.comments .comments-content .comment-replies {

margin-top: 1em;

margin-left: 40px; font-size:12px; background:#EBF5FE

#EBF5FE ganti dengan warna yang kamu mau.
kamu bisa menggunakan Tools Color untuk melihat kode warna

Semoga bermanfaat.

19 komentar:

Hermanbagus6/11/12 21:33
mantab sob..
Anonymous6/11/12 22:09
nice share sob..
tp aku udh pkai sob, hehe
Unknown7/11/12 05:10
terima kasih sob tutorialnya...
nyoba dulu..

jangan lupa mampir di http://cyberspot7.blogspot.com
Unknown7/11/12 10:24
udah ada dari sononya deh.
Stiker Jalingkut7/11/12 11:42
met siang genk. trmksi tla mau brbagi sesama tmn2. salam knl genk
Unknown7/11/12 20:33
saya pernah coba sob,alhasil blog saya yang sudah dofollow berubah jadi nofollow lagi,,makanya saya nonaktifkan saja fitur replay itu.
Anonymous8/11/12 11:48
ini yang aku cari sob,, soalnya di blogku ga bsa balas komentar gtu,, mesti buat komentar baru.

thx sobb infonya :)
Anonymous8/11/12 20:16
This comment has been removed by a blog administrator.
Anonymous8/11/12 20:18
Kunjungan malam hari...
sigoblogx9/11/12 00:02
makasih sobat untuk trik nya, semoga bermanfaat untuk para blogger dunia..hihiiii
Unknown10/11/12 10:42
Bos,ada award dari saya buat Anda.
Tolong diambil ya???
Cek di award ya???

Silahkan berkomentar.
Di mohon untuk tidak menyisipkan LINK AKTIF
Komentar dengan LINK AKTIF akan di anggap SPAM
Jangan spam dan jangan menggunakan kata kata kasar.!
Jadilah pembaca yang baik dan meninggalkan komentar sesuai topik

Yori Angelic™

Cara membuat tombol reply atau balas pada komentar blog

Artikel Terkait Cara membuat tombol reply atau balas pada komentar blog :

19 komentar:

Entri Populer

Labels

Followers