Trik membuat reply comment system blogger terbaru ~ MUHSIDIQ || NEW

HTML Trik membuat reply comment system blogger terbaru

Trik membuat reply comment system blogger terbaru

Adji Owen Sullivan 7:49 PM

Adji Owen Sullivan

Reply system comment adalah reply comment bawaan blogger atau blogspot itu sendiri. Ya, memang blogger baru - baru ini menambah fitur reply comment system. Fitur ini mirip dengan reply comment system wordpress, tapi tetap ada bedanya. Bedanya, bisa sobat perhatikan sendiri, hehe..

Untuk pengguna template bawaan blogger, reply comment system ini sudah ada secara default. Tapi, bagaimana dengan template yang sudah di modifikasi 100%, kebanyakan reply comment system ini tidak muncul.
Sebelum memulai triks ini saya sarankan sobat untuk membackup terlebih dahulu template blog sobat sebagai antisipasi ketika terjadi kesalahan editing template.

Langkah - langkah membuat reply comment system blogger terbaru :

1. Masuk ke menu Rancangan

2. Edit HTML

3. Temukan kode berikut :

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

4. Ganti kode warna merahnya saja dengan kode berikut :

'threaded_comments'/>

jadinya seperti ini :

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

Keterangan :
Kode b:include data='post' name='comments'/> kemungkinan ada lebih dari satu, cari lagi kode tersebut, lalu lakukan seperti langkah ke empat.

5. Copy kode berikut lalu letakkan diatas tag <body>

<style>/*-------------   START Blogger Threaded Comments by www.ravisaive.in   -------------*/.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 by www.ravisaive.in   -------------*/</style>

6. Save template sobat

Selesai...... cara membuat reply comment system blogger terbaru, lalu silahkan sobat lihat hasilnya. Selamat mencoba dan semoga berhasil..
Mohon sharingnya jika ada kendala mana tahu sobat-sobat lain yang berhasil bisa berbagi..
Happy blogging sobat, and happy sharing..

kode CSS dibuat oleh : www.ravisaive.in

Kata Bijak Admin MSA

Sesuatu yang hebat tidak dibuat secara instan tapi dibuat dengan usaha, kegigihan, pantang menyerah dan do'a.

Related Post

CATATAN :
1. Form komentar ini tanpa moderasi dan verifikasi.
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan.
4. Dilarang menanamkan link aktif dalam komentar ini / saya akan hilangkan selamanya.
ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)