Cara Mudah Membuat Tombol Subscribe Di Website/Blog
Kamis, 08 Agustus 2019
Email kontak sangat berguna dikalangan blogger-blogger maupun website dan lain sebagainya. Ini bertujuan untuk membagikan atau memberikan sebuah notifikasi mengenai update terbaru melalui pesan email, khususnya untuk para calon pengikut website / blog Anda. Maka dari itu, tujuan utama dari tutorial kali ini adalah untuk sekedar sharing tentunya untuk Anda yang baru terjun kedalam dunia blogger atau website.
Tidak hanya berbentuk tombol saja, email notifikasi seperti ini sudah sangat banyak jenis-jenis tampilannya. Bisa berupa tombol, pop up, dan lainya. Untuk cara pembuatanya disini kita perlu 3 element yaitu: Css, Html, dan Javascript.
Live Demo
Cara Membuat Tombol Subscribe di Blog
Pertama kita buat Css nya, seperti contoh berikut ini:
:root {
--main-color: white;
--accent-color: dodgerblue;
}
body,
#singular-form button,
.container>#singular-form>#input-container>input {
font-size: 2rem;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.container {
width: 19rem;
height: 5rem;
padding: 10px;
background-color: var(--main-color);
text-align: center;
border-radius: 3rem;
overflow: hidden;
transition: width .4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.container>#singular-form {
position: relative;
width: 100%;
height: 100%;
background-color: --main-color;
}
.container>#singular-form button {
width: 9rem;
padding: 0;
border: none;
outline: none;
border-radius: 3rem;
cursor: pointer;
}
.container>#singular-form>button#trigger {
padding: 0;
width: 100%;
margin-right: auto;
margin-left: auto;
color: var(--accent-color);
background-color: var(--main-color);
z-index: 3;box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
}
.container>#singular-form>#input-container {
z-index: 2;
}
.container>#singular-form>#input-container>input {
display: inline-block;
height: 100%;
width: 100%;
background-color: var(--main-color);
box-sizing: border-box;
border: none;
outline: none;
padding: 0 26% 0 3%;
opacity: 0;
transform: scale(0);
transition: all .4s ease .4s;
}
.container>#singular-form>#input-container>button {
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: var(--accent-color);
color: var(--main-color);
opacity: 0;
transform: scale(0);
transition: all .4s ease .4s;
}
.container>#singular-form>#success {
display: flex;
justify-content: center;
align-items: center;
color: var(--accent-color);
font-weight: bold;
z-index: 1;
}
.container>#singular-form>button#trigger,
.container>#singular-form>#input-container,
.container>#singular-form>#success {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale(0);
opacity: 0;
}
.container>#singular-form>button#trigger {
transition: all .4s ease;
}
.container>#singular-form>#input-container {
transform: scale(1);
opacity: 1;
transition: all .4s ease .4s;
}
.container>#singular-form>#success {
transition: all .2s ease .4s;
}
.container>#singular-form>button#trigger.shown,
.container>#singular-form>#input-container.shown,
.container>#singular-form>#success.shown,
.container>#singular-form>#input-container>button.shown,
.container>#singular-form>#input-container>input.shown {
transform: scale(1);
opacity: 1;
}
Apa langkah selanjutnya? Langsung saja Anda kopi sintak diatas lalu pastekan kedalam file Css website/blog Anda. Langkah kedua yaitu, kita buat sebuah Javascript nya.
const sf = {};
sf.container = document.querySelector('.container');
sf.form = document.querySelector('.container > #singular-form');
sf.trigger = document.querySelector('.container > #singular-form > button#trigger');
sf.input = document.querySelector('.container>#singular-form>#input-container>input');
sf.submitButton = document.querySelector('.container > #singular-form > #input-container > button');
sf.successMessage = document.querySelector('.container > #singular-form > #success');
sf.submitDelay = 1500;
sf.clickHandler = (e) => {
switch (e.target) {
case sf.trigger:
console.log('case trigger');
sf.container.style.width = '37rem'
e.target.classList.remove('shown');
sf.input.classList.add('shown');
sf.submitButton.classList.add('shown');
sf.input.focus();
break;
case sf.submitButton:
sf.submitForm();
break;
}
}
sf.handleInputKeypress = (e) => {
if (e.keyCode === 13) {
e.preventDefault();
sf.submitForm();
}
}
sf.submitForm = () => {
sf.input.style.transition = 'all .4s ease';
sf.submitButton.style.transition = 'all .4s ease';
sf.input.classList.remove('shown');
sf.submitButton.classList.remove('shown');
sf.container.style.transition = 'all .4s cubic-bezier(0.47, 0.47, 0.27, 1.20) .4s';
sf.container.style.width = '';
sf.successMessage.classList.add('shown');
let submission = setTimeout(() => sf.form.submit(), sf.submitDelay);
}
sf.input.addEventListener('keypress', (e) => sf.handleInputKeypress(e));
document.addEventListener('click', (e) => sf.clickHandler(e));
Kopi lagi lalu pastekan kedalam file Javascript Anda. Jika sudah, kita menuju langkah terakhir yaitu Html.
<div class="container">
<form id="singular-form" action="https://feedburner.google.com/fb/a/mailverify?uri=google" class="subscribe" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=google, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="google"/>
<input name="loc" type="hidden" value="en_US"/>
<button class="shown" type="button" id="trigger">Notify me</button>
<div id="input-container">
<input type="text" placeholder="E-mail">
<button type="button">Send</button>
</div>
<div id="success">Thank you!</div>
</form>
</div>
Untuk contoh Html diatas berlaku untuk blogger. Sedangkan untuk web bisa Anda ubah dibagian <form> nya. Misalkan: <form action="emailnotif.html"> sampai akhir.
Sampai disini kita sudah selesai membuatnya. Untuk berjalan atau tidak, Anda bisa lihat sendiri seperti apa hasilnya. Dan jangan lupa bagikan tutorial ini jika menurut Anda ini bermanfaat.
Mungkin kurang lebihnya seperti itulah pembahasan hari ini, semoga bisa membantu.
