Praktek Membuat threaded comment di Blog

Praktek Membuat threaded comment di Blog

Salam sejahtera buat sobat web-blogging dan teman online dimana pun anda berada
Pada  kesempatan yang baik ini,  saya coba  akan  berbagi,  Trik, Threaded  Comment
Artikel, ini terinspirasi pada salah satu sobat blogging, yang menanyakan kolom pada
Komentar saya,  maka pada pertemuan ini saya, akan memenuhi  apa yang  pernah di
Tanyakan, sebelum artikel ini saya tulis sebelumnya saya, postinga di blog ini tentang
Konversi Parse Html 5, dan pada perjumpaan kali ini, saya akan  membahas  tutorial
Praktek  membuat  threaded  comment di blog,  yang  berminat  simak  di  bawah  ini

Threaded Comment

Ulasan :

Threaded comment, atau kita sebut komentar berurutan,  maksud nya kita buat kolom  atau
Kita edit form komentar standar blog dengan custom css threaded comment, agar menjadi
Sebuah  halaman komentar blog  kita elegan tertata rapih,  dengan  Accessories,  komentar
Threaded Comment,  buat sobat  yang  berminat,  silahkan simak  tutorial nya  di bawah ini

Cara memasang nya :

Masuk ke web - blog lalu sign in di blog  anda,  untuk  blogger
Pilih dasboard kemudian pilih template dan pilih edit template
Cari kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
Copy kode script css di bawah ini, pastekan tepat di atas code   ]]></b:skin>  atau  bila
Template blog anda memakai </style> silahkan pastekan kodenya tepat diatas </style>

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#comments-block .avatar-image-container img {width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author{width:16px;height:16px;display:inline-block;vertical-align:top;background:transparent url('/favicon.ico') no-repeat 50% 50%}
.comments .comments-content .loadmore a {
border-top: 1px solid #AD3000;
border-bottom: 1px solid #AD3000;
}
.comments .comments-content .datetime a{
font-size:11px;
float: right;
}
.comment-block .comment-footer a:link, a:visited {
}
.comments .avatar-image-container {
margin-left:-5px;
}
.comments .continue a{ display:inline;font-weight:bold; background: #AD3000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #860000; color:#FFF;box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
}
.comments .continue a:hover {background:#860000;}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fff;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #AD3000;
border-left:4px solid #AD3000;
border-bottom:1px solid #AD3000;
border-right:1px solid #AD3000;
-webkit-border-radius: 0px 0px 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
}
.comment-actions a {font-weight:bold; background: #AD3000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #860000; color:#FFF;box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}
.comment-actions a:hover { background: #860000; color:#fff;}
.avatar-image-container {
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {transform:scale(1.5) rotate(3600deg) translate(0px);-moz-transform:scale(1.5) rotate(3600deg) translate(0px);-webkit-transform:scale(1.5) rotate(3600deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 2.5s ease;-webkit-transition:all 2.5s ease
}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Keterangan kode :

Silahkan  ganti  kode warna, dengan  pilihan  warna  yang  anda  sukai  contoh  #AD3000;
Jika tampilan warna dan form komentar tidak persis dengan blog saya, silahkan edit style
Atau anda kostumisasi sendiri  background, pading, margin, border  yang anda ingingkan


Untuk mengedit warna silahkan buka halaman di bawah ini :

Edit warna buka :  Kode Warna

Selanjut nya :
Pada template blog anda harus mengaktifkan threaded comment  ini
Kalau anda belum mengaktifkan  threaded comment   pada  template
Simak praktek cara mengaktip kan  threaded  comment, blog anda

Cara mengaktipkan threaded comment pada template, Cari kode di bawah ini :

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

Setelah sobat menemukan kode script, diatas biasanya terdapat 3 sampai 4 kode 

Yang serupa, namun pada template,  mungkin  berbeda - beda

Selanjutnya ganti semua kode diatas dengan kode dibawah ini

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

Setelah semua nya, terpasang menurut prosedur, silahkan  anda  klik save-simpan
Silahkan  buka  artikel blog anda dan  lihatlah,  form komentar sudah  berhasil  atau
Belum, kalau belum  berhasil silahkan baca artikel ini dengan seksama  barangkali
Ada  yang  keliru,  atau  berkomentar   untuk  saling  mengajukan  pendapat  tentang
Artikel ini, terima kasih sobat atas kunjungan dan partisipasi  anda  happy  blogging