Membuat Background Kotak Komentar Lebih Menarik

Membuat Background Kotak Komentar Lebih Menarik, dari judulnya aja udah menarik, tapi cara ini tidak terlalu sulit untuk dilakukan. Sobat blogger pasti bisa melakukannya, tujuan dari membuat background kotak komentar lebih menarik adalah agar kita tidak bosan dengan tampilan kotak komentar yang putih polos.

Ada kalanya kita bosan dengan tampilan itu, tidak ada salahnya kita membuat perubahan kan, yang tentunya menjadi lebih baik. Saya baru mendapatkan komentar di potingan Cara Membuat NetworkedBlogs Followers Facebook oleh salah satu sahabat blogger saya yang katanya "mantab gan tutorialne,..bdw nek ngsih efek pada kotak komentar gmna gan...? boleh brbagi...???". Nah karena iseng-iseng saya share dech cara membuatnya.

Berikut ini screenshot nya :

Membuat Background Kotak Komentar Lebih Menarik


Jika sobat tertarik, ikuti langkah-langkah berikut ini :
  1. Masuk ke blogger;
  2. Klik Perancangan lalu klik Elemen Laman;
  3. Klik Expand Template Widget (jangan lupa backup template sobat terlebih dahulu);
  4. Kemudian tambahkan kode CSS berikut ini diatas kode ]]></b:skin>
#comment-form iframe{
   background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2lA1AAdE61Uicpb1kvR_VT7fWn5IvYf2JVVcdCFJ0JakQ4z0YvC3ICbPIhulUAQBxlBQ5gVaf8FXRXc6t6pIkdLouEQbVYbYABLhJhBihyyTIEvYp_v8WYz5H9hWE9zQlgpbrO8eASEk/s1600/rumput.jpg) ;
   border:5px solid #9999FF;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:450px;
   height:230px;
   }

#comment-form iframe:hover{
   background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVrhIx9YkwOaTsF3t4TNpIwrbzcaLB4mg9rrUbszMqtLR4E0wgZx2Pl-NsowsZt1OZNWitcX77FztVo-O5YOYPgjRvK0cq1wpR0-4f8abl_Q6tcrVDPlkFnvvz8vHop6IZLKflsiyCQU/s1600/bintang.gif);
   border:7px solid #999FFF;
   }
    Jika kode tersebut telah ada, maka sobat hanya perlu memodifikasi elemen yang ada di dalamnya, saya menemukan sebagian template tidak memiliki kode tersebut. Sobat bisa merubah gambar background sesuka hati sobat.
  1. Selanjutnya sobat cari kode yang mirip seperti ini:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/>
  1. Kemudian pastekan kode <div id='comment-form'> dan </div> diantara kode tadi sehingga menjadi seperti ini:
<div id='comment-form'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/>
</div>
  1. Langkah terakhir adalah simpan template sobat
Semoga tutorial ini bermanfaat buat sobat blogger.

19 Komentar "Membuat Background Kotak Komentar Lebih Menarik", Baca atau Masukkan Komentar

Bima Cahya Nugraha said...

tes...

Kabar Dunia said...

Berhasil Bang

Ary_Putra said...

Coba dulu ah gan..siapa tahu bs. Makasih Tutornya mas.

AJENG said...

makasi ya mz...tp bikin berat gak ya,,,
jgn lupa mampir ya...
http://www.info-asik.co.cc/

Aldino Rahman said...

berhasil gan makasih atas infonya ya

Rara Nurisnaini Yanuarina said...

tmks sebelumnya ats artikelnya, tp gmana cr bikin tambilan mouse qt jd kya si blog ini ?? tlong kirim jawabannya ke raranurisnainiyanuarina@ymail.com ya tmksh skali agi

AsyArieL Gate said...

thanks bro....!!!!!!

http://asyariel.blogspot.com/

aditya said...

sepertinya ini akan sangat membuat blog menjadi berat...
tapi tergantung pada koneksi internet....
:)

http://adityaananda.com

KIAT SEHAT said...

wah semua udah aku terapkan di blog ku.... hasil nya bgus jg..... hanya ynag bkin mls ya cari2 nya.. lama bngt...
thx ya.. di tunggu update nya....
i like it

Belajar SEO said...

kunjungan subuh... tadinya mo sholat subuh eh ada artikel menarik ya udah sikat dulu 2 menit selesei di form komentar saya jadi bagus berkat agan... hehehe.. thanks 4 share oia gan nitip blog yang masih butuh bimbingan http://brotherrickyxp.blogspot.com/ terimakasih ditunggu kunjungan baliknya gan ;)

pernak pernik cantik said...

wah tutorial yg bagus mas,
mas maw tanya, kalow punyaq kog gak ada kode ya mas, nambahin, atau solusinya gimana mas, trims

╚══█▓▒╣ [̲̅̅N̲̅][̲̅̅a̲̅][̲̅̅u̲̅][̲̅̅f̲̅][̲̅̅a̲̅][̲̅̅l̲̅] [̲̅̅p̲̅][̲̅̅r̲̅][̲̅̅i̲̅][̲̅̅b̲̅][̲̅̅a̲̅][̲̅̅d̲̅][̲̅̅i̲̅] ╠▒▓█══╝ said...

kalau pakai trik ini lebar kotak komentar ga bisa di atur...thx infonya...

Gaming said...

kreeennnnn browwwwwwww

amalbugiezpopeye said...

thansk bro

yalza said...

yg jd mslh, mo msk ke blog mna? npe gak lbh simple jelasinx gan?

Anonymous said...

langsung tes langsung berhasil..

thanks kang..hehe

Anonymous said...

mantab infonya, salam kenal

Unknown said...

jadi lagi mas.. banyak ilmu di blog ini, khususnya pagi pemula seperti saya.. langsung tersenyum lebar.. copas, jadi. hihihhi

steel product said...

SEMPURNA

Followers