Sebelumnya saya pernah membahas bagaimana Cara Memberi Background pada Kotak Komentar.
Kali ini saya akan menjelaskan bagaimana Cara Memberi Background Kotak Komentar dengan CSS3, karena sudah jamannya menggunakan CSS3 biar nggak ketinggalan jaman.
Langsung saja kita praktekkan cara membuatnya :
Seperti biasa Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
lalu cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
Jika sudah ketemu, Copy kode berikut dan Paste di atas kode tersebut
#kotak_komentar{
background: url(http://i1002.photobucket.com/albums/af149/Imtikhan/background.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://i1002.photobucket.com/albums/af149/Imtikhan/background_hover.gif);
-webkit-box-shadow: 2px 2px 20px #cc40fb;
-moz-box-shadow: 2px 2px 20px #cc40fb;
}
background: url(http://i1002.photobucket.com/albums/af149/Imtikhan/background.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://i1002.photobucket.com/albums/af149/Imtikhan/background_hover.gif);
-webkit-box-shadow: 2px 2px 20px #cc40fb;
-moz-box-shadow: 2px 2px 20px #cc40fb;
}
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>
<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 berikut diatasnya
<div id='kotak_komentar'>
Dan kode berikut dibawahnya
</div>
Maka hasilnya akan menjadi seperti berikut :
<div id='kotak_komentar'>
<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>
</div>
<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>
</div>
Keterangan : ganti kode yang berwarna biru sesuai dengan Template sobat.
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya
Selamat mencoba
0 komentar:
Posting Komentar