Cara Mudah Membuat Tombol Subscribe Di Website/Blog

Elf Gaming
Aug 8 · 4 min read
By: seotechman

Tertuju untuk Anda semua yang ingin membuat tombol notifikasi email di website / blog yang sedang Anda kelola, terutama bagi para pemula. Tentunya hal ini sangat diperlukan guna untuk keperluan masing-masing.

Email kontak sangat berguna di kalangan blogger-blogger maupun website dan lain sebagainya. Ini bertujuan untuk membagi 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 ke dalam 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 pembuatannya disini kita perlu 3 elemen yaitu: Css, Html, dan Javascript.

Live Demo

Sudah siap untuk membuatnya?
Oke kita lanjut ke langkah-langkahnya.
Pertama kita buat Css nya, seperti contoh berikut ini:

<pre><code>

: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;
}
</code></pre>

Apa langkah selanjutnya?
Langsung saja Anda kopi sintak di atas lalu pastekan ke file Css website/blog Anda. Langkah kedua yaitu, kita buat sebuah Javascript nya.

<pre><code>

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));
</code></pre>

Kopi lagi lalu pastekan ke dalam file Javascript Anda.
Jika sudah, kita menuju langkah terakhir yaitu Html.

<pre><code>
&lt;div class=&quot;container&quot;&gt;

&lt;form id=&quot;singular-form&quot; action=&quot;https://feedburner.google.com/fb/a/mailverify?uri=google&quot; class=&quot;subscribe&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&amp;apos;https://feedburner.google.com/fb/a/mailverify?uri=google, &amp;apos;popupwindow&amp;apos;, &amp;apos;scrollbars=yes,width=550,height=520&amp;apos;);return true&quot; target=&quot;popupwindow&quot;&gt;
&lt;input name=&quot;uri&quot; type=&quot;hidden&quot; value=&quot;google&quot;/&gt;
&lt;input name=&quot;loc&quot; type=&quot;hidden&quot; value=&quot;en_US&quot;/&gt;
&lt;button class=&quot;shown&quot; type=&quot;button&quot; id=&quot;trigger&quot;&gt;Notify me&lt;/button&gt;
&lt;div id=&quot;input-container&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;E-mail&quot;&gt;
&lt;button type=&quot;button&quot;&gt;Send&lt;/button&gt;
&lt;/div&gt;
&lt;div id=&quot;success&quot;&gt;Thank you!&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
</code></pre>

Untuk contoh Html diatas berlaku untuk blogger. Sedangkan untuk web bisa Anda ubah dibagian &lt;form&gt; nya.
Misalkan: &lt;form action=”emailnotif.html”&gt; 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.

link: https://www.seotechman.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade