email subscribe style 1

Email subscribe style 1 - cara membuat widget email subscribe style 1 ini memiliki tampilan minimalis, email subscribe style 1 sangat simpel dan tidak memakan banyak ruang untuk widget pada halaman blog anda. Widget email subscribe style 1 ini didukung oleh icon social media yang memiliki style hover yang bagus. Untuk melihat tampilan dari wiget email subscribe style 1 ini silahkan klik link demo dibawah ini, bila anda tertarik silahkan lihat codenya dibawah ini, langsung saja menuju TKP.

Demo

Code CSS here..

/*****************************************
Name : subscribe style 1
By : Rivai Silaban | Blog Design
Update :Minggu 22, Desember 2013
site : www.rivai.org
******************************************/
.subscribe_style_1 {
height:90px;
width:298px;
border-bottom:1px solid #E9E9E9;
margin:0 0 10px 0px;
background:#F4F4F4;
border:1px solid silver;
background-color: #F4F4F4;
}
.subscribe_style_1 .subscribe{padding:5px 10px}
.subscribe_style_1 .subscribe p{font-family:verdana;font-size:12px;color:#333}
.subscribe_style_1 .subscribe span{color:#999;font-size:11px}
.subscribe_style_1 .subscribe-form{margin:6px 0 3px;height:40px}
.subscribe_style_1 .subscribe-form .email{font-size: 12px;
padding: 5px;
width: 175px;
color: #666;
font-family: georgia;
margin-bottom: 5px;
border: 1px solid #999;}
.subscribe_style_1 .subscribe-form .submit{background-color:#5D5D5D;border:1px solid black;border-radius:2px;color:white;cursor:pointer;display:inline-block;font-family:arial;font-size: 0.9em;font-weight:bold;height:28px;padding:4px 8px;text-align:center;text-decoration:none;text-shadow: 1px 1px 1px #000;}
.subscribe_style_1 .subscribe-form .submit:hover{box-shadow:1px 1px 0 #626262 inset;background-color:#373737}
.rivaiRSS{margin:0}
.rivaiRSS a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:0px 0px;display:block;width:34px;height:34px;text-indent:-9999px;float:left;margin:0 15px 0 0}
.rivaiRSS a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-102px 0px}
.rivaiFacebook{margin:0}
.rivaiFacebook a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-34px 0px;display:block;width:34px;height:34px;text-indent:-9999px;float:left;margin:0 15px 0 0}
.rivaiFacebook a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-136px 0px}
.rivaiTwitter{margin:0}
.rivaiTwitter a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-68px 0px;display:block;width:34px;height:34px;text-indent:-9999px;float:left;margin:0 15px 0 0}
.rivaiTwitter a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-170px 0px}
.rivaiGoogle{margin:0}
.rivaiGoogle a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:0px -34px;display:block;width:34px;height:34px;text-indent:-9999px;float:left;margin:0 15px 0 0}
.rivaiGoogle a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-102px -34px}
.rivaiPinterest{margin:0}
.rivaiPinterest a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-34px -34px;display:block;width:34px;height:34px;text-indent:-9999px;float:left;margin:0 15px 0 0}
.rivaiPinterest a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-136px -34px}
.rivaiStumbleUpon{margin:0}
.rivaiStumbleUpon a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-68px -34px;display:block;width:34px;height:34px;text-indent:-9999px;float:left}
.rivaiStumbleUpon a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjen8SdV6fiH9xjZSEMX78u7IHBcyXem9t3NHi8Tjvie00bL2BlbnWbCcAghKeKQltTP_o1P-PqziCcDpip4VoJUUdCJZaSM78_4C-Q7Zb22FjWNnoLX_c7XHZelzqDgGV39gr7VWHg9XH1/s1600/social-icon.png') no-repeat;background-position:-170px -34px}
.email-group input{display:block;float:left;width:65%;margin:0 5px 0 0;padding:12px 10px 11px 10px;border:1px solid #249fea;border-radius:4px;font-size:14px;box-shadow:none;color:#999}
/*** www.rivai.org CSS and ***/

Code HTML here..

<!-- Rivai Silaban subscribe style 1 start-->
<div class="subscribe_style_1"><div class="subscribe">
<form class="subscribe-form" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" name="email" value="E-mail here..." onfocus="if (this.value == 'E-mail here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'E-mail here...';}" />
<input type="hidden" value="ID FEEDBURNER" name="uri"/>
<input type="hidden" value="ID FEEDBURNER" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit" type="submit" name="submit" value="Subscribe" /></form><div style="margin: -4px 0 0 -1px;">
<div class="rivaiRSS">
<a href="LINK ANDA" rel="nofollow" target="_blank" title="Subscribe to RSS">Subscribe to RSS</a></div>
<div class="rivaiFacebook">
<a href="LINK ANDA" rel="nofollow" target="_blank" title="Like us on Facebook">Like us on Facebook</a></div>
<div class="rivaiTwitter">
<a href="LINK ANDA" rel="nofollow" target="_blank" title="Follow us on Twitter">Follow us on Twitter</a></div>
<div class="rivaiGoogle">
<a href="LINK ANDA" rel="nofollow" target="_blank" title="Follow us on Google+">Follow us on Google+</a></div>
<div class="rivaiPinterest">
<a href="LINK ANDA" rel="nofollow" target="_blank" title="Follow us on Pinterest">Follow us on Pinterest</a></div>
<div class="rivaiStumbleUpon">
<a href="LINK ANDA" rel="nofollow" target="_blank" title="Follow us on StumbleUpon">Follow us on StumbleUpon</a></div></div></div></div>
<!-- Rivai Silaban subscribe style 1 end-->

Code diatas merupakan code CSS dan code tag HTML dari widget email subscribe style 1 pada tutorial postingan kali ini, bagi teman teman yang belum memahami cara pemasangannya pada halaman blogspot, silahkan kunjungi halaman tutorial cara pemasangannya melalui link dibawah ini.

http://www.rivai.org/2013/12/subscribe-style-1.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:58 AM