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.
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.
1. Blogger Dashboard → Design → Edit HTML.
2. Find </head> tag and add following code before it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <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 h 1 { 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 (http:// 3 .bp.blogspot.com/-xOwt 1 EX 4 VX 4 /TteO 7 sxzSxI/AAAAAAAABFk/RNFj 1 bsukpQ/s 1600 /rss-ot.png) no-repeat scroll left center transparent ; } .followlinks ul li.otgoogleplus{ background : url (http:// 3 .bp.blogspot.com/-GW 70 c 2 ukQsI/TteO 6 ikOudI/AAAAAAAABFc/Cjqxp-ZVbX 4 /s 1600 /googleplus-ot.png) no-repeat scroll left center transparent ; } .followlinks ul li.ottwitter{ background : url (http:// 1 .bp.blogspot.com/-LTDd 7 jrc 55 s/TteO 8 nMa 6 uI/AAAAAAAABFs/r 6 aMf 7 ApC 6 Q/s 1600 /twitter-ot.png) no-repeat scroll left center transparent ; } .followlinks ul li.otfacebook{ background : url (http:// 4 .bp.blogspot.com/-RtDc-xIqgtg/TteO 56 LVTgI/AAAAAAAABFU/iWhsfa 01 wEo/s 1600 /facebook-ot.png) no-repeat scroll left center transparent ; } form.emailform{ margin : 5px 0 0 ; display : block ; clear : both ; } .emailtext{ background : url (http:// 4 .bp.blogspot.com/-DMrSxx 8 BJqo/TteQx 1 ijO 2 I/AAAAAAAABF 0 /Qd 1 ROb_ 8 oeA/s 1600 /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.
Spread The Love, Share Our Article
0 comments:
Post a Comment