Simple Email Subscribe Di Bawah Postingan Blog

Simple Email Subscribe Di Bawah Postingan Blog

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

45 Comments Add Comment

Ini lebih simple mas...keren

Balas

Iya mas Fian terima kasih heheee :)

Balas

Akhir na di bagikeun oge :)

Balas

ini yang ane tunggu kang , kan kalo gini bisa custom :D , desain suka-suka .. hehe makasih yah kang adi :)

Balas

oke kan Adhi izin coba ya, banyak yang nyarii code di atas nih
:D

Balas

ane mau cobain kang ditemplatenya kang simet yang droid pluss, mudah2an bisa :)

Balas

terima kasih kang sudah di bagikan simple email subscribe di bawah posting :)

Balas

Muhun kang seueur nu naroskeun :)

Balas

Iya kang dimodif lagi biar lebih pas dengan tema blognya :)

Balas

Silahkan mas :)

Balas

Silahkan mas hehehehe :)

Balas

Silahkan mas :) Pasti bisa :D

Balas

Sama-sama mas Ade :)

Balas

simple mas,makasih nantidipraktekkan :D

Balas

pertanyaan saya dijawab ya mas, siphh deh.. :)

Balas

simple minimalis ya kang :D

Balas

Kang kalau kepengarangan tidak bekerja sebaiknya url kita ditaruh pada apa ? Mohon pencerahannya

Balas

om adhy emang kreatif.. mantap terus hasilnya. lanjutkan mas.. :)

Balas

Silahkan mas :)

Balas

Hehehhe iya mas :)

Balas

Betul sist, simple dan minimalis :)

Balas

Kalau saya disimpan di postmeta yang di bawah judul postingan mas :D

Balas

Hehehe makasih sist :)

Balas

Wah bisa tampil lebih keren ni mas Adhy setiap postingan blognya.
coba juga ah...thanks mas Adhy atas ilmunya.

Balas

saya suka yang simple-simple kang ... tp masih adakah org yg mau ber subcribe kang ?? kenapa saya gak pasang karena ragu hehehe

Balas

Contohnya bagaimana ? Masih bingung

Balas

kodenya pendek bgt gan |o| :-bd , ijn praktekkin di blog ane ya :)

Balas

iya kang , emang enak banget nih kalo standard basic kaya gini , bisa custom kan jadi nya :D ..

eh iya maaf OOT , blog nya sekarang jadi grayscale .. lagi kelabu kah admin? :D

Balas

Iya saya lihat di blog kang Rian jadi tambah oke :-bd

Minta do'anya saja biar saya selalu sehat kang :)

Balas

Mungkin masih ada kang hehehehe :)

Balas

Silahkan sist :D

Balas

amin ya rabb. semoga selalu di sehatkan kang adi nya ..

eh iya , OOT lagi nih , cepet banget itu bikin template kompibanget nya , tau progress nya kemarin2 waktu share goreng impun dolor si amet :D , eh sekarang udah nongkrong di page one nya kompiajaib.com .. salut deh sama kang adi . kapan2 saya mau coba bikin template buat di share ah ngikutin kang adi ( Terinspirasi nih ) , bantu dukungannya yah kang :) ..

Balas

buat pelengkap saja kang ruly, alhamdulillah jika ada yang mau ngikutin =D

Balas

gak katemu kang kode yg di cari tu, trus solusi y gmn kang.

Balas

mantap mas kompi tutorialnya tapi saya mw nanya apakah ini sudah valid HTML5 kah soalnya punya saya ga Valid HTML5..??

Balas

Owh iya Mas Kalau Valid HTML5 saya Mw nyobain Pasang di Blog Saya Hehehehe :D

Balas

Sudah valid mas hehehe :) coba saja cek halaman ini di validator.

Balas

Silahkan dicoba aja mas :) ini sudah valid html5 :)

Balas

terimakasih banyak Mas Adhy, Sudah saya Aplikasikan diblog Saya dan ternyata Simple, Keren Dan Valid HTML5
1x Lagi Makasih ilmunya Jadi Nambah buat saya Hehehe Smoga Sukses terus Buat Mas Adhy....:)
Salam blogger Mas

Balas

Owh iya Satu Lagi Mas Saya Lupa Salam Kenal Dari saya ,,,Pastinya saya Akan sering mampir kesini buat cari ilmu tambahan dari muster hehehe :D

Balas

keren juga nih.. ijin kopi kodenya yia bos...

Balas

sip, udah berhasil terpasang :)

thanks kang adhy

Balas

Kak Tutorial more menu nya doonk, kalo boleh

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×