Tutorial Memasang Widget Newsletter di Blogger

Ada beberapa manfaat positif yang kamu dapatkan , seperti mendapatkan email dari pengguna dengan mereka melakukan subcribe secara otomatis setiap kalian post artikel mereka akan menerima pemberitahuan lewat emailnya.

Apabila kita mendalami tentang penggunaan widget secara langsung kalian akan mendapatkan fungsionalitas situs web kalian dan memberikan pengalaman terbaik buat pengguna. Oke deh , mari kita memahami bersama tentang konsep dasar widget dan bagaimana dengan adanya widget ini dapat menambah nilai plus pada situs web kalian.

Apa sih Widget itu?

Secara umum , widget merupakan elemen kecil yang dapat di terapkan ke dalam situs web dan meningkatkan fungsinya. Disamping itu , widget sering digunakan untuk meningkatkan interaksi para pengguna , memberikan informasi dan menyediakan akses yang cepat ke fitur - fitur tertentu.

Nah , itulah sedikit penggalan pengertian dari widget. Udah paham and oke ya?

Baik , mari kita lanjut ke tutorialnya sekarang.

Cara Memasang Widget Newsletter di Blogger

Pada langkah pertama silahkan buka Dasboard blogger kalian > Lalu klik Menu Tema > Kemudian Klik Edit HTML > Lalu tempelkan kode dibawah ini sebelum tag </head>

/* General Reset */
*, *:before, *:after {
    box-sizing: border-box;
}

/* Subscribe Box */
#subscribe-box {
    background-color: #f3f3f3; 
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    margin: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Center content inside the subscribe box */
#subscribe-box 
.emailfield {
    display: flex;           
    flex-direction: column;    
    align-items: center;        
    width: 100%;               
}

#subscribe-box p {
    font-size: 14px;
    color: #555;
    margin: 0 0 15px;
    text-align: center;
}

/* Email Field */
#subscribe-box 
.emailfield input[type="text"] {
    background: #fff;
    padding: 13px 20px;
    color: #333;
    border: 1px solid #ccc;
    font-size: 14px;
    border-radius: 50px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 300px; 
}

#subscribe-box 
.emailfield input[type="text"]:focus {
    border-color: #999;
    box-shadow: inset 0 0 0 2px #bbb;
    outline: none;
}

/* Submit Button */
#subscribe-box 
.emailfield .submitbutton {
    display: block;
    background-color: #568af5;
    color: #fff;
    width: 100%; 
    font-size: 15px;
    font-weight: bold;
    padding: 12px;
    border: none;
    border-radius: 50px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

#subscribe-box 
.emailfield 
.submitbutton:hover {
    background-color: #4a7fd4;
}

/* Responsive Layout */
@media (max-width: 500px) {
    #subscribe-box {
        padding: 15px;
    }
    #subscribe-box p {
        font-size: 13px;
    }

Kemudian klik SIMPAN , Berikutnya silahkan pilih Tata Letak > Buat Widget Baru HTML / js lalu copy dan pastekan kode dibawah ini 

<div id="subscribe-box">
    <p>Get notifications from this blog</p>
    <div class="emailfield">
        <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feeds.feedburner.com/rafadhanify/Ganti kode feedburner kalian', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
            <input required="required" type="text" name="email" onblur="if (this.value == '') {this.value = 'Email Address';}" onfocus="if (this.value == 'Email Address') {this.value = '';}" value="Email Address"/>
            <input class="submitbutton" type="submit" id="email-submit" value="Subscribe"/>
            <input name="uri" type="hidden" value="Ganti kode feedburner kalian"/>
            <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
</div>

Penting!

Langkah terakhir , klik SIMPAN dan Lihat hasilnya atau silahkan lihat demo dibawah ini.

Sekian tutorial yang bisa saya sampaikan tentang cara memasang widget newsletter atau subscribe di blog. Terimakasih dan sehat selalu 🙏