Cara Memasang Threaded Comment Paling Keren di Blog - hai sahabat blogger, bagaimana kabarnya? semoga anda selalu berada dalam keadaan yang super, sesuper pagi hari ini, amiin. Pada kesempatan kali ini kita akan membahas hal-hal yang berkaitan dengan tutorial blog yaitu mengenai bagaimana cara memasang fitur threaded comment di blog. Tapi sebelum kita membahas lebih jauh, mari kita cari tahu dulu apa yang dimaksud dengan threaded comment!
Apa itu threaded comment?
Theaded comment yaitu fitur komentar / form komentar yang lebih interaktif yang fungsi utamanya adalah untuk memudahkan admin dan pengunjung blog dalam membalas komentar yang masuk ke blog dengan fitur Reply-nya, yang jika anda gunakan, komentar balasan anda tidak akan masuk menjadi komentar paling akhir di dalam postingan itu, melainkan akan muncul tepat dibawah komentar yang ingin anda balas. Bingung ya? dari pada bingung mending langsung saja lihat gambar dibawah ini :
Bagaimana, sekarang anda sudah tahukan, apa itu threaded comment? bagaimana apakah anda juga berminat untuk memasangnya di blog anda? Jika jawaban anda ya, silahkan ikutli beberapa langkah mudah memsang fitur threaded comment pada blog dibawah ini :
Langkah Pertama | Mengaktifkan Fitur Threaded Comment
1. Login ke akun blogger
2. Klik "Template"
3. Lalu klik "Edit HTML"
4. Setelah itu centang pada :
5. Kemudian cari kode script berikut ini :
<b:include data='post' name='comments'/>
biasanya anda akan menemukan 4 kode semacam ini,
6. Jika kode pada langkah no.5 sudah ditemukan, selanjutnya ganti semua kode tersebut 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>
7. Jika sudah, silahkan simpan template!
Sampai disini fitur threaded comment pada blog anda sudah aktif, selanjutnya tinggal merubah tampilan dari threaded comment tersebut. Untuk lebih jelasnya, mari kita lanjut baca!
Langkah Kedua | Memodifikasi Tampilan Threaded Comment di Blog!
1. Silahkan login ke akun blogger
2. Klik menu "Template"
3. Lalu klik "Edit HTML"
4. Kemudian cari kode berikut ini :
]]></b:skin>
5. kemudian anda letakkan kode dibawah ini tepat dibawah kode pada langkah no.4 :
/*------------- 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 -------------*/
6. Terakhir, simpan template! dan lihat hasilnya.
Jika anda melakukan semua langkah dengan benar, maka seharusnya sekarang anda sudah berhasil memasang fitur threaded comment di blog anda. Tapi terkadang walaupun sudah melakukan langkah ini dengan benar, tidak semuanya akan berhasil, karena biasanya tidak semua kode script blog sama, ada yang sudah dimodif oleh pembuat templatenya. Tapi tenang jika anda mengalami masalah, anda dapat membaca artikel selanjutnya tentang bagaimana cara memperbaiki fitur threaded comment di blog.
Demikian yang dapat saya sampaikan mengenai Cara Memasang Threaded Comment Paling Keren di Blog. Untuk kurang dan lebihnya mohon dimaafkan, semoga artikel ini dapat memeberikan manfaat. Terimakasih
Baca juga artikel menarik lainnya :
Baca juga artikel menarik lainnya :
