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 perihal bagaimana cara menciptakan dan memasang widget Contact Us di Blogspot sebagaimana tampilan yang dipakai SEO Killer Tips ketika ini.
Berawal dari pertanyaan tersebut; maka dari itu -- melalui goresan pena ini, penulis ingin menjelaskan bagaimana cara membuatnya.
Kebetulan alasannya yaitu SEO Kraken merupakan template blogger yang sudah valid HTML5 -- dalam artian, ada beberapa isyarat default bawaan Blogger yang memang sengaja dihapus alasannya yaitu 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 eksklusif dipublikasikan, supaya judul artikelnya tersesuaikan dengan URL dari Static Page tersebut.
Contohnya... Nama laman statis tersebut berjudulkan "Kontak", maka URL yang dihasilkan nantinya akan menyerupai ini: https://tutorialbloggeridn.blogspot.comp/kontak.html -- bukan URL rusak menyerupai https://tutorialbloggeridn.blogspot.comp/blog-page.html atau https://tutorialbloggeridn.blogspot.comp/blog-page-17.html menyerupai yang sering kita temukan.
Oke, sudah? Selanjutnya silakan Copas secara mentah-mentah isyarat 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 isyarat dibawah ini:
4. Simpan halaman statis tersebut, kemudian cek kembali
Cek kembali isyarat HTML, CSS, dan JavaScript diatas apabila ingin memodifikasinya. Ada juga beberapa isyarat diatas yang telah saya tandai untuk diganti (diubah) dengan kepemilikan situs web sobat.
Salah satu isyarat 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 beliau tutorial bagaimana cara menciptakan dan memasang formulir kontak (Contact Form/Contact Us) simple, minimalis, responsive dan keren di Blogger.* Sumber https://tipsseokiller.blogspot.com/
Salah satu pengguna SEO Kraken Blogger Theme bertanya perihal bagaimana cara menciptakan dan memasang widget Contact Us di Blogspot sebagaimana tampilan yang dipakai SEO Killer Tips ketika ini.
Berawal dari pertanyaan tersebut; maka dari itu -- melalui goresan pena ini, penulis ingin menjelaskan bagaimana cara membuatnya.
Kebetulan alasannya yaitu SEO Kraken merupakan template blogger yang sudah valid HTML5 -- dalam artian, ada beberapa isyarat default bawaan Blogger yang memang sengaja dihapus alasannya yaitu 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 eksklusif dipublikasikan, supaya judul artikelnya tersesuaikan dengan URL dari Static Page tersebut.
Contohnya... Nama laman statis tersebut berjudulkan "Kontak", maka URL yang dihasilkan nantinya akan menyerupai ini: https://tutorialbloggeridn.blogspot.comp/kontak.html -- bukan URL rusak menyerupai https://tutorialbloggeridn.blogspot.comp/blog-page.html atau https://tutorialbloggeridn.blogspot.comp/blog-page-17.html menyerupai yang sering kita temukan.
Oke, sudah? Selanjutnya silakan Copas secara mentah-mentah isyarat 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 isyarat 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://tutorialbloggeridn.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 isyarat HTML, CSS, dan JavaScript diatas apabila ingin memodifikasinya. Ada juga beberapa isyarat 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 isyarat 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 beliau tutorial bagaimana cara menciptakan dan memasang formulir kontak (Contact Form/Contact Us) simple, minimalis, responsive dan keren di Blogger.* Sumber https://tipsseokiller.blogspot.com/