Cara Membuat Contact Form Di Blog Seperti Arlina Design

Hallo, berjumpa kembali di blog AUTOGOBLOOG , di kesempatan akan menjelaskan tentang blog sign in Cara Membuat Contact Form Di Blog Seperti Arlina Design simak selengkapnya

Written By Teamwork212 23 August 2019

")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)} //]]>

Teamwork212 - Pada kesempatan kali ini aturan aku hendak membagikan sedikit tutorial mini tentang aturan membuat contact form atau contact us ala arlina design. 



Bukan hal yang sulit sobat jika kita udah lama terjun di dunia blogging tapi apalah daya jika kita masih newbie atau pendatang baru.

Formulir kontak yang aku kasih kali ini merupakan formulir kontak milik Arlina Design.  Tampilannya dibilang banyak bagus dan elegan.

➽ Hal yang paling pertama sudah pasti sobat harus punya blog, selepas itu buka blogger eigendom sobat. jika sudah terbuka cari menu Tata Letak ➯ klik  menu Tambahkan Gadget ➯ jika sudah terbuka cari widget yang bertuliskan Formulir Kontak blok tanda tambah yang ada di sampingnya selepas itu blok simpan.

jika dalam blog sobat sudah ada formulir kontak abaikan saja langkah yang pertama.

➽ Setelah langkah yang pertama sudah selesai sobat hendak di tuntun ke langkah berikutnya dimana sobat hendak di giring ke menu tema.

klik menu Tema ➯ tekan tulisan Edit HTML ➯ Tambahkan kode css di bawah ini sebelum </head>

<style type='text/css'>#ContactForm1,#ContactForm1 brdisplay:none</style>

➽ Jika sudah blok bincul Simpan.



➽ Setelah itu sobat masuk ke menu Halaman ➯ blok bincul Halaman Baru tambahkan kode di bawah ini di HTML post bukan di Compose Jika salah pemasangan maka ulangi lagi.

<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,#commentsdisplay:none

#ContactForm1_contact-form-name,#ContactForm1_contact-form-emailkeras rgba(0,0,0,0.08)}

#ContactForm1_contact-form-email-messagefont-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:focusbackground:#fff;outline:none;border-color:rgba(0,0,0,0.18)

#ContactForm1_contact-form-submitbackground:#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)

.formcolumn4position:relative

.formcolumn4:beforebackground-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1S_wDv-8D0BwwT66hWS4C7ssXyQUV50_ncDEgeRYOqqZ-u4eSszythbf4eHs-CtBIYqQWsgPQoE2UtOsL4r2jQaIjCKIYnNZ9Jt5lPTefrvyn3a2YkucoeE60IIKjTvKRIo2JDTsFlY6e/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:hoverbackground:#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-messagemargin-top:35px

formcolor:#888

.formcolumn1,.formcolumn2float:left;width:50%

.formcolumn1,.formcolumn2margin:0 0 10px 0;padding:0 10px 0 0

.formcolumn2padding:0 0 0 10px

@media only screen and (max-width:768px).formcolumn1,.formcolumn2width:100%;padding:0

</style>

Lihat contoh gambar dibawah

Lihat contoh gambar dibawah

Buat sobat yang pengoptimasiannya blognya menyembunyikan CCS dan JavaScript bisa tambahkan kode dibawah ini selepas kode pada langkah sebelumnya tadi.

<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\x3d7667424959411955529','//https://teamwork212.blogspot.com/','7667424959411955529');

_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 URL dan ID blog yang di tandai di atas dengan URL dan ID blog sobat

Jika sobat merasa semua sudah sesuai tutorial, langkah selanjutnya sobat blok Publikasikan.

Demikianlah tutorial mini tentang Cara Membuat Contact Form Di Blog Seperti Arlina Design

Seorang pengangguran yang ingin mendapatkan penghasilan melalui kegiatan blogging

", numPosts: 8, titleLength: "auto", thumbnailWidth: 250, thumbnailHeight: 170, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxYZ6pOzGmVOWKeAudxGc6ul2p6O4BMW7PWYERR9QeI-LDP18PanQebudgsMaGxOhoJOoDPYu4askG9meZtZoKlb3y2l6dCTasEnUffX_g8_eBphqUDDE-vWTJAACOvaSyt7pIHivy8rNn/w255-c-h170/no-image.png", containerId: "related-post-2600941051863293175", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() };

Sekian penjelasan mengenai Cara Membuat Contact Form Di Blog Seperti Arlina Design semoga tulisan ini menambah wawasan salam

Artikel ini diposting pada tag blog sign in, blogging tools,

Bagikan Artikel ini