Buat Style Komentar Threaded Makin Keren!

Tweet

Halo para blogger semua sekarang aku pengen bagi - bagi Style komentar threaded yang kerenmenurut aku loh gak tau kalau menurut anda semua. oh iya style ini khusus untuk Pengguna Komentar threaded bloggger jadi modelnya seperti screenshot itu tapi kalau pengen di rubah lagi bisa kok silahkan di rubah sesuai selera masing - masing.

Beberapa waktu lalu aku sempat bingung dengan Tombol Hapus kok gak muncul setelah saya selidiki menggunakan Google Chrome Melalui Inspect elemen nya ( klik kanan trus pilih inspect elemen atauPeriksa elemen ). saya liat pada kode cssnya ternyata ada kode display:none jadi tombol balasnya gak muncul tapi sekarang udah aku ganti jadi display:inline jadi udah muncul tombol balasnya, ok dari pada lama - lama langsung saya bagiin aja kodenya.

1. Masuk di template anda ( Baca : Cara masuk ke dalam template blogger )
2. Centang Expand template widget
3. Cari kode <b:includable id='threaded_comment_css'>
4. Di bawah kode tersebut ada kode seperti ini

<style>
.comments {
 clear: both;
 margin-top: 10px;
 margin-bottom: 0px;
 line-height: 1em;
}
.comments .comments-content {
 font-size: 13px;
 margin-bottom: 16px;
 overflow: auto;
}
bla bla bla bla... panjang ke bawah
sampai kode..
</style>

Nah hapus semua kode tersebut mulai dari kode <style> Sampai kode </style> dan ganti dengan kode di bawah ini.

.comments {
 clear: both;
 margin-top: 10px;
 margin-bottom: 0px;
 line-height: 1em;
}
.comments .comments-content {
 font-size: 13px;
 margin-bottom: 16px;
 overflow: auto;
}
.comments .comment .comment-actions a {
 float: right;
 display: inline-block;
 margin: 5px 0 0 5px;
 padding: 1px 6px;
 border: 1px solid;
 color: black !important;
 text-align: center;
 text-decoration: none;
 background: #DD0;
 font: 11px/18px sans-serif;
 border-color: transparent black black black;
}
.item-control {
 display: inline;
}
.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 {
 padding-bottom: 0;
}
.comments .comments-content .comment-body {
 position: relative;
}
.comments .comments-content .user {
 font-size: 14px;
 color: #666666 !important;
 text-decoration: none;
}
/* Style Komentar Author */
.comments .comments-content .icon.blog-author {
 display: inline-block;
 margin: 0 0 -4px 6px;
 position: absolute;
 top: 0;
 right: 0;
 background-color: #39A;
 width: 100%;
 height: 100%;
 z-index: -1;
}
/* AKhir style Komentar Author */
.comments .comments-content .datetime {
 font-size: 10px;
 color: #999;
 text-decoration: none;
}
.comments .comments-content .datetime a {
 float: right;
}
.comments .comments-content .comment-header {
 margin: 0 0 8px;
 border: thin solid #E6E6E6;
 background-color: #dff0fa;
 background-color: rgba(223, 240, 250,0.3);
 padding: 5px;
}
.comments .comments-content .comment-content {
 margin: 0 0 8px;
 padding: 5px;
 border: thin solid #E6E6E6;
 background-color: #F4F4F4;
 background-color: rgba(244, 244, 244,0.5);
 line-height: 21px;
}
.comments .comments-content .comment-content {
 text-align: justify;
 line-height: 1.5;
}
.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;
 border: 1px solid #666;
 color: #424242 !important;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font: normal 11px/18px sans-serif;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 background: rgb(196,191,39);
 background: -webkit-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
 background: -moz-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
 background: -o-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
 background: -ms-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
 background: linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4bf27', endColorstr='#ede980',GradientType=0 );
}
.comments .continue a {
 display: block;
 color: black;
 padding: 2px 5px;
}
.comments .continue a:hover {
 text-decoration: none !important;
 background: #ccc;
 background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));
 background: -webkit-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
 background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
 background: -o-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
 background: -ms-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
 background: linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
.comments .comments-content .loadmore {
 cursor: pointer;
 max-height: 3em;
 margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
 max-height: 0px;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 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;
 padding: 0;
 margin-left: 10px;
 margin-top: 2px;
}
.comments .avatar-image-container img {
 width: 36px;
}
img[src$="http://img1.blogblog.com/img/anon36.png"] {
 display: none;
}
.comments .comment-block {
 margin-left: 48px;
 position: relative;
 padding: 5px;
 background: #68F;
 border: 1px solid #E4E4E4;
 z-index: 99;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
 .comments .comments-content .comment-replies {
 margin-left: 0;
}
}

Setelah itu klik SIMPAN TEMPLATE dan lihat hasilnya. oh iya jika anda tidak menemukan kode
<b:includable id='threaded_comment_css'> dan kode yang ada di bawahnya, silahkan simpan kode css komentar threaded keren nya di atas kode ]]></b:skin> Good Luck. semoga tampilan komentarnya makin Cihuy.

Buat Style Komentar Threaded Makin Keren!
Written by: Ardhi Dwi
Rating: 4.8 Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan code ini atau share dengan Facebook like diatas/sharing tool di bawah. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

<a href="https://blogosakasek.blogspot.com/2012/09/buat-style-komentar-threaded-makin-keren_20.html">Buat Style Komentar Threaded Makin Keren!</a>