Cara Mudah Membuat Tombol Subscribe Di Website/Blog
Penerbit: ( Seo Techman )

Cara Mudah Membuat Tombol Subscribe Di Website/Blog

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.

Cara Mudah Membuat Tombol Subscribe Di Website/Blog
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

Sudah siap untuk membuatnya? Oke kita lanjut ke langkah-langkahnya. 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(&apos;https://feedburner.google.com/fb/a/mailverify?uri=google, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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.

Load comments

0 Response to "Cara Mudah Membuat Tombol Subscribe Di Website/Blog"

Post a Comment