Komentar Blogspot Ala Blogger Vietnam

Unknown

Trik Blog

11 Nov 2013

Belum ada komentar

Seperti yang dapat Anda lihat pada bagian komentar blog ini, elemen komentar blogspot ini saya ambil dari tutorial yang dirilis oleh Duy Pham seorang blogger vietnam.  Tutorial dan cara implementasinya saya posting lagi di blog ini dalam versi Bahasa Indonesia.

Ada beberapa fitur yang menarik dari elemen komentar blogspot yang satu ini, seperti label Author untuk membedakan komentar penulis dengan komentar pengunjung, nomor urut komentar serta tombol like ala facebook.

Tutorial ini akan saya publikasikan dalam tiga postingan yang terpisah, diantaranya kode CSS untuk elemen komentar yang disertai label Author pada komentar penulis, menambahkan nomor urut komentar serta menambahkan tombol like pada elemen komentar.

Syarat utama agar implementasi ini berhasil adalah bahwa Anda telah mengaktifkan Thread Comments atau Komentar Bertingkat. Untuk postingan pertama ini, mari kita mulai menanamkan kode CSS ke dalam dokumen HTML template  untuk mendapatkan tampilan komentar blogspot ala bloger vietnam.

• Login ke blogger dengan ID Anda

• Pada halaman dashboard blogger pilih Template sebelum melakukan perubahan backup templateAnda terlebih dahulu.

• Pilih menu Template > Edit HTML

• Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

• Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

• #comments{overflow:hidden}
  #comments h4{display:inline;padding:10px;line-height:40px}
  #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
  #comments h4,.comments .continue a{background:#BD5D48}
  #comments h4,.comments .user a,.comments .continue a{font-size:16px}
  #comments h4,.comments .continue a{font-weight:normal;color:#fff}
  #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #BD5D48;border-right:20px solid transparent;width:0;height:0;line-height:0}
  #comments .avatar-image-container img{border:0}
  .comment-thread{color:#111}
  .comment-thread a{color:#777}
  .comment-thread ol{margin:0 0 20px}
  .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#BD5D48}
  .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
  .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
  .comments .comments-content .comment-content {text-align:justify;font-size:12px}
  .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
  .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
  .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://lh5.googleusercontent.com/-v9ykkH6XScM/UXR6ao0ZCxI/AAAAAAAADto/xiz6pRWhOsQ/s36/author.png);width:36px;height:36px}
  .comments .comments-content .inline-thread{padding:0 0 0 20px}
  .comments .comments-content .comment-replies{margin-top:0}
  .comments .comment-content{padding:5px 0;line-height:1.4em}
  .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
  .comments .comment-thread.inline-thread .comment{width:auto}
  .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
  .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
  .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
  .comments .comment-thread.inline-thread .user a{font-size:13px}
  .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
  .comments .continue{border-top:0;width:100%}
  .comments .continue a{padding:10px 0;text-align:center}
  .comment .continue{display:none}
  #comment-editor{width:103%!important}
  .comment-form{width:100%;max-width:100%}

• Untuk menyesuaikan dengan tampilan blog Anda edit kode warna berikut ini #BD5D48 serta label Author (https://lh5.googleusercontent.com/-v9ykkH6XScM/UXR6ao0ZCxI/AAAAAAAADto/xiz6pRWhOsQ/s36/author.png) dapat Anda buat dengan ukuran 32px X 32px

• Simpan perubahan dengan menekan tombol Save Template