Cara membuat thread comment reply seperti di wordpress

Sabtu, 18 Februari 2012

setelah dulu saya pernah mosting tentang Cara membuat tombol reply pada komentar blog kaliini saya akan membahas hal yang sama tapi yang satu ini lebih bagus dari yang sebelumnya.Namanya "Thread comment reply" apa itu Thread comment reply?Apakah kalian tau form komentar di wordpress? ya seperti itulah bentuknya Thread comment reply kalau kalian masih bingung lihatlah gambar disamping (klik gambar untuk memperbesar).Gimana udah tau kan? oke kalo gitu langsung aja kita praktekin tapi sebelum praktek seperti biasa follow dulu kalo udah follow langsung aja kita mulai:


1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian cari kode b:include data='post' name='comments'/> (agar lebih mudah mencarinya gunakan f3)
6.Lalu ganti kode yang berwarna biru dengan kode berikut : 'threaded_comments'/>

 Catatan:kode b:include data='post' name='comments'/> biasanya terdapat lebih dari 1,jika anda menemukannya lagi silahkan ulangi lagi langkah ke 6

7.Copy kode dibawah ini dan letakkan diatas kode <body>

<style>.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:#f0f0f0;}.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: #FFFFFF;    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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow {  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;}.comments .avatar-image-container {background-image: url(&quot;http://img846.imageshack.us/img846/7357/unled1oww.jpg&quot;);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;  }}</style>

8.Tinggal di save deh

note : jika terjadi error klik disini
SELAMAT MENCOBA
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di webmiftah.blogspot.com

12 komentar:

Posting Komentar