You would not feel good making a blog, until you don’t get readers. If you don’t get that, you do not make any sense. The success of your blog will be fulfilled, when there are a large amount of blog readers (Reader) and Subscribers. “Email Subscription Box” is the way to get the readers to get engaged into your blog. Subscribe option to the blog readers is an easy way to remain updated about new posts. Email Subscription, This is a simple way to extend your hand toward your readers and pull them into your reading list.
 |
| Subscribe Box For Blogger Website |
We are going to share today, How To Make An Attractive Email Subscription Box For Your Blogger Website.
How to make it for your blog?
- First, login to your blog.
- Click Layout from the Blogger dashboard.
- Add Gadget, on the right side of the layout. See figure below –
 |
| Add Gadget |
- Click The HTML / JavaScript.
- Now copy the following codes HTML / JavaScript and paste it into the box.
<style type="text/css">
#pro-subscribe {
height:222px;
background:#f2f2f2;
color:#2593B1;
font-family:Georgia, "Times New Roman", Times, serif;
padding:3px;
border:3px solid #2593B1;
border-radius: 5px;
}
.pro-subscribe-rashid {
color:#0C2D37;
font-weight:500;
text-align:center;
padding: 2px 0px 10px 0px;
}
.pro-email-field {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hccVBYKVgCp_5cnck842agMFGc0r5fR7K9JFl8NERpAkAl-sc0GJRrCBKm1kxgvSRBhiCx1iIkHUBvv7txXYlFwodIif3GJZLaIxHSR0EDo4u_-BMREYKISz-dwHsXe-PSHD-d7ThiY/s1600/Mail.png) no-repeat 10px 11px;
border:1px solid #8EDBF1;
border-radius:4px;
color:#444;
margin:0 7px 15px;
padding:10px 40px;
width:67%;
}
#pro-subscribe-submit {
height:40px;
width:150px;
background:#2593B1;
color:#FFF;
font-weight:bold;
text-align:center;
margin-left: 68px;
border: 1px;
border-radius: 5px;
cursor: pointer;
}
#pro-subscribe-submit:hover {background-color:##2593B1;}
#pro-social-icons {
height:50px;
width:100%;
margin-left:20px;
clear:both;
z-index: 2;
position: relative;
}
.pro-social-media-icons {display:table}
.pro-social-media-icons ul {
text-align:center;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.pro-social-media-icons ul {
margin-bottom:0;
padding:0;
}
.pro-social-media-icons li.media_icon {
margin-left:14px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.pro-social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<div id="pro-subscribe">
<div class="pro-subscribe-rashid">Social Medias Of Writing Craze</div>
<div class="pro-social-media-icons" id="pro-social-icons">
<ul>
<li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikpyjkhBbBBQ5ESsQiQNClFEexTU4HasAxELsIqoa3yu8BpXivHq_G4VwIfRCuifsM_DkjJUQPpLAtZTdwDT6mIbdG5Zk9VNGNyI_V-HzDh77ygVs-6G7b9eCyffy7XOXStd0t0HAF900/s1600/Facebook.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYUTU31PTDGerX2wK6YUDmWh_ACcNNUBc6G7_7zpNv7C28nGwlC7ofJnjPmN4ykh31qB2dhgy_gZemP3jwDnekSIQwe0-yhcCcJGRG80md9zV0_MAC-jLqmDoX-DZFQL7VbKWPgH7NNf8/s1600/Twitter.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ8U_50jBUP8rezwDIjcCLm43gG_xXuJCVaM2S3-IA2trEiN5es5ScF600_w4_0l6d3TeKINoWa4FEvTUE1b1ADnAOYMzJr0gC8BpK16oYzvDFyOCa4E7sB5gxJxVhmB0jPJ5B-iPb5Gc/s1600/Google.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbcAEwA7ZISGOGZUY5SNXFoAa2xm22K0eZIgSgkcSKsnIB_PeG3W0st_FV614HwSnmmcuMK1Vq5ZTyTbSRQVhxXk0XQM2panWXH6E5ZvKZGBzsyeuFYjWAs6F4PxTnR1MJlfAbiRsXq4/s1600/Youtube.png" /></a></li>
<li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsZpfNxrEPWQJ8Oke9pqesWhwS3Dw-q9KkTfHGm53mSkzW3YzResfcctYI3S1-GRSgBj2zJQv91pZuMySCvhEg4Jeb9G-GEJLxsFsAjOSdCYaT6JeusuTtBrfEsNQBPhU_PWGmvxfKcf4/s1600/Rss.png" /></a></li>
</ul>
</div>
<div class="pro-subscribe-rashid">To Get Latest Post Updates <br/>SubScribe Here</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WritingCraze', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="pro-email-field" name="email" autocomplete="off" placeholder="Your email adress"/><br />
<input type="hidden" value="Blogolect" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Submit" id="pro-subscribe-submit"/>
</form>
</div>
- Finally, Save the Gadget.
Customization:
- For adjusting Social media icons set, change blue colored value of margin-left:20px.
- Place your social media addresses replacing # of red color at the top.
- Replace Pink colored WritingCraze with your Feed burner account's name.
- Feed burner account? If you do not have one, you can make it from here.
