Tips Membuat Halaman Kontak (contact form) Keren Pada Halaman Statis di Blogger ~ Aan Channel

Sebuah blog tidak cukup lengkap rasanya kalau tidak miliki halaman kontak pada anggota navigasinya. Memang tidak mesti menempatkan form kontak di blog tapi form kontak ini dapat memudahkan para pengunjung blog kita untuk semata-mata berkomunikasi dengan kita selaku pemilik blog (admin).

Laman kontak (contact form) dibuat sebagai pendukung kelengkapan pada navigasi blog yang umumnya letaknya disejajarkan atau bersebelahan dengan halaman about, disclaimer, privasi, tos dan partner.

Manfaat Halaman Kontak di Blog

Ada beberapa kegunaan yang didapatkan pengunjung blog jikalau mereka mengirim pesan melalui laman kontak yang telah terpasang di blog kita.

Privasi Terjaga

Mengirim pesan melalui laman kontak diklaim sebagai langkah yang lebih aman untuk melindungi privasi berkaitan identitas diri kami dibanding mengirim pesan melalui laman komentar. Jika kami sebagai pengunjung mengirimkan sebuah pesan melalui laman kontak di blog.

Maka publik tidak dapat sadar apa isi pesan yang dikirimkan jikalau kami dan pemilik blog tersebut. Hal ini tidak sama jikalau mengirimkan pesan melalui komentar pasti identitas diri bisa dilacak dengan mudah.

Menghemat Waktu

Waktu adalah uang jadi slogan tenar untuk para orang yang memiliki mobilitas tinggi di dalam hidupnya. Lalu kaitannya apa dengan laman kontak?

Begini mengirimkan pesan via laman kontak di blog memiliki kesempatan dibalas lebih tinggi oleh pemilik blog dibanding berikirim pesan melalui komentar.

Alasannya sebab laman kontak telah mengenai dengan e mail khusus pemilik blog jadi notifikasi pesan dapat segera ditampilkan dan kesempatan memperoleh balasan jadi lebih tinggi.

Bersifat Lebih Personal

Sebagian dari pengunjung terbiasa basa-basi di dalam berkomentar di sebuah blog. Bahkan kebanyakan komentar cenderung disalahgunakan sebagai ajang bercandaan saja.

Sebenarnya tersedia sih pengunjung yang berkomentar berbobot sesuai dengan isikan dan topik yang disajikan. Namun pengunjung yang berkarakter seperti itu persentasenya benar-benar sedikit dan jarang ditemui.

Lebih banyak pengunjung dengan cii-ciri komentar yang ngawur dan tidak sejalur dengan topik yang diulas. Akibatnya kadang kala pemilik blog enggan dan malas menanggapi komentar para pengunjung yang kesannya cuma bercanda dan tidak cukup menghargai.

Disinilah kelebihan laman kontak berikut cii-ciri pesan yang dikirim melalui jalan e mail memiliki cii-ciri yang lebih personal dan serius. Sehingga pemilik blog dapat cepat termasuk membalas pesan yang dikirimkan.

Nah mengingat begitu pentingnya keberadaan laman kontak di blog. Maka kali ini aku dapat memberi tambahan tutorial enteng mengenai langkah memicu laman kontak di Blogspot atau Blogger.

Cara Membuat Halaman Kontak (contact form) Pada Halaman Statis di Blogger

1. Login ke akun Blogger kamu.

2. Lihat pada tab sebelah kiri Dasbor. Lalu klik Halaman > Buat Halaman Baru > Mode HTML (Bukan Compose).

3. Selanjutnya masukkan kode script di bawah ini:

<i class="material-icons md-48">verified_user</i></div>

.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: #546de5;

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:#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%}.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:#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>

account_circle

</i> Name</label></div>

contact_mail

</i> Email</label></div>

message

</i> Message</label></div>

</div>

</div>

</form>

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2794963633726348050';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d2794963633726348050','//aanchannel-yt.blogspot.com/','2794963633726348050');

_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': '2794963633726348050', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

Catatan:

Ganti angka 2794963633726348050 dengan ID blog kamu dan ganti aanchannel-yt.blogspot.com/ Dengan blog kamu.

4. Beri nama halaman baru dengan nama "contact". Lalu simpan halaman. Selanjutnya silakan lihat halaman kontak tersebut dengan cara mengunjunginya.

Bagaimana? Mudah bukan? Semoga kamu berhasil membuat laman kontaknya. Share juga pada yang lain. Terimakasih

HALAMAN SELANJUTNYA:

About Aan Channel

Blog channel yang sekedar ingin berbagi, mohon maah jika terdapat kesamaan isi postingan, hal itu tidak terlepas dari hasil pencarian saat membutuhkan, dan saya share ulang.

Aan Channel

Tips Membuat Halaman Kontak (contact form) Keren Pada Halaman Statis di Blogger

About Aan Channel

Related Post