Email Subscribe Ala Kompi Ajaib

pinjem foto kang adhy

Selamat malam, semoga malam anda menyenangkan :) kali ini saya akan share cara membuat email subscribe ala Kompi ajaib (kompiajaib.com). Karena saya tidak ingin meniru mentah-mentah postingan kang Adhi dan karena saya juga sedikit mempelajari meskipun enggak mudeng-mudeng amat. wkwkwk. saya membedakan selectornya, tapi tenang saja, Hasilnya masih tetap sama kok :D jangan takut untuk memasangnya, kerena ini tidak memperlambat kinerja blog agan :D

Langsung saja ke TKP!

CSS CODE
Pertama-tama, pasang CSS ini.
.hafiz-email{text-align:left;margin:0;padding:0;} .hafizbutton {background: #FF8000;border: 1px solid #F66303;font: 12px Oswald;color: #fff;height: 25px;padding:0 12px;margin: 0 0 0 5px;text-transform:uppercase;cursor: pointer;} .enteryouremailhfz {background: #fff !important;border: 1px solid #d2d2d2;padding: 0px 7px;color: #a19999;font-size: 12px;height: 23px;width: 165px;margin: 0px;} .enteryouremailhfz:focus{outline:none}

Tag Kondisional
Dan, cari kode :
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <div style='clear: both;'/>  </div>

HTML CODE
Pasang kode di bawah ini di bawah kode di atas.
<b:if cond='data:blog.pageType == "item"'> <div class='hafiz-email'> <span style='font-size:10px'>Enter your email address to get update from <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='publisher' target='_blank' title='Publisher Profile'>Mas Hafiz</a>.</span> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=MasHafiz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input class='enteryouremailhfz' name='email' onblur='if (this.value == "") {this.value = "Enter your email....";}' onfocus='if (this.value == "Enter your email....") {this.value = "";}' type='text' value='Enter your email....'/> <input name='uri' type='hidden' value='MasHafiz'/> <input name='loc' type='hidden' value='en_US'/> <input class='hafizbutton' type='submit' value='Subscribe'/></form> </div> </b:if>

Ganti MasHafiz sesuai dengan feedburner anda.

anda bisa mengganti Enter your email address to get update from sesuai dengan yang anda inginkan.

Anda juga bisa mengganti .hafiz-email .hafizbutton .enteryouremailhfz .enteryouremailhfz sesuai dengan kemauan anda, tapi dengan catatan anda harus bisa mengganti tag pada HTML-nya

Sekian dari saya.

Spesial thanks to +Adhy Suryadi

Sumber bacaan : http://www.kompiajaib.com/2014/02/simple-email-subscribe-di-bawah.html