Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
23 Jan 2014

Membuat Widget Subscribe Email ala Blog HKBT

Membuat Widget Subscribe Email ala Blog HKBT - Sesuai yang telah saya janjikan kepada rekan saya sebelumnya yang request cara membuat widget subscribe email ala Blog HKBT di ChatBox.

Widget Subscribe Email ala Blog HKBT

Apa kelebihan dari tampilan Subscribe Email box ala Blog HKBT ini? kelebihannya mungkin terlihat lebih simpel dan lebih efektif dalam jangkauan visitor yang akan berlangganan di Blog tersebut, dengan tampilan padat, ringan dan dilengkapi dengan tombol css.

CSS

/* Tema : Subscribe By Email oleh Blog HKBT
URL: http://hilbramkurnia3.blogspot.com/2014/01/membuat-widget-subscribe-email-ala-blog-hkbt.html */ 
#subscribe-css{padding:3px 0}
.subscribe-wrapper{color:#fff; background:#F06666; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{background:#F06666; clear:both;display:block;margin:10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#eee url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}
.subscribe-css-email-button{background:#febdaf;color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
.subscribe-css-email-button:hover{transition:all .3s ease-in;background:#d12300;border:none}

HTML

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>
Dengan memasukkan email pada kolom di bawah ini, Anda akan mendapatkan update artikel dari <b style='color:#F9D233'>Blog HKBT</b> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=HilbramKurniaBlogsTutorial" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=HilbramKurniaBlogsTutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="HilbramKurniaBlogsTutorial" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="subscribe-css-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div>
<center>Powered by : <a href="http://hilbramkurnia3.blogspot.com/"><b style='color:#FFE100'>HKBT</b></a></center></div>
</div>

Kode yang telah saya bidangi sengaja untuk memudahkan Anda mengedit/merubah tampilan sesuai dengan keinginan.

Semoga bermanfaat..

6 Komentar

Pertamax Gan .
Akhirnya ktemu juga yang saya cari .
Visit Back ya Gan . Aldhinya[dot]Com .

boleh dicoba nih, kebetulan di blog saya belum ada...thanks

hehehe iya gan sesuai dengan permintaanmu.. :)

wowowow ini yg saya cari selama ini :) yg gaya ginian susah dicari

Terima kasih atas infonya. Sangat membantu kami.

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup