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.

Subscribe to receive free email updates:

12 Responses to "Cara Membuat Kotak Berlangganan Dibawah Artikel Seperti Evo Magz"

  1. ijin coba buat gan emang jos kota berlangganan yg satu ini

    ReplyDelete
  2. Wah sudah muncul gan , sangat cocok dengan template yang sedang saya gunakan , tapi apakah subcribe box ini langsung mengarah ke feedburner kita ?

    ReplyDelete
    Replies
    1. harus diedit dulu mas id feed blog anda supaya jika ada yang subcribe maka akan subcribe di blog anda.

      Delete
  3. Keren gan, saya juga pake template evo magz hehe

    ReplyDelete
    Replies
    1. Kalau udh pakai evo magz gak perlu masang kotak berlanggan ini dong kan udh ada

      Delete
  4. keren tampilannya, kalau udah wp bisa gk bang tapi tampilannya kek gitu?

    ReplyDelete
  5. Ijin coba gan, kebetulan saya juga make evo magz.

    ReplyDelete
  6. bermanfaat banget gan thakns info nya

    ReplyDelete