Monday, September 17, 2012

Membuat Tampilan Komentar menjadi menarik dan Indah

Membuat Thread Komentar keren dan menarik - Membuat Thread komentar keren terbaru - Cara Membuat kotak Komentar Keren di tahun 2012
Kali ini saya ingin membuat postingan pesanan teman saya, ia ingin membuat tampilan komentar blog nya lebih menarik, mungkin tampilan komentar saya menarik menurut beliau, makanya beliau bertanya kepada saya, Ok saya akan membuat postingan Cara membuat Tampilan Komentar Lebih menarik dan pasti nya Cantik. Tanpa basa basi langsung saja ke cara pembuatan nya
Ini Priview nya




  • Login ke akun blogger dan masuk ke Edit HTML

  • Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak
    terduga, nanti yang nyesal kan kita juga kalau ada apa-apa… hehehe
  • Siapkan mental anda, jangan sampai salah langkah, karena salah satu titik script aja maka akan bahaya… (nakut2 in aja :P)


  • Centang "Expand Widget HTML" ( bila perlu )

 Kemudian copy kode berikut ini di atas code ]]></b:skin> 



/*------------- START yudhacomunity.blogspot.com 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 yudhacomunity.blogspot.com Blogger Threaded Comments  -------------*/


  • Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOL



nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan  di bawah ]]></b:skin> 


<style type='text/css'>
         

/*Start Modif kotak Komentar*/
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);
}
.comments .comments-content .datetime a{float:right;
}
.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;
}
.comment-actions a{
background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;
}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{
text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;
}
.avatar-image-container{
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;
}
.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;
}
.deleted-comment{color:gray;font-style:italic;
}
/*End Modif kotak Komentar*/
</style>


OK selesai, coba lihat bagaimana tampilan komentar anda…!
Jangan Lupa tinggalkan Komentar sobat2 tkj ya...!

Ditulis Oleh : Yudha Situmorang ~ Komunitas Anak TKJ

Yudha situmorang Sobat sedang membaca artikel tentang Membuat Tampilan Komentar menjadi menarik dan Indah. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya Review oleh: Yudha Situmorang
Update pada: 10:27 AM | Rating: 4.5

19 comments:

  1. Boleg di coba nih, terima kasih gan udah berbagi ilmunya :D

    ReplyDelete
  2. Wah ini seharusnya di kasih Screen Shot dan DEMOnya mas Yudha? :D

    ReplyDelete
    Replies
    1. kan uda di bilang seperti tampilan Thread Komentar blog ini...!
      ya screen shot nya langsung ke komentar blog ini aja... hehehe
      di tambah ya ss nya ???

      Ok deh mas, saya tambah dl !

      Delete
    2. ini diayang saya cari cari
      makasih atas infonya :D

      Delete
    3. yoi sama2 hehehe itu juga karena kemarin teman saya req...!
      kalau mau req aja biar saya publis

      Delete
  3. Likeee


    tpi di Blog saya gag
    Mendukung

    hhehehe


    jgan LUpa Kunjunganya
    http://tkj-site.blogspot.com

    ReplyDelete
    Replies
    1. nasib mu la itu :P hahahaha
      lihat code css komentar mu pakai apa ?? klw ini code css nya .comments

      Delete
  4. sob. biar pas kita mereply pesan (misal ane reply mas yudha )maka muncul spt d twitter : @yudha itu gmn y mas? (ini ane liat d blog tmen ada yg spt itu).
    mohon informasinya y mas...

    terimakasih sebelumnya...

    ReplyDelete
    Replies
    1. wah ia gan template sebelum ini saya gunain yang begitu... entar klw di klik tombol balas entar open new window, terus ada langsung kalimat replay to nama yang mw di replay, terus hasil nya jadi @yudha : pesan

      ia saya dl begitu, tapi menurut saya kurang menarik jadi replay nya yang begini... maaf saya gak sempat abadikan cara nya...! maaf ya...! KW nya juga saya lupa... maaf banget

      Delete
    2. komen mas Yudha diatas " nasib mu la itu :P hahahaha
      lihat code css komentar mu pakai apa ?? klw ini code css nya .comments "

      ini di template ane jg blm jalan mas.
      dibagian CSS d template ane. ane temukan spt ini mas..

      /* ----- COMMENT ----- */

      #comments {
      margin: 0px -15px 0px -15px;
      padding: 0px 25px 15px 25px;
      text-align: left;
      background: $commentbgColor;
      color: $commentTextColor;
      font: $commentTextFont;
      border-bottom: 1px solid $commentboxBorderColor;
      }

      sampai kebawah...
      apakah kode ini harus saya hapus atau bagaimana mas?
      maaf y mas, ane banyak nanya...

      terimakasih atas responnya yang super cepat..

      Delete
    3. ya tinggal ganti aja semua .comments jadi #comments

      Delete
    4. maksud saya ganti yang script di atas itu yang tutor saya, kan ada banyak tu .comments nah ganti jadi #comments semua yang .comments ngerti kan mksd nya ?
      jangan di ganti code css yang di blog kamu.... OK !

      Delete
  5. Info yang bagus dan OK Bos...! sukses Blogger Indonesia!!!

    ReplyDelete
  6. makasih infonya gan dah dipraktekin, tapi kepengen merubah warna baygronnya biar sesuai sama template gimana caranya ya?
    http://Yusy-Azzahro.blogspot.com

    ReplyDelete
    Replies
    1. ya tinggal ganti aja yang awalan nya pagar itu code warna...

      misal warna putih code nya itu #ffffff

      kan kata2 nya bahasa inggris... klw gak tau arti nya translate
      dan untuk mengetahui code warna bisa gunakan photoshop, dan selalu awali dengan tanda pagar ya

      Delete

Mohon baca aturan berkomentar
berikan komentar anda tentang postingan saya
jangan lupa untuk kembali ke blog saya ya, dan jangan lupa di follow

Mohon bagi para pengunjung yang terhormat jangan komen SPAM, SARA,Promosi dan lain-lain yang dapat menggangu kenyamanan pengunjung lain. komentar yang melanggar tidak akan saya terbitkan
Mohon kerja sama nya...



Terakhir Live Link di komentar akan terhapus secara Otomatis, jadi jangan Live link di komentar kalau Ingin Backlink silahkan Ke blog saya satu lagi Blog Dofollow PR 1 di share-ilmutkj.blogspot.com
Namun yang bisa komentar hanya yang sudah memfollow blog tersebut
terimakasi dan salam kenal

 
Copyright © 2013. Komunitas Anak TKJ . All Rights Reserved
Home | Contact Us | About Me | Privacy policy | Disclaimer | Site map
Design by Yudha Situmorang .