Cara Membuat Kotak Berlangganan (Subscribe) Keren di Blog

Santos el Salam

5 Oktober 2019

Bagi sebuah blog, keberadaan widget kotak subscribe (langganan/ follow by email) memiliki fungsi untuk mendapatkan pengunjung melalui semua artikel terbaru yang dikirim ke setiap email subscribe secara otomatis. Jadi, setiap pengunjung yang sudah menjadi subscriber blog anda akan berlangganan setiap update terbaru di blog anda secara gratis. Artinya, setiap anda menerbitkan artikel baru maka mereka akan menerima notifikasi pemberitahuannya otomatis lewat email mereka, sehingga mereka bisa jadi akan langsung mengunjungi blog anda dan sudah pasti akan menambah jumlah viewer blog anda secara signifikan. 

Bagi sebuah blog yang jumlah pengunjungnya sudah lumayan tinggi, kotak langganan ini akan semakin meningkatkan jumlah pembaca blognya. Sedangkan bagi pengunjung, dengan menjadi subscriber blog anda maka mereka tidak akan ketinggalan setiap artikel-artikel di blog anda. Untuk bisa mendapatkan keuntungan seperti ini (mendapat subscriber), maka anda mesti memasang fitur widget kotak subscribe terlebih dahulu di blog anda. Namun sebelum memasangnya, anda juga perlu mendaftarkan blog anda di FeedBurner. Hal ini penting karena kotak subscribe ini akan bertautan dengan FeedBurner. Untuk membuat akun feedburner ini anda bisa cari tutorialnya lewat google, banyak yang membahas caranya. 

Jika anda sudah mendaftar feedburner, maka blog anda sudah siap untuk dipasangi widget kotak berlangganan via email ini. Sebetulnya pihak blogger juga sudah menyediakan fitur ini, caranya yaitu lewat tambahkan gadget ➡ Follow by email. Namun banyak blogger yang memilih membuat atau memasang kotak berlangganan dari yang dibagikan oleh blogger-blogger lain. Pada kesempatan ini saya juga akan berbagi cara membuat kotak subscribe lumayan keren yang bisa anda pasang di blog anda. Untuk tampilannya seperti berikut ini:

Jika anda berminat memasangnya di blog anda, silahkan ikuti langkah-langkah berikut ini. 

1. Buka akun blogger anda. 

2. Pilih menu layout (tataletak). 

3. Karena widget ini biasa dipasang di area footer, maka klik tambahkan gadget pada elemen footer. 

4. Pilih html/javascript. Silahkan anda beri judul sesuai keinginan dan tambahkan kode berikut ini ke dalam kotak html. 

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghNhMvV9IeGd1Hpiq3G2R_x7ED86V_QGcSSz8oZ0cTAHTUxLz2otTj3i_p4fTIcRyS8qHhJXyBhGTYsfdm20kPtwI1Lq0vFFTxutfRmsFwd4NqVG-ETxOp7rih2Totwwylcuwn1lTVit0/s1600/background.png) repeat scroll 0 0 #000000;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}

 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}

 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5aCL3w1-xcqW4P1_azF4CQR4mFGxx6f9meVieOZCHbQ-CjHBNX6sE9ri1GUKA4lyVxjNfb4W-YOLVqL-U97EEj2cZc3-pLSE53-v1y9MB30qZEW0QHO8fbn3MOEQAJstWDr3DbUOxmw/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}

 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}

 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

</style>

<div id="sidebar-subscribe-box">

<div class="sidebar-subscribe-box-wrapper">

<p><span style="color: #ffffaf;">Berlangganan Artikel Via Email</span></p>

<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=santossalamblogspot" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=santossalamblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="santossalamblogspot" />

<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini..."/>

<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="MULAI BERLANGGANAN" /></form>

</div></div></div>

Keterangan: Ganti yang ditandai warna merah dengan alamat FeedBurner Anda. Untuk kalimat yang berwarna biru bisa anda ganti dengan kata-kata anda sendiri. 

5. Silahkan klik simpan dan lihat hasilnya. Untuk menampilkannya pada versi mobile silahkan tambahkan pengaturan mobile='yes' (edit html) pada widget yang anda pasang ini. 

Atau anda mau tampilan kotak subscribe yang lebih keren dan populer, silahkan baca juga: Membuat Kotak Subscribe Via Email Keren di Blog

Demikianlah Cara Membuat Kotak Berlangganan (Subscribe) Keren pada Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Kotak Berlangganan (Subscribe) Keren di Blog. Please share...!

Facebook

Twitter