Cara Membuat Widget Kotak Berlangganan Seperti Fletro

Kotak Berlangganan atau Subscribe Box merupakan widget yang berfungsi untuk memberitahu pengunjung mengenai update artikel terbaru pada blog kita melalui email. Selain itu juga bisa memberikan banyak sekali dampak positif lainnya seperti yang sudah kita jelaskan pada artikel Cara Membuat Subscribe Box Responsive Pada Footer Viomagz.

Fletro Pro merupakan template buatan JagoDesain yang sedang trend sekali saat ini. Desain widgetnya juga sudah benar-benar bagus sekali apalagi untuk Widget Kontak Berlangganan yang satu ini.

Mungkin banyak dari kalian bagaimana Cara Membuat Widget Kotak Berlangganan Seperti Fletro ini. Simak lebih lanjut langkah-langkah di bawah ini.

Membuat Widget Kotak Berlangganan Seperti Fletro

1. Pergi ke Blogger > Tata Letak.

2. Tambahkan Widget HTML/Javascript lalu masukkan kode di bawah ini dan tekan Simpan.

<div class="widget FollowByEmail" data-version="2" id="FollowByEmail1">
<h3 class="title">
Follow by Email
</h3>
<div class="widget-content">
<div class="follow-by-email-inner">
<label class="follow-text" for="email-input">Subscribe to our newsletter and stay updated !</label>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=faishalkc&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<input autocomplete="off" class="follow-by-email-address" id="email-input" name="email" placeholder="Alamat Email" type="email" />
<input class="follow-by-email-submit" id="email-submit" type="submit" value="Dapatkan notifikasi email" />
<label class="email-label" for="email-submit">
<svg viewbox="0 0 32 32"><path d="M28,13a1,1,0,0,0-1,1v8a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V14a1,1,0,0,0-2,0v8a3,3,0,0,0,.88,2.12A3,3,0,0,0,6,25H26a3,3,0,0,0,2.12-.88A3,3,0,0,0,29,22V14A1,1,0,0,0,28,13Z"></path><path d="M15.4,18.8a1,1,0,0,0,1.2,0L28.41,9.94a1,1,0,0,0,.3-1.23,3.06,3.06,0,0,0-.59-.83A3,3,0,0,0,26,7H6a3,3,0,0,0-2.12.88,3.06,3.06,0,0,0-.59.83,1,1,0,0,0,.3,1.23ZM6,9H26a.9.9,0,0,1,.28,0L16,16.75,5.72,9A.9.9,0,0,1,6,9Z"></path></svg>
</label>
<input name="uri" type="hidden" value="faishalkc" />
<input name="loc" type="hidden" value="en_US" />
</form>
</div>
</div>
</div>

Silakan ganti dengan Username Feedburner kalian pada kode yang ditandai

3. Kemudian kalian pergi ke Blogger > Tema > Edit HTML.

4. Kalian cari kode ]]></b:skin> atau </style> lalu letakkan kode di bawah ini tepat diatasnya.

/* Widget FollowEmail */
.FollowByEmail{position:relative;padding:15px;background:rgba(255,255,255,.98);border-radius:8px;box-shadow:0 4px 12px 0 rgba(9,32,76,.05);margin-top:20px !important;overflow:hidden;}
.FollowByEmail:after{content:'';display:block;position:absolute;bottom:0;right:0;width:100px;height:100px;background:rgba(0,0,0,.025);border-radius:100px 0 0;}
.FollowByEmail .widget-content{position:relative;z-index:2;font-size:13px;}
.FollowByEmail h3.title{font-size:13px;margin-bottom:22px;}
.FollowByEmail .follow-text{display:block;margin-bottom:15px;color:#989b9f}
.FollowByEmail form{display:block;position:relative;margin:0;}
.FollowByEmail input[type=email]{width:100%;padding:11px 55px 11px 18px;outline:0;border:0px solid #ebeced;border-radius:6px;box-shadow:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background-color:#f7f7fc}
.FollowByEmail input[type=email]:focus{box-shadow:0 2px 4px 0 rgba(9,32,76,.05);}
.FollowByEmail input[type=submit]{display:none;width:100%;margin-top:12px;padding:12px 18px;border:0;outline:0;border-radius:8px;color:#fff;cursor:pointer;}
.FollowByEmail label.email-label{position:absolute;top:0;right:0;padding:8.5px 0;display:inline-block;width:55px;height:39px;text-align:center;cursor:pointer}
.FollowByEmail label.email-label svg{fill:#3a7bd5;width:23px;height:23px;}
.FollowByEmail h3.title:after{content:'';width:20px;height:2px;display:block;margin-top:4px;background:#161617;}

5. Setelah itu tekan Simpan Tema.

Penutup

Semoga artikel ini bermanfaat buat kalian semuanya dan saya juga berterima kasih kepada kalian yang sudah mengunjungi blog kecil seperti ini.

Kalian juga bisa meminta untuk dibuatkan artikel tutorial seperti apa kepada saya agar tetap konsisten dalam mengupdate artikel blog ini. Jika ada hal yang ingin ditanyakan silakan berkomentar di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA PAYPAL Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    0 Komentar

    Posting Komentar

    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel