Halaman kontak di blog sebagai pendukung untuk kelengkapan pada navigasi blog yang terletak sejajar dengan about, disclaimer dan lainnya. Dengan memasang halaman kontak ini kan mempermudah para pengunjung blog untuk berkomunikasi dengan pemilik blog.
Jadi jika pengunjung yang ingin berkomunikasi dengan pemilik blog atau website bisa langsung menuju ke halaman kontak blog atau website. Halaman kontak biasanya terdiri dari nama, email, pesan.
Halaman kontak menjadi salah satu syarat jika ingin mendaftarkan blog atau website Anda ke Google Adsense. Jadi halaman kontak perlu ada di blog atau website Anda. Disini saya akan bagikan cara membuat halaman kontak di blogspot.
Cara Membuat halaman kontak (Step 1)
1. Masuk dashboard blogger
2. Tema > Edit HTML
3. Copas kode css berikut ini diatas ]]></b:skin>
.sidebar #ContactForm1 {display:none}
4. Selesai, Simpan!
5. Dashboard: Tata Letak > Tambahkan Gadget > Formulir Kontak > Simpan!
5. Dashboard: Halaman > Halaman baru
4. Buat Judul halaman (1) > Ubah menjadi HTML View (2) > Opsi (3,4)
5. Salin code
Salin kode dibawah ini, jangan lupa ganti Id blogger dan nama blog sudah ditandai dengan tanda merah dibawah ini.
<style scoped="scoped">
.bisablog-input {
float: none;
position: relative;
margin-bottom: 45px;
margin-right: 10px
}
.bisablog-input input,
.bisablog-input textarea {
font-size: 15px;
padding: 15px 0;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ddd
}
.bisablog-input input:focus,
.bisablog-input textarea:focus {
outline: none
}
.bisablog-input label {
color: #999;
font-size: 15px;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: .2s ease all
}
.bisablog-input input:focus ~ label,
.bisablog-input input:valid ~ label,
.bisablog-input textarea:focus ~ label,
.bisablog-input textarea:valid ~ label {
top: -20px;
font-size: 14px;
color: #546de5
}
.bar {
position: relative;
display: block;
width: 100%
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #546de5;
transition: 1.2s cubic-bezier(1, 0.12, 0.25, 1) all
}
.bar:before {
left: 50%
}
.bar:after {
right: 50%
}
.bisablog-input input:focus ~ .bar:before,
.bisablog-input input:focus ~ .bar:after,
.bisablog-input textarea:focus ~ .bar:before,
.bisablog-input textarea:focus ~ .bar:after {
width: 50%
}
.highlight {
position: absolute;
height: 50%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: .5
}
.bisablog-input input:focus ~ .highlight,
.bisablog-input textarea:focus ~ .highlight {
animation: inputHighlighter .3s ease
}
.bisablog-input input:focus ~ label,
.bisablog-input input:valid ~ label,
.bisablog-input textarea:focus ~ label,
.bisablog-input textarea:valid ~ label {
top: -20px;
font-size: 13px;
color: #546de5
}
input#ContactForm1_contact-form-email-message {
height: 150px
}
input#ContactForm1_contact-form-submit {
width: 100%;
color: #fff!important;
background: #546de5;
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="bisablog-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>
Name
</label>
</div>
<div class="bisablog-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>
Email
</label>
</div>
<div class="bisablog-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>
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'] = '1138884915321989014';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx1138884915321989014','//namablogkamu.blogspot.com/','1138884915321989014');
_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': '6512837267690936704', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Untuk Id blogger sendiri bisa dilihat di dashboard blogger, pada Address bar browser biasanya tertera seperti ini.
https://www.blogger.com/blog/posts/1138884915321989014
6. Paste code > Publikasikan
Menambah halaman kontak di navibar (Step 2)
1. Dashboard: Tata letak > Daftar Halaman (Atas)
2. Masukan nama halaman Anda dan link halaman kontak yang telah Anda buat tadi
3. Selesai!
Bisa dilihat diatas bahwa blog sudah memiliki halaman beranda dan kontak, jika ingin tampilan lebih blog menarik, bisa Anda gunakan tema yang lain yang lebih bagus sesuai dengan kebutuhan Anda.
Baca juga halaman-halaman penting:
- Cara membuat halaman Contact
- Cara membuat halaman About
- Cara membuat Privacy policy
- Cara membuat Sitemap
- Cara membuat Terms and Condition
- Cara membuat Disclaimer
0 Comments