Random

Theme images by Storman. Powered by Blogger.

Disqus Shortname

Slider No.

Recent Post Number

Fixed Menu (yes/no)

Related Post Number

Multimedia Updates

Widget Label Posts No.

Related Posts No.

PageNavi Results No.

Ads Inside Post

Comments system

Ticker No.

Blog Archive

Blog Archive

Subscribe

Subscribe

Awesome Video

Recent Posts

Most Popular

Recent Posts

Boxed Style (yes/no)

SLIDE1

Titulo

About me

www.CodeNirvana.in

Join this site

Translate

Recent

Number of Posts

About Us

Random Post Number

Slider Display

Random

Video of the day

Pages

About Us

Carousel

Breaking News
Loading...

Popular Posts

Thursday 23 June 2016

Hover Style Email Subscription Box for Blogger Blog

Email subscription box/widget allows your readers to get latest updates from you directly to their inbox. In this post I would like to speak about how to add a stylish Email Subscription Box with a attractive hover effect to your blogger blog/website. It also includes 5 social bookmarking sites. Its originally shared by My Blogger Tricks with more features and I re-shared in my blog. So lets check out how to add this widget to your blog/website.



Before we adding this Email Subscription Box, please take look at the demo image screenshot shown below which I have taken from my demo blog and  get an idea of what we are going to make here (ie,Your Email Subscription Box seems as below widget).


beautiful email bubscrition box

add this icon png Add this Email Subscription Form to your blog/website
Here I wanna give you two methods of adding this subscription box to your blog/website. The first method is One Click Installer. You may just click on the below ▼ image and it will automatically add to your blog.



The second method is adding this subscribtion form to your blog/website manually. Let me tell you how to do do this. So please follow below steps carefully.

  • Go to Blogger Dashboard >Layout
  • Click on Add a Gadget
  • Copy & paste the below ▼ code in it (leave title column blank)

?
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
<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=labstrike&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='labstrike' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='TWITTER URL' rel='nofollow' target='_blank'
<a href='GOOGLE+ URL' rel='nofollow' target='_blank'
<a href='PINTEREST URL' rel='nofollow' target='_blank'
<a href='RSS URL' rel='nofollow' target='_blank'
</div>
</div>

Please Note: Before saving your Gadget please do change labstrike (line no: 76 & 78) with your RSS Feed ID and all highlighted Social Bookmarking link URLs (line no: 88,89,91,93 & 95) with Your own Profile URLs.

You may also like -

Hope you like this article. As I mentioned in above its all credit goes to My Blogger Tricks. If you have any problem while you installing it, just feel free to ask via comment. Happy blogging:)

Show Comments: OR
0 on: "Hover Style Email Subscription Box for Blogger Blog "