?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Membuat Style Subscribe Dengan CSS

Pada postingan kali ini saya akan share beberapa style kotak Subscribe dengan CSS, jika sobat bertanya tanya apa itu Subscribe? jika diartikan dalam bahasa indonesia pasti sobat akan lebih mengerti dan lebih paham dengan yang saya maksud. Subscribe jika diartikan dalam bahsa indonesia adalah berlangganan, misalkan sobat sering melihat situs/blog orang lain dengan tampilan subscribe yang menarik dan enak dipandang mata.

Oke daripada kesana kemari (ngomong yang tidak jelas) DH-F akan mengajak langusng ke Design Subscribe dengan CSS. disini saya punya beberapa style, jika sobat tertarik silahkan pakai dan tempelkan di blog, tapi saya yakin temen temen lebih pandai dan lebih pintar daripada saya. oke yang pertama saya punya style seperti di bawah

Design  Style Subscribe Dengan CSS
Style Subscribe Box white

Style Subscribe Box white

<style>
#lutfi-kotak-white {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #ffffff solid;
width: 500px;
}

#ltf-box-black .div {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 10px 10px 10px 10px;
}

#ltf-box-black h1 {
margin-top: 5px;
color: #666;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px #000;
line-height: 35px;
}

#ltf-box-black input {
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 #FFF;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}

#ltf-box-black .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px #000;
width: 120px;
font-family: georgia;
margin-left: 5px;
}

#ltf-box-black .submit:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
}

#ltf-black .submit:active {
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
}
</style>

<div id="lutfi-kotak-white">
<div id='ltf-box-black'>
<center>
<h1>Subscribe To Get FREE Tutorials!</h1>
</center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Dewata&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
target='popupwindow'>
<center>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'
/>
<input name='uri' type='hidden' value='Dharla-Ferdana' />
<input name='loc' type='hidden' value='en_US' />
<input class='submit' type='submit' value='Subscribe' />
</center>
</form>
</div>
</div>


Design  Style Subscribe Dengan CSS
Style Subscribe Box red

Style Subscribe Box red

<style>
#lutfi-kotak-green {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #009900 solid;
width: 500px;
}

#ltf-box-green .div {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
-moz-border-radius: 10px;
border-radius: 10px;
margin: 10px 10px 10px 10px;
}

#ltf-box-green h1 {
margin-top: 5px;
color: #009900;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px #000;
line-height: 35px;
}

#ltf-box-green input {
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 #FFF;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}

#ltf-box-green .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px #000;
width: 120px;
font-family: georgia;
margin-left: 5px;
}

#ltf-box-green .submit:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

#ltf-green .submit:active {
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}
</style>

<div id="lutfi-kotak-green">
<div id='ltf-box-green'>
<center>
<h1>Subscribe To Get FREE Tutorials!</h1>
</center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Dewata&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
target='popupwindow'>
<center>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'
/>
<input name='uri' type='hidden' value='Dharla-Ferdana' />
<input name='loc' type='hidden' value='en_US' />
<input class='submit' type='submit' value='Subscribe' />
</center>
</form>
</div>
</div>


Design  Style Subscribe Dengan CSS
Style Subscribe Box orange

Style Subscribe Box orange

<style>
#lutfi-kotak-blue {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #ffffff solid;
width: 500px;
}

#ltf-box-blue .div {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
-moz-border-radius: 10px;
border-radius: 10px;
margin: 10px 10px 10px 10px;
}

#ltf-box-blue h1 {
margin-top: 5px;
color: #0033FF;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px #000;
line-height: 35px;
}

#ltf-box-blue input {
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 #FFF;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}

#ltf-box-blue .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px #000;
width: 120px;
font-family: georgia;
margin-left: 5px;
}

#ltf-box-blue .submit:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

#ltf-blue .submit:active {
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
</style>

<div id="lutfi-kotak-blue">
<div id='ltf-box-blue'>
<center>
<h1>Subscribe To Get FREE Tutorials!</h1>
</center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Dewata&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
target='popupwindow'>
<center>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'
/>
<input name='uri' type='hidden' value='Dharla-Ferdana' />
<input name='loc' type='hidden' value='en_US' />
<input class='submit' type='submit' value='Subscribe' />
</center>
</form>
</div>
</div>


Design  Style Subscribe Dengan CSS
Style Subscribe Box black

Style Subscribe Box black

<style>
#lutfi-kotak-orange {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #ffffff solid;
width: 500px;
}

#ltf-box-orange .div {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
-moz-border-radius: 10px;
border-radius: 10px;
margin: 10px 10px 10px 10px;
}

#ltf-box-orange h1 {
margin-top: 5px;
color: #FF6600;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px #000;
line-height: 35px;
}

#ltf-box-orange input {
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 #FFF;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}

#ltf-box-orange .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px #000;
width: 120px;
font-family: georgia;
margin-left: 5px;
}

#ltf-box-orange .submit:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

#ltf-orange .submit:active {
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>

<div id="lutfi-kotak-orange">
<div id='ltf-box-orange'>
<center>
<h1>Subscribe To Get FREE Tutorials!</h1>
</center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Dewata&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
target='popupwindow'>
<center>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'
/>
<input name='uri' type='hidden' value='Dharla-Ferdana' />
<input name='loc' type='hidden' value='en_US' />
<input class='submit' type='submit' value='Subscribe' />
</center>
</form>
</div>
</div>


Design  Style Subscribe Dengan CSS
Style Subscribe Box blue

Style Subscribe Box blue

<style>
#lutfi-kotak {
padding: 20px 20px 20px 20px;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-moz-box-shadow: 0px 0px 10px 5px #000;
box-shadow: 0px 0px 10px 5px #000;
background: -webkit-gradient(linear, left top, left bottom, from(#243d63), to(#1a2638));
background: -moz-linear-gradient(top, #243d63, #1a2638);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 1px 0px #000;
border: 2px #ffffff solid;
width: 500px;
}

#ltf-box-red .div {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 10px 10px 10px 10px;
}

#ltf-box-red h1 {
margin-top: 5px;
color: #d81b21;
font-family: georgia;
font-size: 25px;
margin-bottom: 5px;
padding: 0;
text-shadow: 0 2px 3px #000;
line-height: 35px;
}

#ltf-box-red input {
background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
border: medium none;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
padding: 10px;
text-shadow: 1px 1px 0 #FFF;
width: 280px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
}

#ltf-box-red .submit {
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 20px;
text-shadow: 0 1px 2px #000;
width: 120px;
font-family: georgia;
margin-left: 5px;
}

#ltf-box-red .submit:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}

#ltf-red .submit:active {
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
</style>

<div id="lutfi-kotak">
<div id='ltf-box-red'>
<center>
<h1>Subscribe To Get FREE Tutorials!</h1>
</center>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Dewata&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
target='popupwindow'>
<center>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Masukan Alamat E-mail...&quot;;}' onfocus='if (this.value == &quot;Alamat Email...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Masukan Alamat E-mail...'
/>
<input name='uri' type='hidden' value='Dharla-Ferdana' />
<input name='loc' type='hidden' value='en_US' />
<input class='submit' type='submit' value='Subscribe' />
</center>
</form>
</div>
</div>
Jika Sobat suka dengan Style Subscribe diatas silahkan sobat copy vaste script HTML dan Script CSS dan simpan di blog sobat. Good Luck Happy Blogging
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

Sejauh ini belum ada diskusi yang masuk. Mulailah berdiskusi dan temukan teman-teman barumu.

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!