Nurhamka Blog Belajar Ngeblog dari sekarang bersama Kami

Cara Baru Membuat Halaman Kontak Di Blog

 

Cara Baru Membuat Halaman Kontak Di Blog – Halaman Kontak memiliki sebuah peranan penting dalam sebuah Blog, bahkan Pihak Google juga sangat merekomendasikan untuk membuat halaman ini, selain itu halaman ini sangat banyak sekali manfaat nya bagi pemilik blog, diantaranya adalah:

  1. bisa terhubung dengan pelanggan
  2. memudahkan dalam kerja sama
  3. dan masih banyak

Nah di bawah ini ada sedikit Tutorial tentang cara membuat Halaman Kontak, jadi simak terus ya.

 

CARA CARA

1.Silahkan anda masuk dulu ke halaman utama Blog anda

2. kemudian pilih menu Template/tema

3. kemudian pilih lagi Edit html

4. kemudian cari kode </style> atau kode ]]></b:ski>

5. jika sudah ke temu kode di atas, silahkan tempelkan kode di bawah ini tepat di atas nya

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

6. kemudian silahkan tempel kan kode di bawah ini tepat di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

7. kemudian silahkan simpan Template nya.

8. Langkah selanjutnya silahkan masuk ke menu Halaman

9. kemudian klik buat Halaman Baru dengan judul “Kontak”

10. jangan lupa atur komentar nya jangan sampai halaman nya bisa di komentar oleh orang lain

11. kemudian ubah mode tulisan nya dari mode compose mennjadi mode html

12. lalu silahkan anda copy script di bawah ini

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

13. kemudian silahkan publikasikan halaman kontak anda.

dan lihat hasil nya.

 

Nah itulah sedikit Tutorial tentang Cara mudah membuat Halaman Kontak di Blog semoga artikel saya bermanfaat, dan selamat mencoba


Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *