Panduan Memasang Widget 'Hubungi Kami' Yang Mantap Di Blog

Tidak lama dahulu Blogspot pernah memperkenalkan satu widget yang membolehkan sesiapa sahaja yang mengunjungi  blog anda meninggalkan pesanan atau bertanya tentang info yang terdapat dalam artikel yang ditulis tanpa perlu membuka email.

Tapi sayang sekali, widget ini tidak digunakan secara meluas oleh para blogger kerana menganggap widget Contact Form ini tidak mendatangkan apa-apa kelebihan pada blog mereka. Selain itu widget ini hanya boleh dipasang di sidebar atau di bahagian ruangan  footer blog.

Jangan risau, kini semunya tidak menjadi masalah lagi apabila widget Contact Form  ini boleh dipasang pada static page dengan penampilan yang menarik. Klik sini untuk melihat rupa sebenar Contatc Form tersebut setelah dipasang pada halaman tunggal (static page).

Macam mana? Menarik Bukan! Jika anda ingin memasang widget Contact Form di blog, ikutilah panduan yang disediakan seperti di bawah:

Pertama: Menambah gajet Contact Form dengan menekan butang Add a Gadget

Setelah anda selesai menambah widget Contact Form, alihkan kedudukan widget tersebut ke bahagian bawah kotak Catatan Blog (Posting Blog).

Kedua: Untuk langkah seterusnya ialah menyembunyikan widget Contact Form dengan menggunakan CSS dengan menyalin (copy) kod di bawah.

.widget.ContactForm { 
display: none; 
}

Pergi ke bahagian menu sebelah kiri klik pada Template dan klik Edit HTML. Setelah itu tampalkan (paste) kod di atas tadi di atas kod ini: 

]]></b:skin> 

Ketiga: Bina satu halaman tunggal (Static Page) dengan masuk ke menu Laman (Page), kemudian klik pada New Page untuk mencipta laman tunggal yang baru dengan tajuk yang bersesuaian.

Pilih edit, kemudian pilih mode HTML dan salin dan tampal (copy & paste) sepenuhnya kod di bawah ini pula untuk langkah terakhir. Untuk Info Anda, setiap pesanan yang dikirim melalui Contact Form ini akan dihantar secara terus ke alamat email yang anda selalu gunakan untuk log masuk ke Blogspot.

<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>

Jika anda yakin semua langkah-langkah ini dilaksana dengan mengikut aturanya, klik Publish dan lihat hasilnya. Sekiranya anda rasa tutorial blog ini bermanfaat, sila klik butang pilihan 'share' di bawah agar info ini dapat disebarkan pada yang lain. Terima kasih.