Tutorial Membuat Halaman Kontak pada Blogspot

Setelah sebelumnya kita membuat blogspot dengan panduan tutorial tentang Panduan Membuat Blog Gratis dari Nol sampai Selesai. Pada artikel ini kita akan melengkapi blog yang telah kita buat dengan Halaman Kontak sebagai sarana komunikasi dengan pengunjung blog. Sebuah halaman kontak pada blog setidaknya harus memiliki konten Alamat Lokasi, Kontak yang dapat dihubungi, dan formulir Kontak untuk mengirimkan pesan. Untuk formulir kontak sebenarnya kita dapat menambahkanya melalui penambahan gadget, namun pada tutorial kali ini kita akan membuat formulir kontak tersebut pada Halaman Kontak, bukan melalui penambahan gadget. Sehingga saat pengunjung mengakses Halaman Kontak, maka pada halaman tersebut pengunjung dapat mengirimkan sebuah pesan kepada kita(Pemilik blog), dimana pesan tersebut akan kita terima melalui email terkait yang kita gunakan untuk membuat blog.

Cara Membuat Halaman Kontak Pada Blogtspot

Pada dashboard blog yang sedang di kelola, klik pada menu "Laman" yang terdapat di sisi sebelah kiri, lalu klik "Laman Baru".


Gambar 1 Pembuatan Halaman Kontak Klik Untuk memperbesar gambar.

Silahkan beri judul "Kontak" laman tersebut, kemudian isi bagian entri konten dengan "Alamat dan kontak yang dapat dihubungi". Dibagian bawah setelah konten alamat dan kontak kita akan tambahkan sebuah formulir kontak, ikuti panduan berikut ini:

Baca Tentang Memilih Template atau Desain Tampilan Blog

Pada dashboard blog teman-teman, silahkan klik menu TEMPLATE, klik tombol EDIT HTML. Carilah kode berikut(Diatas kode ini tempelkan kode CSS):

/*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;
}

Gambar 2
Tempel Kode CSS Seperti Pada Gambar.

Salin Script Formulir Kontak berikut ini dan tempel pada halaman kontak dalam mode HTML.

Membuat Post Laman Kontak dalam mode HTML

Gambar 3
Post dalam mode HTML.

Jika semuanya sudah selesai, kembali pada mode compose lalu klik "Publish".

Selanjutnya Supaya halaman kontak dapat dengan mudah ditemukan pengunjung, kalian harus membuat sebuah menu navigasi dengan nama "Kontak".

Cara Membuat Menu Halaman Kontak

Pada dashboard blogspot yang sedang dikelola, pilih dan klik menu "Tata Letak".

Gambar 4
Tata Letak Blogspot

Lalu klik "Tambah Gadget" pada bagian atas "Blog Posts(Gadget Posting Blog)". Silahkan gulir kebawah, cari gadget "Laman" lalu klik icon plus(+).

Baca Tentang Gadget, Konten dan SEO Dasar

Gambar 5
Penambahan Gadget Laman.

Pilih halaman yang ingin ditampilkan dalam menu dan beri "Checklish". Jika sudah klik "Simpan", lihat hasilnya/kunjungi blog kalian.

Gambar 6
Menampilkan Laman Pada Menu Blog

Sekarang kalian telah memiliki menu dan halaman kontak untuk dapat diakses pengunjung blog kalian. Jika kalian berhasil, maka kalian akan melihat halaman kontak kalian seperti Halaman Kontak pada blog ini.
Silahkan tambahkan halaman-halaman lainya yang dibutuhkan dan tambahkan pada menu agar pengunjung dapat dengan mudah menemukan halaman yang telah kalian buat.

Mudah-mudahan artikel yang saya buat bermanfaat untuk kalian. Silahkan share kepada teman kalian yang membutuhkan. Jika memiliki pertanyaan silahkan kirimkan melalui formulir kontak, atau melalui komentar. Terimakasih.....

Semua Tutorial tentang blog dan Pembuatan Website A sampai Z

Sunday, January 8, 2017

Tutorial Membuat Halaman Kontak pada Blogspot