Sabtu, 02 April 2011

Mempercantik Embedded Comment Form di Blogger

Di posting ini Gin sudah menjelaskan bagaimana cara memasang embedded comment form di Blogger dan di sini Gin sudah menjelaskan beberapa solusi dari masalah pemasangan yang ada. Tapi, tetap saja ada yang kurang ya, yakni tampilan comment form ini terlalu standar. Namun tenang saja, karena sekarang Gin akan memberitahu bagaimana caranya mengubah tampilan embedded comment form yang standar itu menjadi lebih menarik seperti yang digunakan di Gin Vegas dot Com. Nah, bagaimana cara mempercantik embedded comment form di Blogger? Silakan ikuti dan coba langkah-langkah mudah berikut:

Pergi ke Layout > Edit HTML. Pada bagian CSS, tambahkan selector baru, yakni:

.comment-form {}

Kemudian, isi selector baru tersebut dengan code dan pengaturan CSS sesuka hati Anda, misalnya seperti yang digunakan di Gin Vegas dot Com:


.comment-form {
background:#fff9fa; /* Mengatur warna background */
border:5px solid #ece7e6; /* Mengatur border */
margin:0 10px 20px 10px; /*Mengatur margin */
padding:0 0 0 15px; /* Mengatur padding * /
-moz-border-radius:10px /*Rounded corners for Firefox */}

Save template Anda, dan sekarang embedded comment form Anda Anda kelihatan lebih indah, hehehe...

Anda juga bisa menggunakan image untuk background, lho. Caranya: pertama, siapkan image yang kira-kira ukurannya pas dengan embedded comment form Anda. Kemudian, pada property background di atas, ganti value-nya menjadi:

.comment-form {
background:transparent url(http://url-image-Anda-dihost) no-repeat left top;
margin:0 10px 20px 10px;
padding:0 0 0 15px;}

Bila menggunakan latar image, elemen-elemen border sebaiknya dihapus seperti contoh di atas. Kemudian, untuk margin dan padding, silakan disesuaikan sendiri dengan peletakan image Anda. Sekarang, embedded comment form di Blogger Anda pasti akan tampak lebih menawan, dan pastinya mengundang banyak komentar. Selamat mencoba!

Tidak ada komentar:

Posting Komentar