Cara Membuat Kotak Berlangganan Dibawah Artikel Seperti Evo Magz

Memasang Subcription Box Seperti Di Evo Magz Blog - Kotak berlangganan yang sering juga disebut subcription box adalah kotak yang berfungsi sebagai media bagi pengunjung blog yang ingin mengetahui dan berlangganan artikel terbaru di blog kita. Dalam kotak berlangganan biasanya juga berisi pesan rujukan supaya pengunjung mau berlangganan artikel melalui email.

Kotak berlangganan atau subscription box ini bisa kalian letakkan dibawah artikel atau juga disidebar dan footer karena memang subsription box ini responsive design serta fungsi aslinya yang terletak dibawah artikel.

Kotak berlangganan yang akan kita buat ini saya ambil dari template Evo Magz,pasti tahu kan template Evo Magz. Walaupun subcription box pada template buatan Mas Sugeng tersebut berada dibawah artikel tapi anda bisa meletakkannya di sidebar karena responsive. Bagaimana penampakan subcription boxnya? Dibawah adalah penampakannya ↴

Cara Membuat Kotak Berlangganan Evo Magz

Langkah 1

Silakan buka blogger, Template pilih Edit HTML

Langkah 2

Lalu salin kode dibawah ini lalu letakkan diatas kode ]]></b:skin>

/* SUBSCRIBER BOX */
.berlangganan-box {
 border-top: 1px solid #f0f0f0;
 border-bottom: 1px solid #f0f0f0;
 padding: 15px;
 margin:0 -15px 15px;
 text-align:center;
}
.berlangganan-box input.email-address[type="text"] {
 width:60%;
 padding:10px;
 border:1px solid #ddd;
 text-align:center;
 border-radius: 4px;
 outline:none;
}
.berlangganan-box input.submit-email[type="submit"] {
 transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
 padding:10px 15px;
 background:#07ACEC;
 border-radius: 3px;
 color:#fff;
 border:none;
 font-weight:bold;
 outline:none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
 background:#0D9AD0;
 cursor:pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
 background: #f9f2a5;
}

Lalu simpan template


Langkah 3
Salin kode dibawah ini lalu letakkan dimana subcription box ingin ditampilkan,bisa di sidebar/footer atau dibawah artikel.

<!-- Box berlangganan -->
<div class='berlangganan-box'><form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=anggasave&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
   <p>Silakan berlangganan Untuk Mendapatkan Film Terbaru :</p><p><input class='email-address' name='email' placeholder='Your email address...' type='text'/></p><input name='uri' type='hidden' value='anggasave'/>
   <input name='loc' type='hidden' value='en_US'/>
   <p><input class='submit-email' type='submit' value='Subscribe'/></p>
   </form>
  </div>

Ganti kode yang berwarna merah dengan url/id feedburner blog anda.

Sekarang coba lihat blog sobat. Apakah kotak berlangganan sudah tampil di blog anda. Cukup sekian tutorial cara membuat subcription box. Semoga membantu dan bermanfaat.