Buat Variable Definitions u Background, Teks & Border Blogger Threaded Comment

Sebuah cara untuk mempermudah memilih jenis font, warna teks, warna background dan border di kotak komentar blogger. Dengan membuat sebuah variable definitions yang berkaitan dengan ke empat variable di atas, maka blogger akan lebih mudah mengganti font, warna teks, background dan border kotak komentar dengan memanfaatkan fitur Ubah suaian » Perancang Template Blogger. Jika sebelumnya anda hanya bisa merubah beberapa variable deperti warna background header, body, font posting, sidebar dan beberapa yang lain, maka dengan adanya variable definitions kotak komentar akan ada tambahan item kotak komentar ("GR Kotak Komentar") yang berisi pilihan font, warna font, background dan border, seperti yang dapat anda lihat di gambar (Silahkan klik gambar untuk memperbesar)

Kode CSS

.comments .thread-chrome.thread-expanded .comment{
        background-color: $(GRbgreplay);
        border-radius:8px;
        border:1px solid $(GRwarnaborder);
}
.comments .thread-chrome.thread-expanded .comment{
        padding:5px;
}
.comments .comment-block{
        background-color: $(GRbgkomentar);
        padding:5px 8px;
        border-radius:5px;
        border:1px solid $(GRwarnaborder);
        margin:5px 5px 0 50px;
}
.comments .comments-content .comment-content{
        font: $GRtekskomentar;
        color: $GRwarnateks;
}

xHTML Variable Definitions blogger comment

<Group description="GR Kotak Komentar" selector=".comments">
<Variable name="GRtekskomentar" description="GR Teks Komen" type="font" default="normal normal 100% 'Times New Roman', Verdana, Trebuchet, Arial, Sans-serif" value="normal normal 100% Arial"/>  
<Variable name="GRwarnateks" description="GR Warna Teks Komen" type="color" default="#000000" value="#000000"/>
<Variable name="GRbgkomentar" description="GR Background Komen" type="color" default="transparent" value="transparent"/> 
<Variable name="GRbgreplay" description="GR Background Replay" type="color" default="transparent" value="transparent"/> 
<Variable name="GRwarnaborder" description="GR Border Komen" type="color" default="transparent" value="transparent"/> 
</Group>

1. Login ke Blogger
2. Template
3. Backup/Restore Template. Panduannya bisa dibuka disini
4. Edit HTML
   

   Template › Edit HTML

   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode css di atas kode ]]></b:skin>
   • Cari Teks : Variable definitions
   • Letakkan kode xHTML di bawah teks tersebut di atas beberapa variable definitions yang sudah ada di dalamnya. Anda bisa juga meletakkan di ujung paling bawah setelah variable definitions default blogger.
   • Simpan Template/Save Template
5. Selesai...
6. Lanjutkan dengan klik Ubah suaian
   

   Perancang Template Blogger

   • Tingkat Lanjut
   • Cari dan klik GR Kotak Komentar. Jika halaman monitor tak muat, silahkan perkecil hingga 75% melalui zoom browser atau gunakan Ctrl dan mouse untuk perkecil tampilan.
   • Pilih font, warna font, background & border
   • KLik Terapkan ke blog.
   • KLik Kembali ke blogger
7. Buka halaman posting, buat komentar dan lihat hasilnya!

Posisi kode css terhadap ]]></b:skin>

.comments .thread-chrome.thread-expanded .comment{
        background-color: $(GRbgreplay);
        ... dst
}
.comments .thread-chrome.thread-expanded .comment{
        padding:5px;
}
.comments .comment-block{
        background-color: $(GRbgkomentar);
        ... dst
}
.comments .comments-content .comment-content{
        font: $GRtekskomentar;
        color: $GRwarnateks;
}

Posisi xHTML Variable definitions

/* Variable definitions
   ====================
<Group description="GR Kotak Komentar" selector=".comments">
<Variable name="GRtekskomentar" description="GR Teks Komen" type="font" default="normal normal 100% 'Times New Roman', Verdana, Trebuchet, Arial, Sans-serif" value="normal normal 100% Arial"/>  
<Variable name="GRwarnateks" description="GR Warna Teks Komen" type="color" default="#000000" value="#000000"/>
<Variable name="GRbgkomentar" description="GR Background Komen" type="color" default="transparent" value="transparent"/> 
<Variable name="GRbgreplay" description="GR Background Replay" type="color" default="transparent" value="transparent"/> 
<Variable name="GRwarnaborder" description="GR Border Komen" type="color" default="transparent" value="transparent"/> 
</Group>