Beranda Blogging Tutorial Cara Membuat Widget Kotak Berlangganan Seperti Fletro

Cara Membuat Widget Kotak Berlangganan Seperti Fletro

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.

More From Author