Today we going to show you how to add stylish subscribe box for bloger. A subscription box mean a link to your RSS feeds and a email form, where reader's can submit their email id to get mail updates from your blog. This subscribe box with rss, google+, twitter, facebook, feedburner. When reader's look a simple subscribe box, they will not subscribe. But this subscribe box with attractive and awesome look, so blog reader's will subscribe, sure.
You can add this subscribe box to blogger very easily and simple. Here we added two method, you can select each one. First method by clicking add to blogger button. Second Method by adding css code and html to your blog.
First Method:
1. Click Add to Blogger button to add this subscribe box very easily.
Second Method:You can add this subscribe box to blogger very easily and simple. Here we added two method, you can select each one. First method by clicking add to blogger button. Second Method by adding css code and html to your blog.
First Method:
1. Click Add to Blogger button to add this subscribe box very easily.
1. Blogger Dashboard → Design → Edit HTML.
2. Find </head> tag and add following code before it.
<style type='text/css'> .sub-box{ width: 270px; background: #fff; padding: 2px 5px 7px 7px; border: 2px solid #000; border-radius: 15px; } .sub-box:hover{ border-style:dashed; 2px solid: #389af2; } .followlinks h1{ font-family:Cabin Condensed; font-weight: bold; color: #000; padding: 0px 0px 2px 40px;; font-size:17px; } .followlinks ul{ font-family:Cabin Condensed; font-weight: bold; } .followlinks ul li{ float:left; width:90px; padding-left:40px; margin:0 0 0 5px !important; line-height:35px !important; } .followlinks ul li a{ font-size:20px !important; text-decoration:none; font-weight:normal; } .followlinks ul li.otrss{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41lLo4Tw5mVCE8hOXQk1y7Y7mZXE9__ixweSSW2rSMZUQ2G7aiireotm8osqSxK5hAUuQVkyITgpfxNur4o6jM_zilqbJR7AMWf_WSaA8l-eSUMAQHBpkGTz97O-LDojRtOA9ZTotaNw1/s1600/rss-ot.png) no-repeat scroll left center transparent; } .followlinks ul li.otgoogleplus{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IQFk2dj3TDJcI90wqWF7FNT7ZAawW34CUe9TYnr-7ciVpHxffz9bxAJWA9fOEW96ef9rJdRDIB8BDODt0srre4EHkcfH2v5j7Bw-aDiPi2Wo1aZrpStpbcExTYcB2cJZpp5xVzt5OfHa/s1600/googleplus-ot.png) no-repeat scroll left center transparent; } .followlinks ul li.ottwitter{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWMcAWKxQWpiTpqWnDIQJHmMSd32LeZnBLHPxghXzICXOuV_a9YWPUHg6qcMYtmeCsE2_EfTVcgE3aCgrg-y5wg6SiNUBjt-amoMe2jRrLVFrtIjDiVA3RH4DQMmPljLzo7co3yOc6Dkv/s1600/twitter-ot.png) no-repeat scroll left center transparent; } .followlinks ul li.otfacebook{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVlqlFp4gitjgXio-mXZkrXBKoEucjhrm2d7d6bzdyLp2GfG9-cNvKxmGK4utssPMW2oba1UnMVFPU5_xq4F5JnoZe89jNARx3zRJMC7A0jYHLkcFV5u5qimXdbwxUdLRkBiyb1S9yVh-/s1600/facebook-ot.png) no-repeat scroll left center transparent; } form.emailform{ margin:5px 0 0; display:block; clear:both; } .emailtext{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_iD5Mv8Rfmkvb3QInNEW0exnbVZ5-M-7NWOHxOnNhAvA6vqO6tc5LxAW3raPTHg62zmaDIhaIRTaiTT8Lsibxll-BAJlXVxDgE7L4YkD0a1vedfUtPYQ_7OMoTQtEe9wrRoP5SodltdD7/s1600/ot-mail.png) no-repeat scroll 4px center transparent; padding:7px 15px 7px 35px; color:#444; font-weight:bold; text-decoration:none; border:1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; width: 142px; } .emailtext:focus{ outline: none; } .sub-button{ color:#444; font-weight:bold; text-decoration:none; padding:6px 10px; border:1px solid #D3D3D3; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; -goog-ms-border-radius: 5px; border-radius: 5px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } .sub-button:hover{ background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%); }</style> <script type="text/javascript"> WebFontConfig = { google: { families: [ 'Cabin+Condensed::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script>
4. Go to Design → Add Gadget → HTML/JavaScript.
5. Add following code inside it.
<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Upadtes</h1>
<ul>
<li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/onlinetrick'>RSS</a></li>
<li class='otgoogleplus'><a target='_blank' href='http://plus.google.com/114636838169087641091'>Google+</a></li>
<li class='ottwitter'><a target='_blank' href='http://twitter.com/onlinetrick'>Twitter</a></li>
<li class='otfacebook'><a target='_blank' href='https://www.facebook.com/onlinetrick'>Facebook</a></li>
</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=onlinetrick', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="onlinetrick" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="SignUp" title='' alt='' />
</form>
</div>
</div>
Customize.<div class='followlinks'>
<h1>Get Free Email Upadtes</h1>
<ul>
<li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/onlinetrick'>RSS</a></li>
<li class='otgoogleplus'><a target='_blank' href='http://plus.google.com/114636838169087641091'>Google+</a></li>
<li class='ottwitter'><a target='_blank' href='http://twitter.com/onlinetrick'>Twitter</a></li>
<li class='otfacebook'><a target='_blank' href='https://www.facebook.com/onlinetrick'>Facebook</a></li>
</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=onlinetrick', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="onlinetrick" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="SignUp" title='' alt='' />
</form>
</div>
</div>
Highlighted in red
Replace http://feeds.feedburner.com/onlinetrick with your Feedburner link. in red
Replace http://plus.google.com/114636838169087641091 with your google plus page link.
Replace http://twitter.com/onlinetrick with your twitter link.
Replace http://www.facebook.com/onlinetrick with your facebook page link.
Replace onlinetrick with your feedburner name in two terms.
Great design
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletereally a beautiful work.
ReplyDeletei just installed on my website.
http://adsenseparsingtool.blogspot.com/
Thanks for the great article! Is there a way to make this appear directly under all of my posts?
ReplyDelete@Jade copy the code from 5th step and paste it after the data:post.body/>
ReplyDeleteyes
Deletethis is i need, thanks for sharing
ReplyDeletethank you soooo much owner of site.. really this post is very useful for my blogger thank you thank you soo much .. you are awesome .. my name is saba and i create my new blog about bollywood hd picture if you check then i use this post to my blogger check it out
ReplyDeletehttp://www.bollywoodhdpictures.blogspot.com
thanks
ReplyDeletecheck out ma blog plz
ReplyDeleteNice one! Thanks for sharing this.
ReplyDeleterealy nice...
ReplyDeletethnksss
pls check out my blog
http://hdphotosonly.blogspot.com