Cara Membuat Subscribe Box Di atas komentar

Kotak langgaran artikel atau subscribe bagi blogger memiliki banyak fungsi. Apalagi bagi blogger yang jumlah pengunjungnya cukup tinggi. Kotak langganan ini bisa membantu sekaligus meningkatkan jumlah pembaca.

Postingan kali ini, kita akan membahas cara pembuatan kotak langganan dengan bentuk yang keren. Sebelumnya, kita pernah juga membuat kotak langganan serupa namun bentuk yang Responsive.

Langsung saja ikuti langkah langkah berikut.

• Kalian Login terlebih dahulu ke blogger
• Kalian pergi menuju Theme/Template, Kalian klik Edit HTML
• Kalian masukan kode di bawah ini tepat di atas kode <b:skin>

/* 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:#f9f9f9;color:#555;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:#2196F3;padding:20px;overflow:hidden;border:3px solid #2196F3;box-shadow: 0 7px 7px rgba(210, 210, 210, 0.14), 0 3px 6px rgba(111, 111, 111, 0.2), 0 1px 9px rgba(150, 150, 150, 0.12);border-radius:3px}
.post-outer #subscribe-box h4{font-size:16px;margin:0 0 15px 0;color:#333;text-transform:uppercase}

• Selanjutnya kalian cari kode <b:if cond='data:blog.pageType == &quot;item&quot;'> dan masukan kode dibawah ini tepat di bawah kode tadi.

<div id='subscribe-box'>
  <h4><span style='color:#fff'>Berlangganan</span></h4>
  <p><span style='color:#fff'>Isi Email kalian untuk mendapatkan Informasi Anime</span></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=KodeTamvan&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='NubieBanget'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>

bila tidak muncul, kalian coba satu persatu simpan kode tersebut di bawah kode <b:if cond='data:blog.pageType

bila sudah kalian tinggal klik save template, dan lihat hasil nya. Bila masih ada kesalahan atau error, kalian bisa berkomentar di bawah dan sertakan gambar agar saya lebih mudah memperbaikinya.