Membedakan Background Komentar Author pada Komentar Posting Blogger

Dalam tutorial ini, kita akan mempelajari bagaimana membuat perbedaan tampilan komentar author dengan pembaca blogger yang lainnya (dalam hal ini latar belakang, warna, border dan lain sebagainya). Untuk itu, kita perlu menambahkan kode dalam template blogger dan sedikit me-modifikasi-nya dengan gaya yang sesuai selera kita. Kurang lebih hasilnya akan seperti gambar dibawah ini.

Silahkan ikuti langkah-langkah berikut:

Langkah 1. Masuk ke menu "Template" dan klik "Edit HTML"

Langkah 2. Cari tag (kode HTML) ini:

</body>

Langkah 3. Di atas tag tersebut, silahkan copy/paste kode dibawah ini:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Kustomisasi

1. Border (Garis)
Kode untuk garis direpresentasikan dengan warna orange. Dimana artinya dari kode berikut adalah:

• 1px - Anda dapat menambah nilai atau mengganti nilai ketebalan border
• solid - Anda dapat mengganti style border dengan yang lain, contoh: dotted, dashed, inset etc
• #FFA500 - Ini adalah nilai dari warna border, anda dapat mengganti nilainya sesuai dengan warna selera anda.

2. Background (Latar Belakang)
Kode untuk latar belakang direpresentasikan dengan warna biru. Anda bisa menggunakan warna yang umum atau gambat. Secara umum adalah kombinasi keduanya (gambar putih transparan dengan warna agak keabu-abuan). Dimana arti dari kode berikut adalah:

• #F1F1F2 - Ini adalah nilai dari warna latar belakang. Anda dapat mengganti nilainya sesuai dengan warna selera anda.
• http://www.blogblog.com/1kt/transparent/white80.png - Ini adalah URL image (gambar) yang anda gunakan. Anda dapat menggantinya sesuai dengan image yang anda butuhkan dan sesuai dengan URL yang ada tentunya.

3. Warna Font
Kode untuk warna font direpresentasikan dengan warna hijau. Anda cukup mengganti nilai #444444 dengan warna yang anda suka (tentunya dengan kode hex warna yang sesuai).

4. Ukuran Font
Kode untuk ukuran font direpresentasikan dengan warna merah. Anda cukup mengganti nilai 12px dengan ukuran yang lebih sesuai dengan selera anda, contoh: 14px, 16px, 17px dan seterusnya.

Langkah 4. Sekarang Save (Simpan) perubahan pada Template anda.

Jika ada kesulitan, silahkan tuliskan pada bagian komentar dibawah.