cara memberi efek pada kotak komentar

Friday, March 25, 2011

Agar blog kita tampak lebih cool ada baiknya kita memberi sedikit pernak-pernik di dalamnya, salah satunya adalah memberi background pada kotak komentar. Saat melihat komentar di blog saya, ada sobat yang bertanya begini :

oiya bagaimana cara mengganti background form komentar kayak jadi bintang kerlap-kerlip seperti tempat komentar punya saya..... begini sob??
Langsung saja saya membuat postingan ini.

Langkah-langkah membuat backgroundnya sebagai berikut :
1. Login ke Blogger
2. Klik Rancangan > Edit HTML
3. Jangan lupa klik tulisan Download Template Lengkap ( untuk menghindari hal-hal yang tidak diinginkan )
4. Beri tanda centang pada tulisan Expand Template Widget
5. Lalu cari kode ]]></b:skin> gunakan tombol Ctrl + F atau (F3) untuk mempercepat pencarian
6. Jika sudah ketemu, Copy kode berikut dan Letakkan di atas kode tersebut

    #kotak_komentar{
    background: url(http://i1013.photobucket.com/albums/af256/iroelst/green_plants.jpg) ;
    padding:20px;
    width:530px;
    height:250px;
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   -webkit-box-shadow: 2px 2px 4px #8bd268;
   -moz-box-shadow: 2px 2px 4px #8bd268;
     }

   #kotak_komentar:hover{
   background: url(http://i1013.photobucket.com/albums/af256/iroelst/background_hover.gif);
   -webkit-box-shadow: 2px 2px 20px #cc40fb;
   -moz-box-shadow: 2px 2px 20px #cc40fb;
   }


7. Kemudian scroll ke bawah dan cari kode seperti berikut :

  <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>

  Jika sudah ketemu letakkan kode dibawah ini diatasnya yang baru anda cari.

  <div id='kotak_komentar'>

  Dan kode yang ini  dibawahnya kode yang baru anda cari.

  </div>

Keterangan : ganti kode yang berwarna Putih sesuai dengan Template sobat.
Kemudian SIMPAN TEMPLATE dan lihat hasilnya

Selamat Mencoba,,,,Jangan Lupa Komentarnya ya,,,,,,,,


0 comments:

Post a Comment

Komentar anda adalah motifasi Saya

 
© Copyright 2011 Kang Abeng | Tutorial Blog | Tutorial Komputer Ngeblog
Bambang Aribowo ilmukomputerbsb | Berbagi Ilmu |Berbagi Pengalaman Kang Abeng.