Dewa Blogger: Hasil penelusuran untuk memasang-formulir-kontak-pada-halaman-statis

Halaman

    Social Items

Home / Hasil penelusuran untuk memasang-formulir-kontak-pada-halaman-statis
Memasang Formulir Kontak Pada Halaman Statis Memasang Formulir Kontak Pada Halaman Statis

Memasang Formulir Kontak Pada Halaman Statis - Ok eksklusif saja disini aku tidak akan membahas mengenai fungsi dan kenapa widget formulir kontak memiliki tugas yang penting pada sebuah blog tapi disini aku akan membuatkan tips perihal cara memasang formulir kontak pada halaman statis blogger, silahkan disimak.

Terlebih dahulu Anda sudah memasukan widget formulir kontak ini pada blog.
Memasang Formulir Kontak Pada Halaman Statis Memasang Formulir Kontak Pada Halaman Statis

Dan sebelumnya Anda sudah memasang font awesome pada template, kalau belum silahkan tambahkan link dibawah ini sebelum </head>

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

Selanjutnya silahkan buka Template > Edit Template > terapkan isyarat di bawah ini sebelum  </style> atau ]]></b:skin>

#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; }

Simpan template.

Agar tampilannya rapi, sebaiknya gunakan  Tekan "Enter" untuk baris baru  pada hidangan "Pilihan" menyerupai gambar di bawah ini


Kemudian buat halaman statis gres dan terapkan isyarat di bawah ini pada tab  HTML

<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>

Publikasikan dan lihat hasilnya.


Untuk font yang dipakai dan lainnya silahkan sesuaikan kembali dengan template Anda.


Referensi : https://sangdewablogger.blogspot.com//search?q=memasang-formulir-kontak-pada-halaman-statis

Memasang Formulir Kontak Pada Halaman Statis

Kali ini akan menyebarkan Cara memasang Widget Formulir Kontak pada Halaman Statis menyerupai pada blog ini. Sebelumnya aku juga pernah menyebarkan caranya pada postingan ini Memasang Formulir Kontak Pada Halaman Statis, perbedaan dari yang akan aku bagikan kini hanya pada tampilan saja sebab ada undangan dari teman blogger untuk menyebarkan tampilan formulir kontak menyerupai blog ini.

Cara memasang Widget Formulir Kontak pada Halaman Statis Cara Terbaru Menambahkan Formulir Kontak di Blog

Baiklah, berikut Cara Terbaru Menambahkan Formulir Kontak di Blog.

Pertama, buka Blogger tambahkan widget formulir kontak di hidangan Tata Letak > Klik Tambahkan Gadget > Setelah hidangan terbuka, pilih Gadget Lainnya dan klik tanda plus di widget Formulir kontak lalu klik Simpan.

Cara memasang Widget Formulir Kontak pada Halaman Statis Cara Terbaru Menambahkan Formulir Kontak di Blog

Silakan lewati langkah ini bila di blog teman sudah menambahkan widget Formulir kontak.

Selanjutnya, klik hidangan Tema > Klik tombol Edit HTML > Tambahkan arahan CSS di bawah ini sebelum </head>

<style type='text/css'> #ContactForm1,#ContactForm1 br{display:none} </style>

Setelah itu klik tombol Simpan tema.

Selanjutnya klik hidangan Halaman > Klik tombol Halaman baru dan tambahkan arahan di bawah ini pada tab HTML post.

Cara memasang Widget Formulir Kontak pada Halaman Statis Cara Terbaru Menambahkan Formulir Kontak di Blog

Edit juga Setelan entri pada hidangan Pilihan

Cara memasang Widget Formulir Kontak pada Halaman Statis Cara Terbaru Menambahkan Formulir Kontak di Blog

<form name="contact-form"> <div class='formcolumn1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div> <div class='formcolumn2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div> <div class='formcolumn3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div> <div class='formcolumn4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> </div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form>  <style scoped="" type="text/css"> #ContactForm1,#comments{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyx4ua4N1FutUcCvZt4IDWDi-1OX5GwxLWa7PDuMHnRsck4oIDMRpBkFh5TCb5Jn1GaJzqkW1KUdHjTvM3SP3K-Pas6E7M8-eLemJCiUMau78RGGAhCdsl7PKCWWadFLQoH0W0lcb01zYX/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{float:left;width:50%} .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0} .formcolumn2{padding:0 0 0 10px} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style>

Bagi yang mengoptimasi blognya dengan menyembunyikan CSS dan JS Blogger tambahkan arahan di bawah ini sempurna di bawah arahan pada langkah sebelumnya

<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'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056'); _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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

Ganti semua arahan yang ditandai dengan URL dan ID blog sobat. ID blog sanggup didapatkan ketika kita membuka salah satu blog di Blogger dan akan tampil pada tab browser

Cara memasang Widget Formulir Kontak pada Halaman Statis Cara Terbaru Menambahkan Formulir Kontak di Blog

Jika sudah ditambahkan klik tombol Publikasikan dan selesai.


Itulah Cara Terbaru Menambahkan Formulir Kontak di Blog, selamat mencoba dan biar bermanfaat, wassalam.

Cara Terbaru Menambahkan Formulir Kontak Di Blog

Memasang Widget Fixed Contact Form di Blog Memasang Widget Fixed Contact Form di Blog

Memasang Widget Fixed Contact Form di Blog - Pada kesempatan ini Saya akan mengembangkan wacana cara memasang widget fixed contact form yang berarti widget ini akan muncul di halaman blog tepatnya di sudut kanan bawah.

Seperti yang kita tahu, widget contact form / formulir kontak merupakan salah satu kemudahan email dari Blogger yang berfungsi menghubungkan antara pengunjung dan pemilik blog untuk saling berkomunikasi secara personal. Cara pengiriman pesannya pun cukup mudah, kita hanya perlu menulis nama, alamat email, dan isi pesan. Kaprikornus tidak perlu repot-repot login ke akun email, namun dengan widget contact form ini sudah tersedia di blog kita.

Bagi yang sebelumnya pernah memakai trik ini : Memasang Formulir Kontak pada Halaman Statis

Silakan hapus terlebih dahulu semua instruksi terkait trik tersebut.

Sebelumnya pastikan di blog teman sudah terpasang widget contact form. Jika belum tambahkan widget tersebut di Tata Letak > Tambahkan widget baru. Ok, eksklusif saja dengan cara penerapannya.

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan instruksi di bawah ini sempurna di atas ]]></b:skin> atau </style>

/* Fixed Contact Form */ .ContactForm,.ContactForm .title{display:none} .floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99} .floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear} .floating-ai-head a:hover{background:#2588ca;color:#fff} .floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)} .floating-ai-head{text-align:right} .floating-ai-body .ContactForm{margin:0;display:block!important} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all} #ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear} #ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear} #ContactForm1_contact-form-submit:hover{background:#468a53;} #ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);} .contact-form-widget form{display:table;margin:0 auto;} .contact-form-widget {max-width:initial;} .floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}

2. Selanjutnya tambahkan instruksi di bawah ini sebelum </body>

<script type='text/javascript'> //<![CDATA[ // Fixed Contact Form $("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())}); //]]> </script>

3. Simpan template dan lihat hasilnya.



Demikian wacana Cara Memasang Widget Fixed Contact Form di Blog, biar bermanfaat.

Memasang Widget Fixed Contact Form Di Blog

Membuat Lightbox Widget Contact Form Blogger - Dari beberapa tutorial aku share di artikel dengan tampilan yang bervariasi.

Pada tutorial ini aku akan membahas mengenai widget contact form dengan dampak lightbox supaya tidak memerlukan halaman statis untuk memasang widget contact form dimana nantinya widget contact form akan muncul menyerupai kotak obrolan alasannya ialah ini juga cara yang sama menyerupai ketika menciptakan modal obrolan lainnya. Bagi yang ingin menggunakan, berikut tutorialnya untuk cara Membuat Lightbox Widget Contact Form Blogger.

Membuat Lightbox Widget Contact Form Blogger Membuat Lightbox Widget Contact Form Blogger

Membuat Lightbox Widget Contact Form Blogger


Pertama, masuk ke Edit HTML template blogger kemudian cari isyarat ]]></b:skin> kemudian pasang isyarat berikut ini di atasnya.

#contacts-forms{width:100%;margin-bottom:10px} #widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px} #widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase} #widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer} #ContactForm1 h2{display:none} #area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none} #ContactForm1_contact-form-email-message{width:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px} #ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px} #ContactForm1_contact-form-submit:hover{background:#d00} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff} .contact-form-widget p{margin:0} .contact-form-widget{padding:5px} .buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer} .buka-contact:hover{background:#d00}

Selanjutnya cari isyarat </body> kemudian pasang isyarat berikut ini sempurna di atasnya.

<script type='text/javascript'> $(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})}); </script>

Selanjutnya cari isyarat <div id='sidebar-wrapper'> kemudian pasang isyarat berikut ini sempurna dibawahnya.

<div id='contacts-forms'> <div id='widget-contact'> <h3 class='juduls'>Contact Form<a href='#' class='close' title='Close'>&#215;</a></h3> <b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/> </div> <div id='area-overlay'></div> <button class='buka-contact'>Kirim Pesan</button> </div>

Langkah terakhir Simpan template.

Sekarang buka Tata Letak, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik Tambahkan Widget > Gadget Lainnya > Formulir Kontak menyerupai pada gambar dibawah ini.


Cukup menyerupai itu saja untuk Membuat Lightbox Widget Contact Form Blogger. Selanjutnya apabila ingin merubah tampilannya dapat sesuaikan sendiri dengan merubah pada bab CSS.

Membuat Lightbox Widget Contact Form Blogger

Langganan: Postingan (Atom)