Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Halaman Kontak Keren di Blogger Responsive

Apabila kalian seorang blogger yang ingin mencari artikel cara membuat halaman formulir kontak dengan tampilan yang sangat bagus dan juga sudah material design, dan juga desainnya sudah kekinian maka kalian datang pada artikel yang sangat tepat. Syahrul Ramadhan kali ini akan berbagi kepada kalian semua bagaimana tutuorial gampang untuk membuat halaman Contact Us atau formulir kontak di halaman blogger kalian. 

Menurut saya pribadi, sebuah blog akan terasa bagaikan makan tanpa minum jika tidak memiliki salah satu halaman pendukung ini pada bagian menu blog kalian. Sebenarnya sih tidak terlalu wajib pemasangan halaman ini pada sebuah blog, kenapa? ya karena tidak semua template blog menyediakan menu navigasi untuk menaruh halaman kontak ini. Akan tetapi di tahun 2021 ini semua jenis template telah menyediakan menu-menu navigasi yang sangat bagus yang memungkinkan halaman kontak blogger ini dapat dipasang di template kalian.

Biasanya peletakan halaman kontak ini berada pada menu navigasi blog (bebas mau di header blog atau pun footer blog) dan disejajarkan di halaman About, Disclaimer, Privacy Policy dan halaman pendukung lainnya. 

Kegunaan dari halaman kontak blogger ini juga tentunya dapat berguna untuk media pembuka komunikasi penngujung blog dengan admin sebuah blog, yang mana halaman kontak ini disetiap seseorang ingin mengirim sebuah pesan maka otomatis akan masuk kedalam email admin blog yang mana sebelumnya email dan halaman kontak ini sudah dikaitkan satu sama lain.

Nah, jika ada seorang pengunjung blog yang ingin berkomunikasi secara mendalam dengan admin blog yang dikunjungi tentunya pengunjung ini dapat langsung masuk ke halaman formulir konta blog dan mengisi form yang diminta, biasanya form yang diminta hanya sekedar Nama, Email serta isi pesan yang akan dikirim.

Pesan yang dikirim pun banyak macamnya, bebas. Para pengunjung dapat mengirim pesan apa saja kepada sebuah blog baik itu memberi saran atau bahkan kritik sekalipun. 


Membuat Halaman Kontak keren di Blogger Responsive

1. Pertama kalian harus masuk terlebih dahulu ke Dashboard Blogger kalian.

2. Lanjut pilih opsi tab Halaman dibagian kiri menu blogger.

3. Selanjut nya silahkan buat Halaman Baru.

4. Selanjut pastikan kalian telah berada di mode HTML bukan mode tulis atau Compose.

5. Nah, disini kalian dapat masukkan kode yang telah saya berikan dibawah ini:
<form>
<br><div class="enterblogger-logo">
<i class="material-icons md-48">verified_user</i></div>
<style scoped="scoped">
  .enterblogger-logo{text-align:center;}
  @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
  .md-48{font-size: 100px;
    color: #1087FF;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#1087FF}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#1087FF;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#1087FF}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#1087FF;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Name</label></div>
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
contact_mail
</i> Email</label></div>
<div class="enterblogger-input">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
message
</i> Message</label></div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<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'] = '7985179842144017495';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7985179842144017495','//syahrulramadhan.my.id/','7985179842144017495');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '7985179842144017495', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

6. Selanjut silahkan kalian ganti kode dibawah ini:
7985179842144017495
Silahkan diganti dengan ID BLOG kalian.
syahrulramadhan.my.id
Silahkan ganti dengan DOMAIN BLOG kalian.

7. Kemudian silahkan kalian kasih judul pada halaman tersebut, kalian bebas mau kasih nama apa. Ada baik nya kasih nama Contact, Formulir Kontak atau Halaman kontak saja.


8. Simpan.

Mudah bukan cara untuk membuat halaman konta blogger pada blog? menurut saya ini adalah artikel cara membuat halaman kontak yang sangat keren karena tidak perlu menambahkan kode html lagi dalam template blog kalian dan juga tampilan nya juga sudah material design yang membuat halaman ini sangat enak untuk dilihat.

Terimakasih telah berkunjung.

www.syahrulramadhan.my.id
Syahrul Ramadhan
Syahrul Ramadhan Everyone thinks of changing the world, but no one thinks of changing himself.

Posting Komentar untuk "Cara Membuat Halaman Kontak Keren di Blogger Responsive"