Cara Memodifikasi Thread Comment

Melanjutkan postingan saya sebelumnya tentang Cara menampilkan Thread Comment di Blogspot, yang tampilannya masih standar contohnya seperti Gambar disamping yang bagi saya secara pribadi kurang menarik :y;

Sekarang ini akan saya bahas Cara Memodifikasi Thread Comment supaya menjadi menarik perhatian biar tampil beda, perlu kawan ketahui script berikut saya Copas saat pertama kali Thread Comment di perkenalkan / ditambahkan oleh Google pada Blogspot [sekarang script tersebut sudah tidak ada lagi di Template] begitu juga script tersebut sudah saya Modifikasi :z; 

Cara Pemasangan Thread Comment :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan  
• Copas script berikut diatas atau dibawah ]]></b:skin> 

<style>#comments{clear:both;float:left;width:580px;margin: 10px 0;padding:10px;line-height:1.4em;background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;rgb(255, 255, 255)&#39;, endColorstr=&#39;rgb(185, 185, 185)&#39;);background:-moz-radial-gradient(top, rgb(255, 255, 255), rgb(185, 185, 185));background:-webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to( rgb(185, 185, 185))) repeat-x top center; border: 1px solid #CCC;-webkit-border-radius: 5px; -moz-border-radius:  5px; border-radius:  5px;}
.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em;}
.comments .comments-content {font-size: 13px;}
.comments .comment .comment-actions a { padding: 5px  0 0 5px;  color: yellow !important;}
.comments .comment .comment-actions a:hover {  text-decoration: none;}
.comments .comments-content .comment-thread ol { list-style-type: none; padding: 10px; 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; width: 544px;}
.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;}
.comments .comments-content .icon.blog-author { display: inline-block; margin: 0 0 -4px 6px; position: absolute; top: 0; right: 0; background-color: #95CAFF; width: 100%; height: 100%; z-index: -1;}
.comments .comments-content .datetime { font-size: 10px; color: #F00; 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: #D4E3EA;padding: 5px;}
.comments .comments-content .comment-content { margin: 0 0 8px; padding: 5px; border: thin solid #E6E6E6; background-color: #FFF; 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 {background: transparent;  cursor: pointer;text-align: center;}
.comments .continue a { display: block;  padding: 0.5em;margin: 0 350px 0 50px;font-weight: bold;background: #95CAFF none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#236C95&#39;, endColorstr=&#39;#7CA9C0&#39;);background:-moz-radial-gradient(top, #236C95, #7CA9C0);background:-webkit-gradient(linear, left top, left bottom, from(#236C95), to( #7CA9C0))repeat-x top left;border: 1px solid #333;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;color: #FFF;}
.comments .continue a:hover { text-decoration: none !important; color: #FFF; background: #95CAFF;border: 1px solid #00F;}
.comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em;}
.comments .comments-content .loadmore.loaded { max-height: 0px; -ms-filter: quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;; filter: alpha(opacity=0); opacity: 0; overflow: hidden;}
.comments .thread-chrome.thread-collapsed {display: inline-block;}
.comments .thread-toggle {background: #00FF00 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00FF00&#39;, endColorstr=&#39;#006400&#39;);background:-moz-radial-gradient(top, #00FF00, #006400);background:-webkit-gradient(linear, left top, left bottom, from(#00FF00), to( #006400))repeat-x top left;border: 1px solid #006400;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;  display: inline-block;padding: 3px 0;width: 120px;height: 20px;text-align: center;}
.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(&quot;data: image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow { background: url(&quot;data: image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tcA2ozIZit2kAmGux49xwYKzUOTlNJNO3ALyX67QIDBVUR-10su7C1Oy7PeJlMX12lnG0Hh34n5cF-kO1JgRUDMY8OoQsrvbL0ebuXsVx2xdcFTNSasYI9hb4mVUM6MM41sBr_cb5pBh/s1600/anon36.gif&quot;] { display: inline;}
.comments .comment-block { background: rgb(99,147,193);  border: 1px solid #FFF;-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;margin-left: 48px;padding: 5px;position: relative; z-index: 99;}
/* Responsive styles. */
@media screen and (max-device-width: 500px) {.comments .comments-content .comment-replies {margin-left: 0;}}
</style>

• Kalau script tersebut disimpan diatas ]]></b:skin> teks <style> dan </style> yang berwarna biru bisa kawan hilangkan 
• Ganti teks yang saya beri warna Merah [width:580px;] sesuai Lebar Blog kawan, sedangkan [width:544px;] ini untuk Komentar Balasan
• Simpan Template kawan :q;

Berbagi Artikel :

Cara Memodifikasi Thread Comment

Blog Bego, Komentar, Kreasi, tutorial,

Rate this posting:

{[["☆","★"]]}

Kalau pada Artikel Cara Memodifikasi Thread Comment
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---