Cara Membuat Subscribe Box Email ala Mas Sugeng - Di Cara Ala-Ala kali ini, kita akan membuat Subscribe Box Email ala Mas Sugeng. Subscribe Box inipun bukan hanya dipakai oleh Mas Sugeng. Tapi, juga dipakai oleh Template Invert Pro Responsive Blogger Template. Cara Membuat Berlangganan Email ala Mas Sugeng seperti Sugeng.id ini sangat mudah sekali untuk diaplikasikan.
Mengingat Biasanya Tampilan Langganan Newsletter dari blogger yang sederhana dan kurang keren jadi saya buat Cara Membuat Berlangganan Email ala Mas Sugeng. Oke berikut langkah Membuat Subscribe Box Email ala Mas Sugeng :
Cara Membuat Subscribe Box Email ala Mas Sugeng
- Login ke
Blogger.com
- Pilih Template -> Edit HTML, Cari Kode
]]></b:skin> Atau</style>
- Setelah ketemu, sisipkan kode CSS di bawah ini di salah satu kode di atas!
/* Subscribe Box ala Sugeng.id by YOUDHA */
#subscribe-box-ala-sugengid p{font-family:Helvetica,sans-serif;font-size:14px;color:#fff;margin:0 0 24px;padding:0}
#subscribe-box-ala-sugengid .emailfield{margin:auto}
#subscribe-box-ala-sugengid .emailfield input{padding:12px;color:#bcc4ca;border:none;font-size:14px;margin-bottom:16px}
#subscribe-box-ala-sugengid .emailfield input:focus{color:#454545;outline:none}
#subscribe-box-ala-sugengid .emailfield .submitbutton{background-color:#f97e76;color:#fff;margin:0;width:100%;font-family:"Open Sans Condensed",Arial,sans-serif;font-size:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
#subscribe-box-ala-sugengid .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e26d65;color:#fff;}
#HTML98{background-color:#55616d}
#HTML98 h2,#HTML98 h3{color:#fff}
- Kemudian
SIMPAN TEMPLATE
- Setelah itu buat
Gadget HTML atau JavaScript dan salin kemudian pastken kode berikut tepat di kotak kontenGadget HTML atau JavaScript
<div id="subscribe-box">
<h4>
Berlangganan via email</h4>
Suka dengan postingan di blog ini? Silakan berlangganan postingan terbaru langsung via email.<br />
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<b>InvertPro</b>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" onblur="if (this.value == "") {this.value = "Alamat Email";}" onfocus="if (this.value == "Alamat Email") {this.value = "";}" type="text" value="Alamat Email" />
<input name="uri" type="hidden" value="<b>InvertPro</b>" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Lanjutkan" />
</form>
</div>
</div>
- Kemudian Buka Template > Edit HTML > Kemudian cari Gadget yang telah kamu buat tadi. Dan lihat bagaimana HTML nya jika HTML nya HTML3 ganti kode CSS yang saya tandai biru dengan HTML kode anda jika HTML 3 tulis HTML 3 jika HTML 4 atau sebagainya tulis HTML itu sendiri.
Ganti kode yang bertuliskan InvertPro dengan kode yang sesuai milik anda. Terima kasih. Semoga bermanfaat.
