Simple Email Subscribe Di Bawah Postingan Blog

Simple Email Subscribe
Sebagai variasi lain dalam menata tampilan blog, salah satunya menyimpan email subscribe di bawah postingan. Beraneka ragam bentuk email subscribe yang bisa kita buat dan disimpan di bawah postingan.

Nah kali ini saya akan share cara membuat simple email subscribe ala Kompi Ajaib yang bisa Anda lihat pada gambar di samping ini atau di bawah postingan ini (jika belum dirubah lagi hehehehe... ). Cukup simple bukan?

Dan pada email subscribe ini juga saya sisipkan profil Google Plus admin blog sebagai publisher, sehingga markup publisher di Rich Snippet bisa terverifiikasi seperti pada gambar di bawah ini.

Markup verifikasi publisher

Untuk menggunakannya silahkan copy kode-kode di bawah ini:

Kode CSS
Simpan kode css di bawah ini di atas kode ]]></b:skin> atau kode </style>


.submit-email{text-align:left;margin:0;padding:0;}
.submitbutton {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;}
.enteryouremail {background: #fff !important;border: 1px solid #d2d2d2;padding: 0px 7px;color: #a19999;font-size: 12px;height: 23px;width: 165px;margin: 0px;}
.enteryouremail:focus{outline:none}

Kode HTML
Simpan kode HTML di bawah ini di bawah postingan. Cari kode seperti di bawah ini atau yang mirip seperti ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Kemudian simpan kode HTML-nya di bawah kode di atas.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='submit-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'>Kompi Ajaib</a>.</span>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='enteryouremail' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input name='uri' type='hidden' value='KompiAjaib'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/></form>
  </div>
</b:if>

Ganti kode Kompi Ajaib dengan nama blog Anda dan kode KompiAjaib dengan feed blog Anda di FeedBurner.

Selesai... mudah bukan? Selamat mencoba.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments