Cara membuat halaman kontak di Blogger

Berikut ini adalah langkah-langkah membuat halaman kontak di Blogger. Contoh hasil darim halaman kontak tersebut dapat dilihat di halaman kontak blog ini.

  1. Pertama, tambahkan gadget formulir kontak terlebih dahulu. Caranya, pada halaman dashboard Blogger pilih Tata Letak kemudian pilih Tambahkan Gadget. Selanjutnya akan muncul jendela baru, kemudian cari dan pilih Formulir Kontak, kemudian pilih Simpan.

  2. Gadget formulir kontak tersebut akan muncul di setiap halaman blog. Untuk menonaktifkannya, pada dashboard Blogger pilih Tema. Pada bagian Tema Saya, pilih SESUAIKAN. Pada bagian Lanjutan, pilih Tambahkan CSS. Pada bagian Tambahkan CSS khusus masukkan kode:
    3. #ContactForm1{display:none !important;}

  3. Buat halaman khusus untuk kontak. Caranya pada dashboard Blogger pilih Halaman, kemudian klik tanda tambah untuk menambah halaman. Buat judul halaman kontak misalnya Contact. Pada bagian posting, masukkan kode formulir kontak berikut ini:
    4. <div class="form">
  <form name="contact-form">
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Nama&quot;;}" onfocus="if (this.value == &quot;Nama&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Nama"/>
    <p></p>
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email&quot;;}" onfocus="if (this.value == &quot;Email&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email"/>
    <p></p>
    <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Tinggalkan pesan...&quot;;}" onfocus="if (this.value == &quot;Tinggalkan pesan...&quot;) {this.value = &quot;&quot;;}" value="Tinggalkan pesan..."></textarea>
    <p></p>
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
    <br />
    <div style="max-width: 500px; text-align: center; width: 100%;">
      <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
      <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
    </div>
  </form>
</div>

  4. Untuk mempercantik halaman kontak, tambahkan kode CSS berikut:
    5. <style>
.contact-form-name, .contact-form-email, .contact-form-email-message,
.contact-form-subject, .contact-form-country {
   max-width: 300px;
   width: 100%;
   font-weight: bold;
 }
 .contact-form-name {
   display: inline-block;
   background: #FFF;
   background-color: #FFF;
   color: #A1A1A1;
   font-family: Arial, sans-serif;
   font-size: 13px;
   font-weight: bold;
   height: 30px;
   margin: 0;
   margin-top: 10px;
   margin-left: 10px;
   padding: 15px 15px 15px 5px;
   vertical-align: top;
   border: 1px solid #ddd;
   box-sizing: border-box;
 }
 .contact-form-email {
   display: inline-block;
   background: #FFF;
   background-color: #FFF;
   color: #A1A1A1;
   font-family: Arial, sans-serif;
   font-size: 13px;
   font-weight: bold;
   height: 30px;
   margin: 0;
   margin-top: 20px;
   margin-left: 10px;
   padding: 15px 15px 15px 5px;
   vertical-align: top;
   border: 1px solid #ddd;
   box-sizing: border-box;
 }

 .contact-form-subject {
   display: inline-block;
   background: #FFF;
   background-color: #FFF;
   color: #A1A1A1;
   font-family: Arial, sans-serif;
   font-size: 13px;
   font-weight: bold;
   height: 30px;
   margin: 0;
   margin-top: 20px;
   margin-left: 10px;
   padding: 15px 15px 15px 5px;
   vertical-align: top;
   border: 1px
   solid #ddd;
   box-sizing: border-box;
 }
 .contact-form-country {
   display: inline-block;
   background: #FFF;
   background-color: #FFF;
   color: #A1A1A1;
   font-family: Arial, sans-serif;
   font-size: 13px;
   font-weight: bold;
   height: 30px;
   margin: 0;
   margin-top: 20px;
   margin-left: 10px;
   padding: 15px 15px 15px 5px;
   vertical-align: top;
   border: 1px solid #ddd;
   box-sizing: border-box;
 }

 .contact-form-email:hover, .contact-form-name:hover {
   border: 1px solid #bebebe;
   box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
   padding: 15px 15px 15px 5px;
 }

 .contact-form-email-message:hover {
   border: 1px solid #bebebe;
   box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
   padding: 10px;
 }
 .contact-form-email-message {
   background: #FFF;
   background-color: #FFF;
   border: 1px solid #ddd;
   box-sizing: border-box;
   color: #A1A1A1;
   display: inline-block;
   font-family: arial;
   font-size: 12px;
   margin: 0;
   margin-top: 20px;
   margin-left: 10px;
   margin-bottom: 10px;
   padding: 10px;
   vertical-align: top;
   max-width: 500px!important;
   height: 120px;
   border-radius: 4px;
 }
 .contact-form-button {
   cursor: pointer;
   height: 30px;
   line-height: 30px;
   font-weight: bold;
   border: none;
 }
 .contact-form-button {
   display: inline-block;
   zoom: 1;
   /* zoom and *display = ie7 hack for
   display: inline-block */ *display: inline;
   vertical-align: baseline;
   margin: 0 10px;
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: 14px/100% Arial, Helvetica, sans-serif;
   padding: .5em 2em .55em;
   text-shadow: 0 1px 1px rgba(1, 1, 1, .3);
   -webkit-border-radius: .2em;
   -moz-border-radius: .2em;
   border-radius: .2em;
   -webkit-box-shadow: 0 1px 2px rgba(1, 1, 1, .3);
   -moz-box-shadow: 0 1px 2px rgba(1, 1, 1, .3);
   box-shadow: 0 1px 2px rgba(1, 1, 1, .3);
 }
 .contact-form-button:hover {
   text-decoration: none!important;
   border: none!important;
 }
 .contact-form-button:active {
   position: relative;
   top: 1px;
 }
</style>

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara menghilangkan titik item daftar urutan HTML

Dalam penulisan daftar di html kita memerlukan kode ol atau ul dan li . Misalnya <ul> <li>Apel</li> <li>Belimbing</li> <li>Cempedak</li> <li>dan seterusnya</li> </ul> Hasilnya adalah sebagai berikut. Apel Belimbing Cempedak dan seterusnya Namun kadangkala tanda titik sebelum item daftar tidak kita perlukan dan ingin dihilangkan. Cara menghilangkannya adalah dengan menambahkan kode style="list-style: none;" . <ul style="list-style: none;"> <li>Apel</li> <li>Belimbing</li> <li>Cempedak</li> <li>dan seterusnya</li> </ul> Hasilnya adalah sebagai berikut. Apel Belimbing Cempedak dan seterusnya Selain cara tersebut, kita juga bisa menambahkan kode css. Kodenya adalah ul { list-style-type: none; } atau dengan menggunakan class .tanpatitik { list-style-type: none; }
Baca selengkapnya

Ganti kode footer Datenstrom Yellow

Secara default , Datenstrom Yellow ] tidak menampilkan footer pada halaman website. Oleh karena itu kode pada /system/layouts/footer.html saya ganti menjadi kode di bawah ini agar footernya bisa tampil. <div class="footer" role="contentinfo"> <div class="siteinfo"> &copy; <a href="<?php echo $this->yellow->page->getBase(true)."/" ?>"><?php echo $this->yellow->page->getHtml("sitename") ?></a> </div> </div> </div> <?php echo $this->yellow->page->getExtra("footer") ?> </body> </html>
Baca selengkapnya

Cara Mengimpor Koordinat Titik (Point) dari Microsoft Excel ke QGIS

Untuk mengimpor koordinat-koordinat titik ( points ) ke QGIS, kita membutuhkan nilai-nilai koordinat titik dalam format Microsoft Excel yang memiliki dua kolom koordinat utama yaitu kolom x dan kolom y. Kemudian ubah format penyimpanan data Microsoft Excel yang berekstensi Excel Workbook ( .xlsx ) atau Excel 98-2003 Workbook . ( .xls ) ke Comma Delimited ( .csv ). Caranya adalah sebagai berikut. Buka file data koordinat titik dengan program Microsoft Excel. Klik menu File > Save As . Jika ingin mengganti nama file , ubah nama file pada File name . Ubah bagian Save as type dari Excel Workbook atau Excel 98-2003 Workbook ke CSV (Comma delimited) . Klik Save . File yang terbentuk dari hasil penyimpanan tersebut adalah file yang berekstensi .csv . Selanjutnya impor data yang telah berformat Comma Delimited ( .csv ) ke QGIS. Caranya adalah sebagai berikut. Buka program QGIS. Program QGIS yang saya gunakan adalah QGIS versi 3.8.0-Zanzibar. Pilih menu Layer > Add L
Baca selengkapnya

Cara backup dan restore WordPress ke localhost

Ada empat langkah yang harus dilakukan dalam rangka mem- backup dan restore WordPress dari domain website ke localhost , yaitu: backup file dan folder, backup database , restore file /folder dan database ke localhost , hubungkan file /folder dengan database . Backup file dan folder Login ke CPanel . Pada bagian File , pilih httpdocs . Kompres ke jenis file .zip semua file yang ada di folder httpdocs , caranya pilih semua file dan folder yang ada dalam folder tersebut, kemudian klik Add to Archive . Beri nama file yang akan dikompres ke .zip tersebut, percobaan kali ini saya memberi nama file wordpress.zip . Setelah file .zip terbentuk di folder httpdocs , download file tersebut. Setelah selesai proses download , hapus file tersebut yang ada di web hosting agar tidak menambah beban web hosting . Backup database Pada CPanel pilih Database . Pilih phpMyAdmin . Selanjutnya akan terbuka halaman baru yaitu halaman database dan klik database W
Baca selengkapnya

Cara update QGIS tanpa uninstall versi sebelumnya

Jika gagal meng- update QGIS di dengan cara meng- install versi terbaru dari QGIS di Windows, maka lebih baik melakukan cara berikut tanpa melakukan uninstall QGIS versi sebelumnya. Buka website QGIS di browser . Klik Download . Pada bagian Download for Windows pilih OSGeo4W Network Installer sesuai sistem Windows yang digunakan (32-bit atau 64-bit). Selanjutnya akan ter- download file osgeo4w-setup-x86_64.exe . Klik dua kali file hasil download tersebut, selanjutnya akan muncul jendela OSGeo4W Setup dan pilih Advanced Install , kemudian klik Next . Berikutnya akan muncul jendela OSGeo4W Setup - Choose Install dan pilih Install from Internet . Berikutnya tinggal di- next kan saja hingga akhir. Update QGIS akan berjalan secara otomatis.
Baca selengkapnya