Cara Membuat Contact Form Di Blog Seperti Arlina Design

Hi, bertemu kembali di blog AUTOGOBLOOG , artikel ini akan dibahas mengenai blog militer 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 cara saya akan membagikan sedikit tutorial singkat tentang cara melahirkan contact form atau contact us ala arlina design. 



Bukan hal yang sulit bendu andaikan kita udah rentang waktu terjun di dunia blogging tapi apalah daya andaikan kita masih newbie atau pendatang baru.

Formulir komunikasi yang saya kasih kali ini merupakan formulir komunikasi milik Arlina Design.  Tampilannya dibilang amat bagus dan elegan.

➽ Hal yang paling pertama telah pasti bendu harus memiliki blog, setelah itu buka blogger hak sobat. andaikan telah terbuka geledah menu Tata Letak ➯ klik  menu Tambahkan Gadget ➯ andaikan telah terbuka geledah widget yang bertuliskan Formulir Kontak faksi tanda imbuh yang ada di sampingnya setelah itu faksi simpan.

jika dalam blog bendu telah ada formulir komunikasi abaikan saja langkah yang pertama.

➽ Setelah langkah yang pertama telah selesai bendu akan di tuntun ke langkah berikutnya dimana bendu akan di giring ke menu tema.

klik menu Tema ➯ melanyak tulisan Edit HTML ➯ Tambahkan asas css di bawah ini setelah </head>

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

➽ Jika telah faksi tombol Simpan.



➽ Setelah itu bendu masuk ke menu Halaman ➯ faksi tombol Halaman Baru tambahkan asas di bawah ini di HTML post bukan di Compose Jika salah penempatan 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-emaildisplay: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-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 goresan dibawah

Lihat contoh goresan dibawah

Buat bendu yang pengoptimasiannya blognya membatinkan CCS dan JavaScript bisa tambahkan asas dibawah ini setelah asas 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 tempat dengan URL dan ID blog sobat

Jika bendu merasa semua telah sesuai tutorial, langkah selanjutnya bendu faksi Publikasikan.

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

Seorang pengangguran yang ingin mendapatkan pemasukan 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() };

Oke pembahasan tentang Cara Membuat Contact Form Di Blog Seperti Arlina Design semoga info ini berfaedah terima kasih

Artikel ini diposting pada kategori blog militer, blogging tools, blogging site,

Bagikan Artikel ini