Bagaimana Untuk Menyesuaikan Blogger Komentar Dengan Menambahkan Warna Background Dan Border

Komentar merupakan bagian penting dari sebuah blog karena di dalamnya tercermin pendapat pembaca tentang posting atau blog kita, sehingga sangat penting untuk menghabiskan sedikit waktu kita untuk membuat bagian ini tampak lebih rapi, mudah diakses dan rapi. 

Untuk mengatur agar komentar kami, perlu untuk membuat setiap komentar mudah untuk mengidentifikasi, karena itu untuk mengetahui dari mana dimulai dan di mana itu berakhir, jika tidak menjadi tumpukan surat yang pembaca dapat melarikan diri. Berikut adalah beberapa cara untuk membuat beberapa urutan dengan memisahkan masing-masing komentar. 

- Tambahkan Separator Untuk Blogger Komentar 
- Tambahkan Divider bawah Komentar di Blogger 
- Sepenuhnya Sesuaikan Blogger Anda Komentar Dengan Mengubah Warna Latar Belakang dan Perbatasan 

Metode pertama adalah yang paling mudah, dan tentang bagaimana untuk menempatkan perbatasan di bawah komentar kita, ini adalah untuk memisahkan setiap komentar blog dengan cara yang sederhana namun efektif. 
 

Cara Tambah Separator / Border Untuk Blogger Komentar

. Langkah 1 Untuk menambahkan separator sederhana pergi ke Template> Edit HTML dan klik pada tanda panah kecil di sebelah kiri <b:skin> ... </ b: skin> 

Langkah 2 Klik di manapun dalam area kode dan pencarian menggunakan tombol CTRL + F, untuk potongankode berikut.: 

 ]]> </ B: skin>

. Langkah 3 Tempelkan gaya berikut tepat di atasnya: 

- Jika kita menggunakan komentar berulir (dengan opsi jawaban): 

. Komentar-block {
border-bottom: 1px solid # 000000;
}

. Komentar. Terus {
border-top: 0px $ padat (widget.alternate.text.color);
}

- Jika kita menggunakan sistem komentar sebelumnya (dengan tidak ada pilihan jawaban) 

 # Comments-block. Comment-footer {
border-bottom: 1px solid # 000000;
}

Catatan: Untuk mengubah warna perbatasan itu, ganti nilai warna tebal dan mengubah ketebalan, peningkatan / penurunan nilai 1. 

Langkah 4. Simpan Template. 

Alih-alih perbatasan yang sederhana, kita juga bisa menambahkan divider / gambar antara komentar kami. 
 

Cara Tambah Divider (Gambar) Antara Setiap Komentar di Blogger

. Langkah 1 Pergi ke Template> Edit HTML dan cari (CTRL + F) untuk potongan kode berikut: 

 ]]> </ B: skin>

Screenshot:

Langkah 2 Sisipkan berikut tepat di atasnya.: 

- Jika kita menggunakan komentar berulir (dengan opsi jawaban): 

 . Komentar-block {

background-repeat: no-repeat;
background-position: center bawah;
Padding-bottom: 30 px;
margin-top: 10px-;
}

. Komentar. Terus {
border-top: 0px $ padat (widget.alternate.text.color);
}

- Jika kita menggunakan sistem komentar sebelumnya (dengan tidak ada fungsi reply) 

 # Comments-block. Comment-footer {

background-repeat: no-repeat;
background-position: center bawah;
height: 50px;
}

Catatan: URL yang biru merupakan gambar yang dapat Anda ubah sesuka Anda, hanya ingat bahwa pada ketinggian harus mengatur ketinggian gambar dengan 30px lebih, misalnya, jika tinggi gambar adalah 50px maka nilai akan 80px. Hal ini untuk memastikan bahwa gambar tidak akan tumpang tindih tanggal komentar. (Untuk komentar ulir, kenaikan / penurunan nilai padding 30) 

Langkah 3. Simpan Template. 

Tapi Anda masih dapat memiliki lebih gaya untuk setiap komentar, misalnya menambahkan warna latar belakang dan perbatasan. 
 

Bagaimana Tambahkan Sebuah Border dan Warna Latar Belakang Untuk Blogger Komentar

. Langkah 1 Pergi ke Template> Edit HTML dan mencari potongan kode berikut: 

 ]]> </ B: skin>

Langkah 2 Sisipkan berikut tepat di atasnya.: 

- Jika kita menggunakan komentar berulir (dengan opsi jawaban): 

 . Komentar-block {
background: # F9F9F9; / * Background Color * /
border: 1px solid # f1f1f1; / * gaya Border * /
margin-bottom: 20px;
-Webkit-box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
-Moz-box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
border-radius: 10px;
}

. Komentar. Komentar-thread.inline-benang {
background-color: # FAFAFA; / * Warna latar belakang balasan * /
border-left: 4px dotted # E6E6E6; / * Border di sisi kiri balasan * /
}

. Komentar-konten {
padding: 2px 10px 10px 10px;
color: # 444444; / * Font Color di Komentar * /
}

. Datetime a {
font-style: italic;
font-size: 9px;
margin-left: 2px;
}

. Komentar. Komentar-konten. Pengguna a {
color: # 1982D1; / * Penulis nama warna * /
font-size: 12px; / * Penulis ukuran nama * /
padding-left: 10px;
font-weight: bold;
text-decoration: none;
}

. Komentar. Komentar. Komentar-tindakan a,. Komentar. Komentar. Melanjutkan {
display: inline-block;
margin: 0 0 10px 10px;
padding: 15px 0;
color: # B4B4B7;
text-align: center;
text-decoration: none;
background: # F8F8FB;
border: 1px solid # C2C2C5;
border-radius: 4px;
height: 20px;
line-height: 20px;
font-weight: normal;
kursor: pointer;
}

. Komentar. Terus {
border-top: 0px $ padat (widget.alternate.text.color);
}

. Komentar. Komentar-konten. Icon.blog-author {
background-image: none;
margin-left: 10px-;
}

. Komentar. Avatar-image-container {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid # F2F2F2;
padding: 1px;
}

. Komentar. Avatar-image-container img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

Langkah 3. Simpan Template. 

- Jika kita menggunakan sistem komentar sebelumnya (dengan tidak ada fungsi reply): 

. Langkah 1 Cari baris ini di template Anda: 

 <b:loop values='data:post.comments' var='comment'>

. Langkah 2 Kemudian, tambahkan kode berikut tepat di bawah itu: 

 <div class='comments-ct'>

. Langkah 3 Carilah sedikit lebih bawah dan Anda akan melihat </ b: lingkaran> kode dan tepat di atasnya, tambahkan ini: 

 </ Div>

Langkah 4 Sekarang menemukan ini.: 

 ]]> </ B: skin>

Langkah 5 Dan tepat di atas itu, tambahkan kode CSS ini.: 

 . Komentar-ct {
background: # F9F9F9; / * Background Color * /
border: 1px solid # f1f1f1; / * Style Bprder * /
margin-bottom: 20px;
-Webkit-box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
-Moz-box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
box-shadow: 0 1px 2px RGBA (0, 0, 0, .4);
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
border-radius: 10px;
}

. Komentar-body {
color: # 444444; / * Font Color di Komentar * /
padding: 10px;
}

. Komentar-ct a {
padding-left: 5px; / * Link warna * /
color: # 4A9BD8;
}

. Komentar-timestamp {
font-style: italic;
font-size: 9px;
padding-right: 10px;
padding-left: 10px;
}

(Tepi yang bulat tidak akan bekerja di Internet Explorer dengan CSS) 

Dalam kedua kasus, Anda dapat mengubah warna latar belakang, perbatasan, dll. di bagian dengan penjelasan dalam warna hijau. 

Langkah 6. Simpan Template. 

Jika Anda membutuhkan bantuan lebih lanjut, meninggalkan komentar di bawah ini.