Cara buat kontak di halaman statis blog

Cara buat kontak di halaman statis blog

Sebuah blog akan terlihat profesional jika membuat formulir kontak di halaman statis. Dengan halaman statis kontak atau contact akan membuat pengunjung lebih mudah dan cepat dalam menghubungi admin blog.

Kontak di halaman statis blog.

Blogspot yang memiliki kontak di halaman statis membuat mesin pencari seperti google akan melihat keseriusan kita dalam mengelolah sebuah blog.
Di template bawahan blogspot sudah tersediah formulir kontak untuk memberi kemudahan dalam menggunakannya, lewat widget. Namun rasanya contact from yang disediakan kurang lengkap, untuk itu postingan Cara buat kontak di halaman statis di blog saya bagikan bagi yang ingin membuat kontak kami atau kontak saya di halaman statis.

Cara buat kontak di halaman statis blog.

Dalam membuat kontak di halaman statis untuk blog tidak terlalu sulit, silahkan ikuti petunjuk di bawah ini.
  • Langkah pertama.

  • Silahkan buka akun Blogger (login) kemudian masuk  ke menu Halaman, Buatlah halaman statis baru anda dengan mengklik tombol Halaman Baru. Tulislah judul dengan Kontak Kami atau Contact Us. Pada halaman editor konten pilih ke mode HTML, Copy kode di bawah ini :

    /* Contact Dua Lipa.id */
    #comments,.post_meta,#blog-pager{display:none}form{color:#636161} #kontak{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#ffffff;color:#4b4a4a;border:1px solid #660665;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:10px;width:90%;min-width:90%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:90%;height:175px;margin:5px 0;padding:15px 12px;background:#ffffff;color:#4b4a4a;border:1px solid #660665;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:10px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#ffffff;color:#4b4a4a;border-color:#3aa2f5;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#36ccf1;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:90%;max-width:140px;border-radius:10px;color:#ffffff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#2b8b81;color:#ffffff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:90%;margin-top:35px}.contact-form-error-message-with-border{background:#f677b6;border:none;box-shadow:none;color:#ffffff;padding:5px 0}.contact-form-success-message{background:#136485;border:none;box-shadow:none;color:#ffffff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial} </style>
    <br />
    <form id="kontak" name="contact-form">
    <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text"
    value="" />
    <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi pesan" rows="5">
    </textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /> <br />
    <div style="max-width: 220px; text-align: center; width: 90%;">
    <div id="ContactForm1_contact-form-error-message">
     </div>
    <div id="ContactForm1_contact-form-success-message">
     </div>
     </div>
    </form> <script src="https://raw.githack.com/Dualipaid/widgets/master/widgets.js">
    </script>
     <script>//<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6077082xxxxxxxxx';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6077082xxxxxxxxx','//www.dualip.id.com/','6077082xxxxxxxxx'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '6077082xxxxxxxxx', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>


    Setelah selesai mengcopy kode diatas, silahkan kembali lagi ke halaman editor konten mode HTML dan pastekan kode tadi yang di copy kedalamnya.

  • Langkah kedua.

  • Di langkah kedua ini silahkan kamu edit atau ganti kode tulisan yang di beri warna pada background seperti ini : 6077082xxxxxxxxx  ganti dengan ID Blog kepunyaan kamu, untuk kode  www.dualip.id.com ganti dengan alamat blog. lanjut dengan mengklik Publikasikan.

  • Langkah ketiga.

  • Pada langkah ketiga ini lakukan pratinju untuk melihat apakah kontak di halaman statis yang di buat tadi bekerja dengan baik atau tidak, caranya adalah buka Halaman cari kontak kami yang di buat tadi klik lihat lanjut dengan memasukan Nama, Email, Isi pesan. Sebagai tambahan Isilah semua dengan yang valid agar kontak itu bekerja dengan baik.
  • Langkah keempat.

  • Pada langkah keempat ini adalah langkah terakhir yaitu menempatkan kontak kami atau kontak apalah yang kamu buat tadi terserah mau menepatkan di mana widget atau footer.
    Caranya sebagai berikut : Buka Tata letek kemudian klik tambahkan gedget cari Halaman kemudian klik dan terakhir beri tanda centang pada kontak kami. Selesai


    Next Post Previous Post
    No Comment
    Add Comment
    comment url