Membuat halaman kontak pada blogspot
Membuat halaman kontak pada blogspot
Terimakasih teman-teman datang untuk membaca tutorial ini, dan mudah-mudahan tutorial ini akan berguna bagi teman-teman para pembaca blog.
Kita semua tau akan pentingnya halaman kontak untuk sebuah blog atau website, dimana melalui halaman kontak ini kita dapat berinteraksi dengan para pengunjung bllog atau website kita.
Pada blog yang di buat menggunakan blogspot, formulir kontak dapat ditambahkan melalui penambahan gadget. Jika teman-teman ingin melakukanya, silahkan pergi ke dashboard blog yang ingin ditambahkan halaman kontak, pilih menu tata letak, klik tambah gadget pada posisi yang di kehendaki, klik pada tab gadget lainya, klik icon plus di samping formulir kontak, tentukan nama atau judul formulir kontak tersebut, klik simpan. Selanjutnya teman-teman bisa lakukan uji coba.
Akan tetapi pada tutorial kali ini, kita akan "Membuat halaman kontak pada blogspot", bukan melalui penambahan gadget. Sebagai contoh silahkan kunjungi Halaman kontak blog Kerabat Digital Marketing di https://developmentmultibisnisindo.blogspot.co.id/p/kontak.html.
Baca Juga:
Langkah-langkah pembuatan halaman kontak:
Pada dashboard blog teman-teman, silahkan klik menu TEMPLATE, klik tombol EDIT HTML. Carilah kode berikut:
]]></b:template-skin>Caranya silahkan copy kode tersebut, klik pada bidang kode html, lalu klik ctrl+f setelah itu di sudut kanan atas akan muncul bidang teks, silahkan tempel di sana kodenya lalu klik enter.
Setelah teman-teman menemukan kode tersebut, copy kode css dibawah ini lalu tempel di atas kode yang tadi teman-teman cari, jika sudah silahkan klik save, lihat gambar berikut:
/*contact form by www.multibisnisindo.com*/
.contact-form-respond {
padding-left: 20px;
}
.contact-form-respond:before {
font-family: 'rt-icons';
content: "e600";
padding-right: 10px;
}
.mycontact{
background-image: url(../example/parallax/services.jpg);
}
/*forms*/
.form-control{
margin: 8px;
}
.form-control {
height: 42px;
border-color: #e4e4e4;
border-radius: 1px;
color: #1D1D1D;
}
.form-control, .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control.invalid {
-webkit-box-shadow: 0 0 0 2px #4bb8e7;
box-shadow: 0 0 0 2px #4bb8e7;
}
.form-control:focus {
border-color: #7f7f7f;
color: #7f7f7f;
}
.form-control:-moz-placeholder {
color: #7f7f7f;
opacity: 1;
}
.form-control::-moz-placeholder {
color: #7f7f7f;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #7f7f7f;
}
.form-control::-webkit-input-placeholder {
color: #7f7f7f;
}
.form-control:focus:-moz-placeholder {
color: transparent;
opacity: 1;
}
.form-control:focus::-moz-placeholder {
color: transparent;
opacity: 1;
}
.form-control:focus:-ms-input-placeholder {
color: transparent;
}
.form-control:focus::-webkit-input-placeholder {
color: transparent;
}
.darkgrey_section .form-control {
color: #ffffff;
border-color: #4e4e4e;
background-color: #3c3c3c;
}
.dark_section .form-control {
color: #ffffff;
border-color: #373737;
background-color: #252525;
}
.color_section .form-control {
color: #ffffff;
border-color: #78caed;
background-color: #58bde9;
}
.color_section .form-control:-moz-placeholder {
color: #d2edf9;
}
.color_section .form-control::-moz-placeholder {
color: #d2edf9;
}
.color_section .form-control:-ms-input-placeholder {
color: #d2edf9;
}
.color_section .form-control::-webkit-input-placeholder {
color: #d2edf9;
}
.color_section .form-control:focus:-moz-placeholder {
color: transparent;
opacity: 1;
}
.color_section .form-control:focus::-moz-placeholder {
color: transparent;
opacity: 1;
}
.color_section .form-control:focus:-ms-input-placeholder {
color: transparent;
}
.color_section .form-control:focus::-webkit-input-placeholder {
color: transparent;
}
.shop-filter .form-control,
.single-product-description .form-group,
.single-product-description .form-control {
display: inline-block;
width: auto;
}
a > [class*="rt-icon-"],
.theme_button > [class*="rt-icon-"] {
font-size: 1.5em;
line-height: 0;
position: relative;
top: 3px;
padding-right: 4px;
}
.theme_button > [class*="glyphicon"],
.theme_button > [class*="fa-"] {
padding-right: 7px;
}
.theme_button > [class*="rt-icon-"],
.theme_button > [class*="glyphicon"],
.theme_button > [class*="fa-"] {
margin-left: -7px;
}
/*
**buttons
*/
.theme_button {
font-size: inherit;
padding: 20px 20px;
line-height: 1;
display: inline-block;
background-color: transparent;
color: #ffffff;
text-transform: uppercase;
border: 1px solid #4bb8e7;
background-color: #4bb8e7;
-webkit-border-radius: 2px;
border-radius: 2px;
position: relative;
-webkit-transition: all 0.4s linear 0s;
-moz-transition: all 0.4s linear 0s;
-o-transition: all 0.4s linear 0s;
-ms-transition: all 0.4s linear 0s;
transition: all 0.4s linear 0s;
}
.theme_button:active,
.theme_button:hover,
.theme_button:focus {
color: #ffffff;
background-color: #343434;
border-color: #343434;
opacity: 1;
text-decoration: none;
outline: none;
-webkit-transition: all 0.1s linear 0s;
-moz-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
-ms-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
}
.theme_button:active {
top: 1px;
}
.theme_button.border {
background-color: transparent;
border: 2px solid #4bb8e7;
padding-top: 13px;
padding-bottom: 13px;
}
.block_button {
display: block;
text-align: center;
}
/*dividers*/
.divider20 {
margin: 20px 0;
border: 0;
color: transparent;
}
.divider40 {
margin: 40px 0;
border: 0;
color: transparent;
}
Selanjutnya silahkan klik menu halaman, lalu buat halaman baru dengan judul kontak. Copy dan tempel script di bawah ini pada bidang entri atau konten dengan menggunakan mode HTML.
Perhatikan pada baris ke enam, disitu terdapat baris berikut:
var blogId = 'Ganti ini dengan blog id kamu';//this number should be mandatorily edited.
Kalimat dalam tanda petik yang berbunyi(Ganti ini dengan blog id), silahkan ganti dengan blog id teman-teman. Cara mendapatkan blog id silahkan lihat address bar dan lihat gambar address bar.
Baca Juga: Belajar Struktur HTML Dasar
Setelah itu kembali lagi gunakan mode COMPOSE untuk merubah teks atau kontak yang ada(phone dan alamat), selanjutnya silahkan klik PUBLIKASIKAN. Setelah di publikasikan, arahkan mouse pada bagian bawah judul halaman kontak yang baru saja di buat dan klik LIHAT untuk mendapatkan URL halaman kontak yang baru saja di publikasikan. Silahkan copy url halaman kontak pada address bar untuk pembuatan atau penambahan menu kontak.
Silahkan teman-teman sesuaikan menu blognya, tambahkan menu kontak!
Sekarang kunjungi blog teman-teman dan kLik menu kontak, apakah disitu terdapat formulir kontak? Jika benar, sekarang teman-teman sudah memiliki halaman kontak. Untuk yang terakhir silahkan lakukan uji coba dengan mengirimkan pesan kontak melalui formulir tersebut.
