Tutorial: Cara Menciptakan Formulir Kontak Minimalis, Responsive & Keren Di Blogger
Cara Membuat Layanan/Formulir Kontak di Blogspot - Contact Us Reponsive, Keren, dan Minimalis
Salah satu pengguna SEO Kraken Blogger Theme bertanya wacana bagaimana cara menciptakan dan memasang widget Contact Us di Blogspot sebagaimana tampilan yang dipakai SEO Killer Tips dikala ini.
Berawal dari pertanyaan tersebut; maka dari itu -- melalui goresan pena ini, penulis ingin menjelaskan bagaimana cara membuatnya.
Kebetulan sebab SEO Kraken merupakan template blogger yang sudah valid HTML5 -- dalam artian, ada beberapa instruksi default bawaan Blogger yang memang sengaja dihapus sebab memang memberatkan kecepatan loading situs web -- otomatis ada perlakuan khusus terkait cara memasangnya.
Pada langkah pertama ini, apabila teman belum menciptakan halaman statis (Static Page) di blognya, praktekkan cara membuatnya.
Note: Tujuan dan/atau alasan kenapa halaman statis terbaru ini jangan pribadi dipublikasikan, biar judul artikelnya tersesuaikan dengan URL dari Static Page tersebut.
Contohnya... Nama laman statis tersebut berjudulkan "Kontak", maka URL yang dihasilkan nantinya akan ibarat ini: https://harga-motor-dan-mobil.blogspot.comp/kontak.html -- bukan URL rusak ibarat https://harga-motor-dan-mobil.blogspot.comp/blog-page.html atau https://harga-motor-dan-mobil.blogspot.comp/blog-page-17.html ibarat yang sering kita temukan.
Oke, sudah? Selanjutnya silakan Copas secara mentah-mentah instruksi di bawah ini pada laman statis yang dimaksud; dengan tata langkah sebagai berikut:
1. Masih di halaman statis tersebut
2. Masuk ke mode goresan pena HTML -- bukan Compose...
3. Copas instruksi dibawah ini:
4. Simpan halaman statis tersebut, kemudian cek kembali
Cek kembali instruksi HTML, CSS, dan JavaScript diatas apabila ingin memodifikasinya. Ada juga beberapa instruksi diatas yang telah saya tandai untuk diganti (diubah) dengan kepemilikan situs web sobat.
Salah satu instruksi yang sudah ditandai yaitu BlogID-Milik-Sobat. Silakan ganti goresan pena tersebut dengan BlogID milik sobat. BlogID ini sederatan angka yang ditampilkan pada URL pada Address Bar teman ketika Blog tersebut di buka.
Nah itu ia tutorial bagaimana cara menciptakan dan memasang formulir kontak (Contact Form/Contact Us) simple, minimalis, responsive dan keren di Blogger.*
Salah satu pengguna SEO Kraken Blogger Theme bertanya wacana bagaimana cara menciptakan dan memasang widget Contact Us di Blogspot sebagaimana tampilan yang dipakai SEO Killer Tips dikala ini.
Berawal dari pertanyaan tersebut; maka dari itu -- melalui goresan pena ini, penulis ingin menjelaskan bagaimana cara membuatnya.
Kebetulan sebab SEO Kraken merupakan template blogger yang sudah valid HTML5 -- dalam artian, ada beberapa instruksi default bawaan Blogger yang memang sengaja dihapus sebab memang memberatkan kecepatan loading situs web -- otomatis ada perlakuan khusus terkait cara memasangnya.
Cara Membuat Formulir Kontak Minimalis, Responsive & Keren di Blogger
Pada langkah pertama ini, apabila teman belum menciptakan halaman statis (Static Page) di blognya, praktekkan cara membuatnya.
- Buka Blogger sebagaimana mestinya
- Pilih salah satu Blog, ketuk tombol Page atau Halaman
- Ketuk tombol New Page atau Halaman Baru
- Isi judul laman statis terlebih dahulu, kemudian tekan tombol Simpan (Save) - bukan dipublikasikan
Note: Tujuan dan/atau alasan kenapa halaman statis terbaru ini jangan pribadi dipublikasikan, biar judul artikelnya tersesuaikan dengan URL dari Static Page tersebut.
Contohnya... Nama laman statis tersebut berjudulkan "Kontak", maka URL yang dihasilkan nantinya akan ibarat ini: https://harga-motor-dan-mobil.blogspot.comp/kontak.html -- bukan URL rusak ibarat https://harga-motor-dan-mobil.blogspot.comp/blog-page.html atau https://harga-motor-dan-mobil.blogspot.comp/blog-page-17.html ibarat yang sering kita temukan.
Oke, sudah? Selanjutnya silakan Copas secara mentah-mentah instruksi di bawah ini pada laman statis yang dimaksud; dengan tata langkah sebagai berikut:
1. Masih di halaman statis tersebut
2. Masuk ke mode goresan pena HTML -- bukan Compose...
3. Copas instruksi dibawah ini:
<style> .tb-contact-form-widget{color:#000;padding:0} .srbtn{display:inline-block;} .cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;} .cform-button:hover {background-color: #2980b9;color: #fff;} .btn-reset:hover {background-color: red;color: #fff;} .c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-email-message {width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF} .c-form-name, .c-form-email, .c-form-email-message input:focus{border-color: #E8C291;margin: 5px 0 15px} .b-social-buttons{list-style-type:none;text-align:center} .b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px} .b-social-buttons li a{color:#333;text-decoration:none} #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;} </style> <div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"> <span><i class="fa fa-pencil-square-o"></i> Your Name: </span> <input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"> <span><i class="fa fa-envelope-o"></i> E-mail Address *: </span> <input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="clear: both;"> </div> <div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span> <textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"> <input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div> <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> <ul class="b-social-buttons"> <li><a href="https://www.twitter.com/ariefghozaly" rel="nofollow" target="_blank" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li> <li><a href="https://www.facebook.com/ariefghozaly24" rel="nofollow" target="_blank" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li> <li><a href="https://www.youtube.com/channel/UCFxERGJj0e_UuW6WaW3ts0w" rel="nofollow" target="_blank" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li> </ul> </div> </form> </div> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'BlogID-Milik-Sobat';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\xBlogID-Milik-Sobat','//https://harga-motor-dan-mobil.blogspot.com','BlogID-Milik-Sobat'); _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': 'BlogID-Milik-Sobat', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script> 4. Simpan halaman statis tersebut, kemudian cek kembali
Cek kembali instruksi HTML, CSS, dan JavaScript diatas apabila ingin memodifikasinya. Ada juga beberapa instruksi diatas yang telah saya tandai untuk diganti (diubah) dengan kepemilikan situs web sobat.
Pastikan FontAwesome yang teman gunakan merupakan FontAwesome versi terbaru yakni 4.7.0.
Salah satu instruksi yang sudah ditandai yaitu BlogID-Milik-Sobat. Silakan ganti goresan pena tersebut dengan BlogID milik sobat. BlogID ini sederatan angka yang ditampilkan pada URL pada Address Bar teman ketika Blog tersebut di buka.
Nah itu ia tutorial bagaimana cara menciptakan dan memasang formulir kontak (Contact Form/Contact Us) simple, minimalis, responsive dan keren di Blogger.*