Back to Top
Artikel Terbaru

Cara Memodifikasi Kotak Komentar Keren Abis

Selamat datang di Blog taharonqi.blogspot.com, Hallo sobat-sobat semua lama tidak pernah update artikel di blog saya yang ini, karena kangen update artikel disini kali ini saya akan berbagi sedikit cara tentang bagaimana cara memodifikasi kotak komentar, walaupun kotak komentar bawaan dari blogger sudah bagus sih, tapi gak ada salahnya kan merubahnya agar biar lebih enak dipandang, oke untuk bagaimana hasilnya nanti jika sudah diterapkan berikut gambarnya :


Gimana sobat enak dipandang kan? Jika sobat tertarik langsung ikuti langkah-langkah berikut, bisa mengikuti langkah pertama maupun kedua, pilih salah satu sobat :

(Langkah Pertama)
  • Masuk ke Akun Blogger Sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari ]]></b:skin> (Gunakan Ctrl+F untuk memudahkan)
  • Masukkan kode berikut di atasnya
/* ----------taharonqi.blogspot.com----------*/
.comments {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 5px 5px 5px 5px;}
.comments-content .comment-thread {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;}
.comments .comments-content .comment:first-child {
  padding-top: 0px;}
.comments .avatar-image-container {
  height: 36px;
  padding-left: 0px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .inline-thread {
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .comment-replies {
  margin-left: 48px;}
.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .continue a {
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;}
.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;}
.comment-form {
  max-width: 100%;
  width: 100%;}

  • Klik pratinjau, kalau tidak ada kesalahan klik simpan dan lihat hasilnya
(Langkah Kedua)

  • Masuk ke Akun Blogger Sobat
  • Pilih Template
  • Klik Edit HTML
  • Cari kode /* Comments----------------------- */ (Gunakan Ctrl+F untuk memudahkan)
  • Masukkan kode berikut di bawahnya
.comments {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 5px 5px 5px 5px;}
.comments-content .comment-thread {
  padding: 4px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;}
.comments .comments-content .comment:first-child {
  padding-top: 0px;}
.comments .avatar-image-container {
  height: 36px;
  padding-left: 0px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comment-block {
  padding-top: 4px;
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .inline-thread {
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .comments-content .comment-replies {
  margin-left: 48px;}
.comments .comment .comment-actions a {
  margin-right: 4px;
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;
  -moz-border-radius: 3px 3px 3px 3px;}
.comments .continue a {
  padding: 2px;
  background: #000000;
  border: 1px solid #24B200;}
.comments .comments-content .datetime {
  float: right;
  margin-right: 4px;}
.comments .comments-content .icon.blog-author {
  float: right;
  margin-right: 3px;}
.comment-form {
  max-width: 100%;
  width: 100%;}
  • Klik pratinjau, kalau tidak ada kesalahan klik simpan dan lihat hasilnya
Keterangan :
Waktu Mencari Kode kalau tidak ketemu, bisa mencari yang hampir mirip.

Mungkin itu saja yang dapat saya bagi kepada sobat-sobat blogger semua pada kesempatan kali ini, jika ada pertanyaan sobat bisa berkomentar, terima kasih.