12/9/16

Cara Membuat Subscribe Box (Kotak Berlangganan) di Bawah Postingan Blog

Salah satu cara blogger untuk mendapatkan pengunjung setia pada blognya adalah dengan memasang kotak berlangganan email (subscribe box). Dengan memasang subscribe box ini, pengunjung blog kita akan lebih mudah untuk berlangganan postingan atau artikel blog via email. Yang nantinya ketika kita membuat postingan baru, maka postingan tersebut secara otomatis akan terkirim ke inbox email pelanggan.

Untuk memasang kotak subscribe box ini ada banyak sekali tempat, bisa di sidebar, footer, dan yang lebih banyak saya temukan saat ini dipasang di bawah postingan. Itu semua tergantung selera Anda dimana tempat yang bagus untuk menyimpannya dan jangan lupa utamakan faktor yang mempermudah pengunjung blog kita. Akan tetapi pada postingan kali ini saya akan membagikan 3 Style  Subscribe Box di bawah postingan blog. Berikut di bawah ini gambar demo dan tutorialnya.

Subscribe Box di bawah postingan blog style 1
Subscribe Box di bawah postingan blog style 1

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/* Subscribe Box */

#subscribe-css {margin:0;padding:0;display:block;position:relative;}

.subscribe-wrapper {background:#4b5f65;width:520px;height:180px;color:#fff;font-size:14px;font-family:&#39;Open Sans&#39;;line-height:20px;padding:20px 20px 10px 20px;text-align:center;border-radius:3px;}

.subscribe-wrapper p {margin:0;margin-bottom:30px;}

.subscribe-form {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:#39484d url(http://3.bp.blogspot.com/-b2pmxkhM8Is/VLQQ4PPCMMI/AAAAAAAAHO4/AGzYheKVaqs/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}

.subscribe-css-email-button {background:#30abd5;color:#fff;cursor:pointer;font-weight:700;

padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;}

.subscribe-css-email-button:hover {background:#0099cc;color:#fff;}

</style>

<div id='subscribe-css'>

<div class='subscribe-wrapper'>

<p>Sign up here with your email</p>

<div class='subscribe-form'>

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

<input name='uri' type='hidden' value='UrlAnda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe Now'/></form>

</div>

</div>

</div>

</b:if>

Subscribe Box di bawah postingan blog style 2
Subscribe Box di bawah postingan blog style 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/* Subscribe Box */

#subscribe-box p{font-size:14px;color:#666;margin:0 0 15px;padding:0}

#subscribe-box .emailfield{margin:auto}

#subscribe-box .emailfield input{padding:12px;color:#999;border:0;font-size:14px;max-width:77%;margin:0 0 5px 0;border-radius:2px}

#subscribe-box .emailfield input:focus{color:#000;outline:none}

#subscribe-box .emailfield .submitbutton{background:#3498db;color:#fff;display:inline-block;margin:0 0 0 10px;width:100%;max-width:20%;font-size:16px;font-weight:700;letter-spacing:.5px;border-radius:2px;padding:11px;border:0;opacity:.8}

#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{opacity:1}

.post-outer #subscribe-box{background:#f5f5f5;padding:20px;overflow:hidden;border:3px solid #e9e9e9}

.post-outer #subscribe-box h4{font-size:16px;margin:0 0 15px 0;color:#333;text-transform:uppercase}

</style>

<div id='subscribe-box'>

<h4>Berlangganan</h4>

<p>Suka dengan artikel di atas? Silakan berlangganan gratis via email</p>

<div class='emailfield'>

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

<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Alamat Email'/>

<input name='uri' type='hidden' value='UrlAnda'/>

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

<input class='submitbutton' type='submit' value='Submit'/>

</form>

</div>

</div>

</b:if>

Subscribe Box di bawah postingan blog style 3

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/* Subscribe Box */

#subscribe-css{background:#fafafa;overflow:hidden;clear:both;position:relative;margin:20px 0;border:1px solid rgba(0,0,0,0.03);}

.subscribe-wrapper{color:#fff;font-size:16px;line-height:18px;text-align:center;margin:0 0 20px 0;text-transform:none;font-weight:400;width:100%}

.subscribe-form{clear:both;display:block;overflow:hidden}

form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}

.subscribe-css-email-field{background:#fff;color:#999;margin:10px;padding:10px 20px;border:1px solid rgba(0,0,0,0.08);}

.subscribe-css-email-button{background:#f58220;color:#fff;cursor:pointer;padding:10px 25px;margin-left:5px;font-size:15px;border:0;font-weight:700;border-radius:4px;transition:all .6s}

.subscribe-css-email-button:hover{background:#e0761c;}

#subscribe-css p.subscribe-note{margin:20px;text-align:center;font-size:160%;color:#999;font-weight:400;line-height:1.3em}

#subscribe-css p.subscribe-note span {font-weight:700;}

</style>

<div id='subscribe-css'>

<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>

<div class='subscribe-wrapper'>

<div class='subscribe-form'>

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

<input name='uri' type='hidden' value='UrlAnda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>

</div>

</div>

</div>

</b:if>

Cara Memasang Subscribe Box di Bawah Posting

Pastikan anda telah mendaftar Feedburner dan telah mengaktifkan Email Subscribernya di Feedburner.

Rekomendasi : Apa itu FeedBurner dan Bagaimana Cara Membuatnya ?

1. Pertama Anda login terlebih dulu ke blog anda.
2. Jangan lupa backup blog Anda terlebih dahulu.
3. Selanjutnya buka Edit HTML lalu cari  '<b:includable id='post' var='post'>'. Gunakan (Ctrl+F) untuk memudahkan pencarian, setelah menemukan kode tersebut anda selanjutnya skroll kursor kebawah sampai menemukan tag penutup '</b:includable>'. kemudian copy pastekan kode yang tadi anda pilih diatas tepat sebelum kode tersebut.
4. Maka hasil penyimpanan kodenya akan seperti gambar di bawah ini.

Cara Memasang Subscribe Box di Bawah Posting

5. Jika kode penyimpananya telah sama seperti pada gambar, selanjutnya Anda klik Save/Simpan.

- Kode wana merah UrlAnda pada kotak script diatas silahkan ganti dengan url feedburner Anda.
- Kode warna biru pada kotak script di atas silahkan ganti kata-katanya sesuai keinginan Anda.
Kode yang Anda pasang di atas hasilnya jika menggunakan template default blogger maka hasilnya tepat di atas kolom "Komentar" atau di bawah "Catatan Kaki".

Selamat mencoba dan semoga postingan ini bermanfaat, Jika ada pertanyaan jangan sungkan-sungkan untuk meninggalkan komentar dibawah.

special thanks to arlinadzgn.com

Happy Blogging ☺.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.