Membuat Subscribe Box / Kotak Berlangganan Di Blog

Membuat subcribe blog keren - Untuk mempermudah para pengunjung blog dalam memperoleh update-tan artikel terbaru dari admin blog dengan secara otomatis masuk ke dalam email pengunjung.  

Maka dibutuhkan kotak berlangganan atau dalam bahasa Inggris disebut Subscribe Box.

Dan pada kesempatan yang cukup baik ini saya akan menjelaskan bagaimana membuat subscribe blog keren. Dengan adanya subscribe box pengunjung hanya perlu memasukkan email mereka dan secara otomatis mereka akan mendapatkan update-tan terbaru dari suatu blog. 

Untuk itu mari kita mulai saja;

Pertama

Hal pertama yang sangat penting adalah sobat tentunya harus memiliki sebuah akun feedbunner dan mengetahui Id Feedbunner tersebut.

Saya sarankan untuk membaca artikel "cara mendaftar ke  feedburner dan cara mengetahui Id Feedburner" terlebih dahulu.

Kedua
Silahkan sobat login ke blogger sobat

Ketiga

Tambahkan kode dibawah ini dimana sobat mau meletakkan subcribe box / kotak berlangganan. 

Sebagai contoh Sobat bisa meletakkan disini.

Tata letak ---> Tambahkan Widget ---> Kode HTML/Java script.

<div id="subscribe-css">

<div class="subscribe-wrapper">

<p>Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih</p>

<div class="subscribe-form">

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

<input name="uri" type="hidden" value="SettiaBlog" />

<input name="loc" type="hidden" value="en_US" />

<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/>

<input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" />

</form>

</div>

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

Keterangan :
- Ganti "SettiaBlog" dengan Id feed sobat.

Keempat

Tambahkan kode css di bawah ini di atas kode ]]></ b:skin>. 

Template ---> Edit HTML (untuk memudahkan sobat mencari kode ]]></ b:skin>, silahkan tekan CRTL + F kemudian tulis kode "]]></ b:skin>" dan tekan enter.

 .subscribe-wrapper {

 color : #fff;

 background: none repeat scroll 0% 0% #FF6C60;

 font-family: "Oswald",Tahoma,Sans-serif;

 line-height : 20px;

 padding : 1px 20px 10px;

 text-align : center;

}

.subscribe-form {

 background : #FF6C60;

 clear : both;

 display : block;

 margin : 10px 0;

 overflow : hidden;

}

form.subscribe-form {

 clear : both;

 display : block;

 margin : 10px 0 0;

 width : auto;

 overflow : hidden;

}

.subscribe-css-email-field {

 background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpAx5fYAUMyQNNgZOVPIB5eKzyUGZx2wUSQb1ZOxIwgseraUePN2KRBkReKU-Q88iMGujLqaJ9gy99ZsZ9-H1G5QV-UMMRj2CrK94UtzeucFPSijnZKWwFWo2AciKOWTnot7mJREbKQ8Ir/s1600/sprites.png) 1px -27px no-repeat #eee;

 color : #444;

 margin : 0 0 15px;

 padding : 12px 40px;

 width : 100%;

 border : none;

}

.subscribe-css-button {

 background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1);

 color : #fff;

 cursor : pointer;

 font-weight : 700;

 padding : 7px;

 text-transform : none;

 width : 100%;

 border : none;

 font-size : 16px;

 transition : all 0.3s ease-in;

}

.subscribe-css-button:hover {

 transition : all 0.3s ease-in;

 background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2);

}   

Keterangan :
- Ganti "FF6C60" untuk mengganti warna background

Kelima
Klik pratinjau untuk melihat/mengecek apakah sudah sesuai dengan keinginan sobat dan sudah cocok dengan blog sobat,

Jika sudah klik simpan.

Keenam
SELESAI

Nah bagaimana mudah bukan ?

Selamat mencoba dan semoga berhasil.

Semoga artikel ini dapat bermanfaat dan membantu sobat. Jika sobat mempunyai pertanyaan silahkan sobat tulis saja pertanyaannya di kolom komentar. 

Baca juga : Kumpulan Subcribe keren dan responsive