Halo para blogger semua sekarang aku pengen bagi - bagi Style komentar threaded yang keren menurut 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 atau Periksa elemen ). saya liat pada kode cssnya ternyata ada kode display:none jadi tombol balas nya gak muncul tapi sekarang udah aku ganti jadi display:inline jadi udah muncul tombol balas nya, 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.
