Cara Memodifikasi Thread Comment

Kastaone - Sabtu, 08 Desember 2012 - 06:50 wita
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;http://3.bp.blogspot.com/-_SUz2oNDMQQ/T-lAcCLCEmI/AAAAAAAABYA/N033d96ubWs/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
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---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

14 Komentar pada : “Cara Memodifikasi Thread Comment”

  1. Balasan
    1. hasilnya seperti Komentar Blog ini kawan :q;

      Hapus
    2. terima kasih owh mantappnya kawan :h;

      Hapus
  2. sudah saya coba hasilnya bagus sobat, hanya gambar tetap saja belum juga muncul, yg ada hanya perbahan warna yg sangat menarik,...
    Terima kasih tutorialnya yg bermanfaat.

    BalasHapus
    Balasan
    1. Melihat tampilan Komentar kawan sepertinya sudah di modif, cuma penyimpanan scriptnya ada di 3 tempat seperti yang jelaskan diatas ada 2 tempat sedang yang ke 3 pada css template atau cari :q;
      <b:includable id='threaded_comment_css'>
      <style> dan seterusnya sampai </style></b:includable>

      Hapus
    2. Mungkin juga sobat, saya memang terus terang soal yg ginian kurang paham, tapi akan saya otak atik lagi sampai berhasil, oh ya sobat, saya numpamh follow ke 18, terima kasih dan salam sukses selalu

      Hapus
    3. Maksudnya kalau kawan ingin mencoba memakai postingan saya silahkan temukan dulu file thread comment di Template kawan - simpan dan ganti :q;

      Hapus
    4. sudah dicoba sob,tapi hasilnya sama dg yg ada sekarang.tdk ada perubahan,yg berubah cuma warna saja.
      terima kasih sobat

      Hapus
    5. seperti yang saya katakan sebelumnya, bahwa Thread comment tsb sudah dimodif [karena pakai kolom] kalau kawan ingin belajar tutorial pesan saya SIMPAN DULU TEMPLATENYA, untuk jaga-jaga seandainya gagal :x;

      Hapus
  3. keren bro thread comment nya :)

    BalasHapus
    Balasan
    1. trims sudah berkunjung dan komentar :z;

      Hapus
  4. trimakasih gan atas tutor nya..
    tapi sayang masih belum berhasil di blog saya

    BalasHapus
    Balasan
    1. kalau memang benar tak berhasil dimana letak kesalahannya ya :w;

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan