Cara membuat contact keren untuk blog terbaru 2019

Hai selamat datang kembali di blog saya kali ini saya akan membagikan cara bagaimana membuat contact keren dan menarik untuk dipasang di bagian halaman blog agar pembaca bisa mudah menghubungi kamu melalui blog .

Sebelum ke tutorial kamu harus tau terlebih dahulu fungsi contact ini untuk apa ? jika kamu belum tau apa itu fungsi contact saya akan menjelaskannya sedikit.

Contact di blogger berfungsi sebagai alat komunikasi antar penulis dan pembaca blog melalui fitur contact yang tersedia di blog itu sendiri. Nah itu penjelasan singkat dari saya.

dibawah ini adalah gambar contoh contact yang akan saya share.

Contoh contact share28s

So langsung aja ke tutorialnya dibawah ini guys :

1. seperti biasa kamu login terlebih dahulu ke akun blogger.
2. Jika sudah kamu pilih tata letak dibagian menu sebelah kiri.
   
   


3. Lalu kalian pilih tambah widget dibagian sidebar.
   
   
   


4. Kamu cari formulir kontak scroll aja kebawah lalu kalian klik tanda plus.
   
   
   


5. Selanjutnya, kamu pilih menu halaman dibagian kiri lagi.
   
   
   


6. Lalu kamu pilih dan klik halaman baru.
   
   
   
7. Copy dan paste kode html dibawah ini. pastikan kalian gunakan mode html bukan compose.
   
   
   <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/AVvXsEjEnF2XD_rUZGOQQPcfyqE0d-lXU6mVAWIfk_aTv66CiM7kxAHmGLPjB0OsPcIW4PpQpEPe6CTQpNbI34IptIaZac7wPVB7Y2uL3zHJFJxjVAG4I2ejwXVJiHGLiPHIquNGUdfjjVCni9P0/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>
   <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'] = '5591305159873444401';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5591305159873444401','//share28s.blogspot.com/','5591305159873444401');
   _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': '5591305159873444401', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
   //]]>
   </script>


8. Selanjutnya, kamu ganti tulisan yang ditandai warna kuning dengan id blog kamu dan tulisan yang ditandai warna hijau ganti dengan alamat blog kamu. jika kalian bingung bagaimana mencari id blog ? caranya mudah kamu cukup login blogger dan lihat url dibagian atas blogID=xxxxx atau lebih jelasnya lihat gambar dibawah ini.
   
   
   


9. Sudah kalian copy paste kode html tersebut jangan lupa beri nama Contact lalu publikasin dan lihat hasilnya sudah berkerja dengan baik atau belum kode html nya jika sudah selamat kamu sudah berhasil membuat contact yang keren dan menarik untuk blog.

Oke mungkin itu saja pembahasan tutorial cara membuat contact yang menarik dan keren untuk blog terbaru. Jika kamu mengalami error atau ada sesuatu yang ingin ditanyakan silahkan komentar dibawah ya. see u next time. bye.