Ajax Loader
×
HTML 
 
1
 
2
<div id="bit" class="loggedout-follow-normal" style="bottom: 0px; ">
3
<a class="bsub open" href="javascript:void(0)"><span id="bsub-text">Follow</span></a>
4
<div id="bitsubscribe" class="open">
5
<h3><label for="loggedout-follow-field">Subscribe via Email</label></h3>
6
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?YOUR-FEED-BURNER-URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" id="loggedout-follow">
7
<p>Get every new post delivered to your Inbox.</p>
8
  <p><input type="email" name="email" style="width: 95%; padding: 1px 2px;outline:none" onclick="value=''" value="Enter your email address" onfocus="this.value=(this.value==&quot;Enter your email address&quot;) ? &quot;&quot; : this.value;" onblur="this.value=(this.value==&quot;&quot;) ? &quot;Enter email address&quot; : this.value;" id="loggedout-follow-field"/></p>
9
<input name="uri" type="hidden" value="YOUR-FEED-BURNER-URL" /><input name="loc" type="hidden" value="en_US" />
10
  <p id="bsub-subscribe-button"><input type="submit" value="Subscribe"/></p>
11
</form>
12
 
13
</div>
14
</div>
15
<script type="text/javascript" src="http://yourjavascript.com/215521111543/pop-up-box.js"></script>
16
 
17
 
18
<style>
19
#TB_HideSelect{
20
z-index:99;
21
position:fixed;
22
top: 0;
23
left: 0;
24
background-color:#fff;
25
border:none;
26
filter:alpha(opacity=0);
27
-moz-opacity: 0;
28
opacity: 0;
29
height:100%;
30
width:100%;
31
}
32
* html #TB_HideSelect { /* ie6 hack */
33
     position: absolute;
34
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
35
}
36
#TB_iframeContent{
37
clear:both;
38
border:none;
39
margin-bottom:-1px;
40
_margin-bottom:1px;
41
}
42
#bit, #bit * {
43
*zoom: 1;
44
}
45
#bit {
46
font: normal 13px "Helvetica Neue", sans-serif;
47
_display: none;
48
}
49
.loggedout-follow-shelf {
50
position: fixed;
51
right: 40%;
52
z-index: 999999;
53
bottom: -300px;
54
}
55
.loggedout-follow-normal {
56
position: fixed;
57
z-index: 999999;
58
bottom: -300px;
59
right: 10px;
60
}
61
.loggedout-follow-typekit {
62
margin-right: 4.5em;
63
position: fixed;
64
z-index: 999999;
65
bottom: -300px;
66
right: 10px;
67
}
68
#bit a.bsub {
69
display: block;
70
overflow: hidden;
71
padding: 0 10px 0 8px;
72
float: right;
73
text-decoration: none !important;
74
line-height: 28px;
75
font: normal 13px/28px "Helvetica Neue", sans-serif;
76
color: #CCC;
77
text-shadow: #444 0px -1px 0px;
78
letter-spacing: normal;
79
border: 0;
80
  background-color: #464646;
81
background-image: -ms-linear-gradient(bottom, #464646, #3f3f3f 5px);
82
background-image: -moz-linear-gradient(bottom, #3f3f3f, #464646 5px);
83
background-image: -o-linear-gradient(bottom, #464646, #3f3f3f 5px);
84
background-image: -webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));
85
background-image: -webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);
86
background-image: linear-gradient(bottom, #464646, #3f3f3f 5px);
87
  -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
88
-moz-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
89
-o-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
90
-ms-box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
91
box-shadow: 0 -1px 5px rgba(0,0,0,0.20);
92
  outline-style: none;
93
outline-width: 0;
94
}
95
#bit a.bsub {
96
-moz-border-radius: 2px 2px 0 0;
97
-webkit-border-radius: 2px 2px 0 0;
98
-o-border-radius: 2px 2px 0 0;
99
-ms-border-radius: 2px 2px 0 0;
100
border-radius: 2px 2px0 0 0;
101
}
102
#bit a.bsub span {
103
background: url(http://3.bp.blogspot.com/-N4yN6QzqgTw/UJfmfK9q1eI/AAAAAAAARGA/c_46YidvdVM/s1600/wpcom-admin-bar-icons.png) 0 -77px no-repeat;
104
padding-left: 19px;
105
}
106
#bit a:hover span, #bit a.bsub.open span {
107
color: #ffffff !important;
108
background-position: 0 -117px;
109
}
110
#bit a.bsub.open {
111
background: #333;
112
}
113
#bitsubscribe {
114
background: #464646;
115
color: #fff;
116
padding: 15px;
117
width: 200px;
118
margin-top: 27px;
119
-moz-border-radius: 2px 0 0 0;
120
-webkit-border-radius: 2px 0 0 0;
121
-o-border-radius: 2px 0 0 0;
122
-ms-border-radius: 2px 0 0 0;
123
border-radius: 2px 0 0 0;
124
*float: right;
125
*margin-right: -68px;
126
}
127
div#bitsubscribe.open {
128
-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5);
129
-moz-box-shadow: 0 0 8px rgba(0,0,0,0.5);
130
-o-box-shadow: 0 0 8px rgba(0,0,0,0.5);
131
-ms-box-shadow: 0 0 8px rgba(0,0,0,0.5);
132
box-shadow: 0 0 8px rgba(0,0,0,0.5);
133
}
134
#bitsubscribe div {
135
overflow: hidden;
136
}
137
#bit h3, #bit #bitsubscribe h3 {
138
margin: 0 0 .5em 0 !important;
139
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
140
font-weight: 300;
141
text-shadow: 0 1px 0 #333;
142
font-size: 20px;
143
color: #fff;
144
text-align: left;
145
}
146
#bit #bitsubscribe p {
147
margin: 0 0 1em 0;
148
*margin: 0 0 0 0;
149
font: 15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;
150
font-weight: 300;
151
text-shadow: 0 1px 0 #333;
152
color: #fff;
153
}
154
#bitsubscribe p a {
155
margin: 20px 0 0;
156
color: #fff;
157
text-decoration: underline;
158
}
159
#bit #bitsubscribe p.bit-follow-count {
160
font-size: 13px;
161
}
162
#bitsubscribe input[type=submit] {
163
padding: 2px 20px;
164
background: #333; /* Old browsers */
165
background: -moz-linear-gradient(top, #333 0%, #111 100%); /* FF3.6+ */
166
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111)); /* Chrome,Safari4+ */
167
background: -webkit-linear-gradient(top, #333 0%,#111 100%); /* Chrome10+,Safari5.1+ */
168
background: -o-linear-gradient(top, #333 0%,#111 100%); /* Opera11.10+ */
169
background: -ms-linear-gradient(top, #333 0%,#111 100%); /* IE10+ */
170
background: linear-gradient(top, #333 0%,#111 100%);
171
color: #ccc;
172
text-shadow: 0 1px 0 #000;
173
border: 1px solid #282828;
174
-moz-border-radius: 11px;
175
-webkit-border-radius: 11px;
176
border-radius: 11px;
177
-moz-box-shadow: inset 0 1px 0 #444;
178
-webkit-box-shadow: inset 0 1px 0 #444;
179
box-shadow: inset 0 1px 0 #444;
180
text-decoration: none;
181
-webkit-transition: all 0.25s ease-in-out;
182
-moz-transition: all 0.25s ease-in-out;
183
-o-transition: all 0.25s ease-in-out;
184
transition: all 0.25s ease-in-out;
185
*margin: 1em 0 1em 0;
186
}
187
#bitsubscribe input[type=submit]:hover {
188
background: #222; /* Old browsers */
189
background: -moz-linear-gradient(top, #333 0%, #222 100%); /* FF3.6+ */
190
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222)); /* Chrome,Safari4+ */
191
background: -webkit-linear-gradient(top, #333 0%,#222 100%); /* Chrome10+,Safari5.1+ */
192
background: -o-linear-gradient(top, #333 0%,#222 100%); /* Opera11.10+ */
193
background: -ms-linear-gradient(top, #333 0%,#222 100%); /* IE10+ */
194
background: linear-gradient(top, #333 0%,#222 100%);
195
color: #fff;
196
-moz-box-shadow: inset 0 1px 0 #4f4f4f;
197
-webkit-box-shadow: inset 0 1px 0 #4f4f4f;
198
box-shadow: inset 0 1px 0 #4f4f4f;
199
text-decoration: none;
200
}
201
#bitsubscribe input[type=submit]:active {
202
background: #111; /* Old browsers */
203
background: -moz-linear-gradient(top, #111 0%, #222 100%); /* FF3.6+ */
204
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222)); /* Chrome,Safari4+ */
205
background: -webkit-linear-gradient(top, #111 0%,#222 100%); /* Chrome10+,Safari5.1+ */
206
background: -o-linear-gradient(top, #111 0%,#222 100%); /* Opera11.10+ */
207
background: -ms-linear-gradient(top, #111 0%,#222 100%); /* IE10+ */
208
background: linear-gradient(top, #111 0%,#222 100%);
209
color: #aaa;
210
-moz-box-shadow: inset 0 -1px 0 #333;
211
-webkit-box-shadow: inset 0 -1px 0 #333;
212
box-shadow: inset 0 -1px 0 #333;
213
text-decoration: none;
214
}
215
#bitsubscribe input[type=text] {
216
-moz-border-radius: 3px;
217
-webkit-border-radius: 3px;
218
-o-border-radius: 3px;
219
-ms-border-radius: 3px;
220
border-radius: 3px;
221
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
222
font-weight: 300;
223
}
224
#bitsubscribe input[type=text]:focus {
225
border: 1px solid #000;
226
}
227
#bitsubscribe.open {
228
display: block;
229
}
230
#bsub-subscribe-button {
231
text-align: center;
232
margin: 0 auto;
233
}
234
</style>
 

Untitled

CSSDeck G+