How To Add Stylish Subscribe Box for All Blogger Dynamic CSS Templates

Today we will show you how to add style subscription box for blogger. A subscription
box meansa link to your RSS feeds and e-mail form, where readers can submit your email id to get updatesby mail from your blog. The RSS subscription box, Google + Twitter, Facebook, Feedburner.The reader looking
for a simple box subscription,
they will not subscribe. However,
this box to subscribe to the attractive appearance and impressive, so subscribe blog reader, of course.Now you can add this box to subscribe to blogger very easy and simple. Here we have added two methods; you can select each one of them. First method by clicking the Add button to blogger.Second method by adding CSS and HTML for your blog.

• You must have feedburner Account to email Subscribe click here to see How to Setup Feedburner Feed in Blogger

1. Go To Blogger Dashboard >LOayout>Add Gadget>HTML/JavaScript


2. past below code into html/javascript

<br /><div class='sub-box'><br /><div class='followlinks'><br /><h1><br />Get Free Email Upadtes</h1><br /><ul><br /><li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/(Enter Feedbunner ID)'>RSS</a></li><br /><li class='otgoogleplus'><a target='_blank' href='http://plus.google.com/(Enter Google+ ID) '>Google+</a></li><br /><li class='ottwitter'><a target='_blank' href='http://twitter.com/(Enter Twitter ID) '>Twitter</a></li><br /><li class='otfacebook'><a target='_blank' href='https://www.facebook.com/(Enter Facebook ID)'>Facebook</a></li><br /></ul><br /></div><br /><br /><br /><div style="text-align: left; display: inline-block;"><br /><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= Enter Feedbunner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"><br /><br /><input type="hidden" value="Mshihan" name="uri" /><br /><input type="hidden" name="loc" value="en_US" /><br /><input type="text" onblur="if (this.value == "") {this.value = "Enter Email Here";}" onfocus="if (this.value == "Enter Email Here") {this.value = ""}" value="Enter Email Here" name="email" class="emailtext" /><br /><input type="submit" class="sub-button" value="SignUp" title='' alt='' /><br /></form><br /></div><br /></div><br /><style><br />.sub-box{<br />background: #fff;<br />width: 270px;<br />padding: 2px 5px 7px 7px;<br />border: 2px solid #000;<br />border-radius: 15px;<br />}<br />.sub-box:hover{<br />border-style:dashed; 2px solid: #389af2;<br />}<br />.followlinks h1{<br />font-family:Cabin Condensed;<br />font-weight: bold;<br />color: #000;<br />padding: 0px 0px 2px 40px;;<br />font-size:17px;<br />}<br />.followlinks ul{<br />font-family:Cabin Condensed;<br />font-weight: bold;<br />}<br />.followlinks ul li{<br />float:left;<br />width:90px;<br />padding-left:40px;<br />margin:0 0 0 5px !important;<br />line-height:35px !important;<br />}<br />.followlinks ul li a{<br />font-size:20px !important;<br />text-decoration:none;<br />font-weight:normal;<br />color:#0068b5;<br />}<br />.followlinks ul li a:hover{<br />color:#000;<br />}<br />.followlinks ul li.otrss{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnIPH9h3nEmcbweEnN5SOD5pSMxSZQql9pCLQpcejYJmRCpAb178OPfZoekhHlEsNJ1p49XNNc8ENBX5SwC-Zb5MYU32YeFP_PG-fY6aP5h3PTmo-moefYcOilcIxgCFCDEcE7lglhkZK/s1600/rss-ot.png) no-repeat scroll left center transparent;<br />}<br />.followlinks ul li.otgoogleplus{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQm7vIe3JpQ-MkgK1Aqp9luxViT38QKjMuqmeN68xEmdpKJZ913GYuEg86BH9jghPIztqZyElKDBaFW18mKHCPH0GH4HxLdc8VbxglJWUyL8GuvzXrDhy6-scfRw8Od26oFcImaWIblsPO/s1600/googleplus-ot.png) no-repeat scroll left center transparent;<br />}<br />.followlinks ul li.ottwitter{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVvFDx0Kx36HpIn0neY3q9wWERdzF0IPWACTxSBq01JIevur7WdLC3kC91dsgef7EnisoubsPQV9xPiHh_9ZC7LKmJgAGUiNx6gdeCHE0a14LYazVOVPcGeStftCHcHwk5N6VbDYDQNCM/s1600/twitter-ot.png) no-repeat scroll left center transparent;<br />}<br />.followlinks ul li.otfacebook{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1F8PDYH8bZ3fmMetW0LuEJodhYKY-PAuoQVM4ITSqPbjLKKt_W4qvrDw_NmtGO928jrHg9nMPTf6KfwWAkU-Rw5lj52C4QhiUW-a1c6FfX1rDXTVc6SzervkzVye0zHsehZWW_0_usuP/s1600/facebook-ot.png) no-repeat scroll left center transparent;<br />}<br />form.emailform{<br />margin:5px 0 0;<br />display:block;<br />clear:both;<br />}<br />.emailtext{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUTDKTnIAG3Jgnxf5tyWWIghOI1MKZv56qL7m1aTLpKLp1ls7NmHfCUN3SP-Xdq1EfngCurUXkgz79v6bFqppIL7_47bw_rz7pIswIG7duNMeWbP1lzOQb0EmmjPjDRCZu5JYrEveA6vF/s1600/ot-mail.png) no-repeat scroll 4px center transparent;<br />padding:7px 15px 7px 35px;<br />color:#444;<br />font-weight:bold;<br />text-decoration:none;<br />border:1px solid #D3D3D3;<br />-moz-border-radius: 4px;<br />-webkit-border-radius: 4px;<br />border-radius: 4px;<br />-moz-box-shadow: 1px 1px 2px #CCC inset;<br />-webkit-box-shadow: 1px 1px 2px #CCC inset;<br />box-shadow: 1px 1px 2px #CCC inset;<br />width: 142px;<br />}<br />.emailtext:focus{<br />outline: none;<br />}<br />.sub-button{<br />color:#444;<br />font-weight:bold;<br />text-decoration:none;<br />padding:6px 10px;<br />border:1px solid #D3D3D3;<br />cursor: pointer;<br />-moz-border-radius: 5px;<br />-webkit-border-radius: 5px;<br />-goog-ms-border-radius: 5px;<br />border-radius: 5px;<br />background: #fbfbfb;<br />background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br />background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );<br />background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />}<br />.sub-button:hover{<br />background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);<br />background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));<br />background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);<br />background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);<br />background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);<br />filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );<br />background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);<br />}</style><br /><br /><script type="text/javascript"><br /> WebFontConfig = {<br /> google: { families: [ 'Cabin+Condensed::latin' ] }<br /> };<br /> (function() {<br /> var wf = document.createElement('script');<br /> wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +<br /> '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';<br /> wf.type = 'text/javascript';<br /> wf.async = 'true';<br /> var s = document.getElementsByTagName('script')[0];<br /> s.parentNode.insertBefore(wf, s);<br /> })(); </script><br /><br />

• Edit with Your ID


• Done!!!!!!!!

Click Here For Get More Blogger Tutorial

if any problem comment  below

Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.