Cara Membuat Box Email Hover Style Subscription with css

 

 

 

 

 

 

 

 

Salam sobat,gimana kabarnya....? kita jumpa lagi,sebelumnya saya sudah banyak membahas tentang tentang tampilan button dengan CSS,kini saya coba buat artikel tentang cara membuat tampilan box email dengan hover style,terdapat lima social box yang bisa sobat gunakan sebagi petunjuk halaman buku.Buat sobat yang ingin mencobanya silahkan ikuti tutorialnya karena ini sangat mudah.

1. Login dulu ke blog sobat.

2. Pilih Tata letak > Add Gadget.

3. Pilih HTML/Javascript.

4. Pastekan kode di bawah pada kolom konten.

<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=pengembarabiru&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='pengembarabiru' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' 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 alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0auuTC2rEjXfV1JXHG_f9yKgr6MkYdkuYEFblHRSOE_d8ztyfjJPCD29xyVd3yJoIqqr32RcGrlJmXxEWkCE1EX7X83wmicQWntufAsdScyS6FhSPdQuCxaCb1_ftqriqQsu85nXc63A/s1600/facebook500.png' alt='facebook'/></a>
<a href='TWITTER URL Sobat' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfMpOtHgQB3uBzwdDVShLjvftDqv1eXchsdXyrASugO2ryiG4Jiyt1uNE-94CHCA0N7tio_f6d34om50V-o7ArV-FQHstbMSFpUxcsCCQa9DgOJBxRKwvw81f1mWYXI8Lfn4OAKk2cDuU/s1600/twitter.png' alt='twitter'/></a>
<a href='GOOGLE+ URL Sobat' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNxEyc1Y8FtPuFKUZpmwleD0ro5pFXYLfB9u-FuEMQkCzQ8t8rZMHSyeFLG2jyr5TAVhLHWN28obzIePbtajmBZ9z-94E7TDwnnfBGYT6qjBmRgA_dHcrb2xL5PvTMi8CihUOOxVS-Hxo/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL Sobat' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhwwueh19_dABilH875TVWqQABIlJfDn6iGGJz6Z0Lc_T9CjVOk9mGCYQF_F6MhnE_oBRQInGoiG4S2D4Mhk6wX0T8jB5WvcxkhUb0K9Q1n6AbDW43ulrqjz63R33RYf2LIinJZUvMwI/s1600/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL Sobat' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Zd92EXNVPf-N0pbkVbUItO6V8Z8CPF08-VTyQYKoEzS_PiMtHzesAXyZ5s888nyaqFr6KvCPpoGEnc5yvbF26rGo6hFrQdHyYFdrO-t5BjfcgbrHzxwsxOaal2dAWUnMwPnpVSaShSo/s1600/rss.png' alt='rss'/></a>
</div>
</div>

Keterangan:
Untuk tulisan yang berwarna Hijau bisa sobat ganti dengan nama sobat.
Untuk tulisan yang berwarna Merah Silahkan ganti dengan URL yang di tuju.

Setelah semuanya beres kemudian save,dan silahkanlihat hasilnya.