Memperindah Kotak Comment Blogger/Blogspot Dengan CSS

menghias kotak komentar blog
Cara ini saya dapat setelah sedikit belajar otak-atik CSS dengan teman karena pengen banget membuat kotak comment (yang sebelumnya terkesan "biasa" di dalam template Blogger ini) terlihat lebih "berwarna" dan "senada" dengan warna template blog ini.
Akhirnya kita menggunakan konsep frame untuk menghias sekeliling kotak comment tersebut. Caranya pun sangat sederhana dan mudah. Berikut langkah-langkah dan kodenya:

1. Masuk ke dashboard Blogger  => Design => Edit HTML/Edit Template

2. Jangan lupa backup dulu template yang lama untuk berjaga-jaga apabila ada kesalahan dalam editing.

3. Centang expand widget template di sebelah kanan.

4. Cari kode => ]]></b:skin> (Gunakan Ctrl+F untuk mencari)

5.Copy kode CSS dibawah ini dan letakkan tepat sebelum/diatas tag tersebut.
#comment-form iframe{
background:#7f9db9;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9;
border:7px solid #bababa;
}
6. Setelah itu save dan coba dilihat hasilnya.

Ganti width dan height sesuai dengan ukuran yang anda inginkan. Begitu pula dengan warna, ganti kode background sesuai dengan keinginan. Untuk kode-kode warna, silakan lihat Hex Color Code Chart Generator.

Memperindah Kotak Comment Blogger/Blogspot Dengan CSS
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 19 Comment(s):

ScriptMarketer's Blog said...

Saya suka dengan CSS..

Koreksi nih boss,

pada bagian: background:#7f9db9 url() no-repeat bottom right;

yang saya cetak tebal seharusnya ngga usah ditulis. Karena tidak ada URL image di sana. Jadi biarkan penulisannya

background:#7f9db9;

BTW, I love this Post :-)

azmee/satreeo said...

wuitz bener juga yah....stelah beneran tak coba di template lain juga ga ngefek tu. oke deh, segera update n edit posting nih. thanks om SM ^^

ianxx said...

bang nanya dong biar ada tambahan anonym di comment nya gimana ya?? saya masih newbie nih XD

Ahmad Khoirul Azmee said...

masuk ke settings/pengaturan > comments > who can comment > pilih opsi di bagian paling atas (anyone/siapa saja) > save.

MangDe | Blogger said...

cara mengganti warna tulisan komentar admin kayak om ini gmn ya? warna tulisan adminnya beda dengan warna tulisan commenter yang laen

Ahmad Khoirul Azmee said...

itu dengan menambahkan elemen div baru pada widget komen. kemudian membuat aturan CSSnya. Nanti, secepatnya akan saya buat postingnya aja bro, soalnya panjang.

elang said...

punya saya kok ga muncul ya mas, udah saya copy sesuai perinyah diatas, tapi tidak ada perubahan, mohon pencerahannya,terima kasih,, :)

Ahmad Khoirul Azmee said...

Punya anda adalah template yang sangat lama. CSS utama tidak dimasukkan di dalam b:skin. Coba dengan cara ini:

Tambahkan <style type="text/css"> di atas kode dan </style> di bawah kode, jadinya:

<style type="text/css">
#comment-form iframe{
background:#7f9db9;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9;
border:7px solid #bababa;
}
</style>

Lalu cari </head> dan masukkan kode TEPAT di atas-nya / sebelum-nya.

Ardhian Eka Praditya said...

bgaimana cara membuat Menu/Navigation seperti punyanya k.Ahmad ??

boxsoffice said...
This comment has been removed by a blog administrator.
PAN said...

ijin sedot gan. . .

sukague.com said...

gampang-gampang susah ya :)

die_182 said...

siiippp.....mantap gan

Muhammad Abu Abdillah said...

mas cara buat avatar seperti diblog ini bagaimana ?

Halim Pakpahan said...

bng :D gambar ayam nya lucu hahahaah :D saya terbhak2 ternyata temannya uda di goreng :D kasihan si ayam

K2 Ichsan said...

Tips tersebut di atas sudah saya terapkan, tapi mengapa tidak ada perubahan alias tidak muncul ya?

Btw, saya coba dengan yang jawaban sobat (yang disimpan di atas kode head). Namun hasilnya sama, tidak ada perubahan sob.

Mohon bantuan & pencerahannya...
ﺸﻜﺮﺍﻜﺜﻴﺮﺍﺠﺰﻜﻢﺍﷲﺨﻴﺮﺍﻜﺜﻴﺮﺍ atas perhatian serta kesediaan sobat...

Akang Bayan said...

manteb gan css nya,,,

Rabbani Abduh said...

thx.. info ny..

dedy mizwar said...

kok ngak muncul apa-apa ya mas? masih kotak yg standar aja
saya coba disini http://mysimpliciti.blogspot.com/

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap