Subscribe box widget for blogger with Social icons

In this example below you will see how to do a Subscribe box widget for blogger with Social icons with some HTML / CSS and Javascript

This is a simple subscribe box widget blogspot blogger.

Thumbnail
This awesome code was written by msdesignbd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright msdesignbd ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Subscribe box widget for blogger with Social icons</title>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" 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 class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
</center>
<br/><br/><br/>
<div class="creadit">
<a href="http://msdesignbd.com" target="_blank"> Get This Widget</a></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/msdesignbd/subscribe-box-widget-for-blogger-with-social-icons-ZbZVYN */
body {
  background: #333;
  margin: 0 auto 0;
  color: #444;
  font-family: 'PT Sans', arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}
#subscribebox {
  background: #576269;
  padding: 20px;
  font-family: 'PT Sans', sans-serif;
  width: 300px;
}
.widget_follow_subscribe .widget-detail {
  padding: 36px 30px 40px 30px;
}
#subscribebox p {
  color: white;
  font-size: 15px;
  text-align: center;
  font-weight: 700;
}
.follow-subscribe-social {
  margin: 0 0 15px;
  padding: 0 0 14px;
  border-bottom: #858585 solid 1px;
}
.follow-subscribe-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.follow-subscribe-social ul li {
  display: inline;
  margin: 0 15px 0 0;
  border-bottom: none;
}
.follow-subscribe-social ul li:last-child {
  margin: 0;
}
.follow-subscribe-social ul li a {
  font-size: 17px;
  color: #cacaca;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.follow-subscribe-social ul li a:hover {
  color: #fff;
}
form.subscribe {
  margin-top: -7px;
}
form.subscribe input {
  display: block;
  width: 100%;
}
.subscribe-email {
  height: 45px;
  border: none;
  margin: 0 0 10px;
  font-size: 0.928571em;
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
}
.subscribe-email:focus {
  outline: 0;
}
/* ===== Placeholder color ===== */
form.subscribe .placeholder {
  /* Internet Explorer 9 */
  color: #cacaca;
}
form.subscribe input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #cacaca;
}
form.subscribe input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fafafa;
}
form.subscribe input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fafafa;
}
.subscribe-button {
  height: 45px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  border: none;
  background-color: #F35D5C;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.subscribe-button:hover {
  background-color: #f1d640;
}
.subscribe-button:focus {
  outline: 0;
}
.creadit a {
  background: #F35D5C;
  color: white;
  margin-top: 30px;
  padding: 20px;
  font-size: 15px;
}

Comments