Cara Membuat Halaman Kontak Untuk Blogspot

140 views
Halaman kontak adalah sebuah halaman yang khusus dan harus ada pada sebuah blog. Karena halam kontak merupakan sebuah halaman di mana pengunjung blog/web bisa berinteraksi dengan pemilik atau admin blog/web,yang biasanya digunakan untuk menanyakan suatu pertanyaan tentang tutorial atau informasi lain sebagainya serta member saran dan kritikan kepada admin blog/web tersebut.
Halaman kontak juga termasuk syarat lengkap untuk mengajukan penayangan iklan agar disetujui oleh google adsense, karena halaman kontak merupakan halaman navigasi atau penunjuk untuk agar pengunjung bisa berinterakasi dengan admin.

Disini saya akan memberi tutorial tentang membuat halaman kontak yang nyaman serta menjadikan kelebihan tersendiri yang dimiliki oleh blog/web yang relevan. Ok langsung saja, Halaman kontak ini untuk blogspot.
 

Cara Membuata Halaman Kontak

1.Tambahkan widget kontak
Buka blog> pilih tata letak> klik tambahkan widget> akan muncul jendela baru pilih gadget lainnya> kemudian pilih form kontak/formulir kontak (rekomendasi di bagian footer karena entar widget akan di hidden) langkah selanjutnya
 
2. Pilih tema> klik edit html> pilih lompati widget lalu scroll ke bawah dan pilih nama contacform1 dan hapus scpit seperti berikut.
 
3.Butlah halaman kontak pada bagian laman blog anda, kemudian salin kode berikut ke laman kontak yang baru saja anda buat dengan car pilih html dan pastekan script ini.
 
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<html>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 24px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 50%;
}
button:hover {
    opacity: 0.8;
}
/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
img.avatar {
    width: 70%;
    border-radius: 20%;
}
.container {
    padding: 50px;
}
span.psw {
    float: right;
    padding-top: 16px;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: center; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
   
@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 100px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
<body>
<a href="http://www.blogersumatra.net"<h5>.</h5></a>
<button onclick="document.getElementById('id01').style.display='block'" style="width: auto;">Hubungi Admin</button>
<div class="modal" id="id01">
  <form action="/action_page.php" class="modal-content animate">
    <div class="imgcontainer">
      <span class="close" onclick="document.getElementById('id01').style.display='none'" title="Close Modal">×</span>
<img alt="Avatar" class="avatar" src="Masukkan Gambar baca juga cara memasukkan gambar avatar" />
    </div>
<div class="container">
<div class="widget ContactForm" data-version="1" id="ContactForm1">
<h2 class="title">
Hubungi Admin</h2>
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email
<span style="font-weight: bolder;">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message
<span style="font-weight: bolder;">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="https://www.blogger.com/rearrange?blogID=1420572820496976653&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;ContactForm1&quot;));" target="configContactForm1" title="Edit">
<img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<br />
<div class="clear">
</div>
</div>
</div>
</form>
</div>
<input checked="checked" type="checkbox" /> Remember me
    </body></html>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</div>
 
4.Selesai dan tinggal di coba masukkan nama dan alamat email sembarang lalu kirim. Jika berhasil maka ada notifikasi dan ada email masuk ke gmail blogspot anda.

 

Hasilnya
Terimakasih telah berkunjung, apabila kesalahan kata artikel saya selaku admin mohon maaf dan apabila halaman kontak tidak jadi harap hubungi saya pada menu kontak di atas.

Tags: #halaman kontak blogger

Leave a reply "Cara Membuat Halaman Kontak Untuk Blogspot"