Membuat Email Subscribe Widget Flat Ui

Membuat Email Subscribe Widget Flat Ui

Bola Hero Gawai

Membuat Email Subscribe Widget Flat Ui

Email Subscribe Widget Flat Ui
Salah satu widget yang saya anggap penting untuk disimpan di blog adalah email subscribe widget atau widget berlangganan via email.

Widget ini berfungsi untuk menjaring pembaca setia blog. Dengan ini akan secara otomatis akan mengirimkan update-an terbaru blog ke inbox email pelanggan. Namun di sini saya sarankan untuk kemudian menggunakan ringkasan feed email guna mengatasi auto blog setelah memasang widget scbscribe.


Untuk live demo membuat Email Subscribe Widget Flat Ui ini silahkan klik link berikut DI SINI Silahkan lihat subscribe widget pada sidebar-nya.

Jika Anda tertarik untuk mencoba menggunakannya silahkan copy kode-kode di bawah ini.

Kode CSS
Silahkan simpan kode CSS ini di edit HTML di atas kode ]]></b:skin> atau </style>


#subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #95a5a6;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #555;text-align: center;background: #ecf0f1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: &#39;Droid Serif&#39;;font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: &#39;Droid Serif&#39;;width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #F4836A;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;box-shadow: 0px 3px 0px 0px #e23b16;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #DD7761;}

Kode HTML
Silahkan simpan kode HTML di bawah ini pada gadget sidebar HTML/JavaScript di Tata Letak.


<div id='subscribe-box'>
              <div class='title'>
               Subscribe Here
              </div>
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</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=KompiAjaib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='KompiAjaib'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
             </div>
</div>

Silahkan ganti kode KompiAjaib dengan feed blog Anda di FeedBurner. Ada 2 buah kode KompiAjaib pada kode di atas, silahkan ganti dua-duanya.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

48 Comments Add Comment

Pertamax langsung di coba mas :)
terima kasih dan PERTAMINAAAAAA

Balas

keduanxa nih.... bisa saya praktekkan dulu kang

Balas

9 menit. lost pertamax

Balas

Email subscribe widget sangat berguna bagi para pembaca blog untuk berlangganan update terbaru melalui alamat email ya Kang. Sepertinya harus di coba dan di pasang nih di blog.

Salam

Balas

Heheheeehe silahkan ambil pertaminanya :D awas jangan ditenggak :ng

Balas

Silahkan dicoba aja mas :D

Balas

Betul mas, namun harus hati2 dengan auto blog. Feed blog kita harus disingkat.

Balas

mantap kang infonya sebenarnya yang Ade cari cara pasang subscribe seperti punya kang Adhy di bawah posting tapi alhamdulillah yang ini perlu di amankan dulu
terima kasih kang

Balas

kok komentarnya pertamakan mulu iah :D
saya berarti premium subsidi dunk :P

keren tuh om templatenya.. :-d

Balas

Yang itu mungkin besok saya share :)

Balas

Heheheeh belum beres mas Panjz :p

Balas

pemasangan subscribe ternyata tidak sesulit yang saya bayangkan, oke mas Adhy :-bd
saya boleh yaa pasang code subscribenya
walaupun belum di jawab mas Adhy saya terima kasih duluan ajah lah =)D

Balas

wah mantapz kang tampilannya unyu-unyu gitu hee

Balas

Widget Email subscribe berguna untuk pembaca setia blog kita
Yah Kang Adhy, berarti kegunaanya mirip seperti Follower blog
Di blog saya gak ada ini, ijin mencobanya Kang. terima kasih :-bd

Balas

Waduh Mas Luthfi mau Nenggak pertamax euy hhh :ng

Balas

Hehehe silahkan dicoba aja mas :)

Balas

Hehehehe kayak Adminnya ya kang =D

Balas

Ya kang Saud, manfaatnya sama dengan Follower :)

Balas

Saya pasang yang dari feedburner langsung mas ... untuk kode yang ini sy simpan dulu deh ... Template Kompi Banget nya mantap mas ... :)

Balas

Hhehehe makasih mas tapi itu belum beres mas, tinggal ngatur responsivenya :)

Balas

boleh tuh kang template demo nya di share
xixixixi :D

Balas

Silahkan sis :)

Balas

Rencananya begitu mas, nanti kalau udah beres :)

Balas

keren mas, memang lagi jaman flat color.. enak dilihat dimata, :)

Balas

Paling suka sama flat. hehe
Akan saya pasang mas :)

Balas

izin praktek Kang :)

Balas

ini yang saya tunggu-tunggu... ternyata di post juga...
tapi sepertinya saya lebih srek ama yang simple, saya coba yang satunya aja kang yang dibawah postingan =D

Balas

naksir ama template demo nya =)D

Balas

Langsung saya terapin di blog saya nih Kang ..
Aldhinya(.)com

Balas

mas cra bikin seperti
form Pasang Iklan ,
yng pnya mas gmn,
saran dong.
makasih

Balas

Silahkan simak di sini mas http://www.kompiajaib.com/2012/11/membuat-form-kirim-email-dengan-upoad-file-di-blog.html

Balas
This comment has been removed by the author.

makasih ilmunya mas....

salam kenal.... :)

Balas

Nice artikel gan :-d , tapi saya bingung nih masang feednya @@ , saya harus pakai yang Original atau Feed Addressnya gan ? trmksh ;)

bang-irham.blogspot.com

Balas

iya mas serba flat hehehe :)

Balas

Silahkan mas :)

Balas

Silahkan mas :)

Balas

Silahkan dipilih-pilih aja mas :)

Balas

Silahkan di download templatenya mas :)

Balas

Silahkan mas Aldhi :)

Balas

Salam kenal juga mas :)

Balas

Hanya mengganti user name nya saja yang dari FeedBurner.

Balas

kang, ane kan udah ganti jadi user ane. Ane sudah enable email subscription di feedburner. tapi pas saya tes, kok muncul tulisan kayak gini ya kang ?
The feed does not have subscriptions by email enabled

tolong dong kang =(

Balas

ijin kopi kodenya yia bos...

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!

×
×
×