Two RSS Subscription Box For Blogger

Two RSS Subscription Box For Blogger

By HDWalle - November 23, 2012

Here there are two stylish subscription box are available for blogger i think you guys love these one try this and have fun.Sample Screenshots are shown in figure,how to install this subscription box into your blog or website

1. Figure Code :

<style>
.subsemail{
border:none;
margin-left:auto;
margin-right:auto;
background:url('http://2.bp.blogspot.com/-7tZmxXrR7p4/UJo2C8UnB9I/AAAAAAAAiyQ/0BMTld2IfjQ/s1600/blogsdaddy.com-subscribe-form.png') no-repeat top left;
width:300px;
height:250px;
}
.linkfacebook{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:24px;
cursor:pointer;
background:none;
border:none;
}
.linktwitter{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:88px;
cursor:pointer;
background:none;
border:none;
}
.linkgplus{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:152px;
cursor:pointer;
background:none;
border:none;
}
.linkrss{
position:absolute;
width:40px; height:40px;
margin-top:25px;
margin-left:215px;
cursor:pointer;
background:none;
border:none;
}
.substextarea{
position:absolute;
overflow:hidden;
border:none;
border-right:none;
width:206px; height:23px;
margin-top:177px;
margin-left:50px;
background:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#66666;
font-style:italic;
}
.subsemailsubmit{
position:absolute;
overflow:hidden;
cursor:pointer;
border:1px solid gray;
width:70px;
height:20px;
background:none;
border:none;
margin-top:210px;
margin-left:188px;
}
</style>

<div class="subsemail">
<form method="link" action="http://www.facebook.com/hdwalle" target="_blank">
<input class="linkfacebook" type="submit" value="" title="Join BlogsDaddy On Facebook" />
</form>
<form method="link" action="http://twitter.com/hdwalle" target="_blank">
<input class="linktwitter" type="submit" value="" title="Follow BlogsDaddy On Twitter" />
</form>
<form method="link" action="https://plus.google.com/u/0/b/104036847681554334414/104036847681554334414/posts" target="_blank">
<input class="linkgplus" type="submit" value="" title="Follow BlogsDaddy On Google Plus" />
</form>
<form method="link" action="http://feeds.feedburner.com/feedburner/QEnxR" target="_blank">
<input class="linkrss" type="submit" value="" title="BlogsDaddy RSS Feed" />
</form>
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedburner/QEnxR', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="substextarea" name="email" onblur="if (this.value == "") {this.value = "Enter your email address here";}" onfocus="if (this.value == "Enter your email address here") {this.value = "";}" value="Enter your email address here" type="text" />
<input class="subsemailsubmit" value="" type="submit" />
<input type="hidden" value="feedburner/QEnxR" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
</form>
</div>

* IN RED COLOR IS RSS FEED BURNER
* IN PURPLE COLOR IS GOOGLE PLUS
* IN GREEN COLOR IS TWITTER
* IN BLUE COLOR IS FACEBOOK

2 Figure Code :

<style>
.SocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 0px #BBBBBB solid;
}
#SocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#SocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#SocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#SocialButtons .facebook, .googleplus, .pinterest, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQRrZ_8XyitpROoecYxr_0XXxgPUlutbhsyxUp14RHTdgqpQ1oD6QpjXOm-m2sJvX29u6lLUpNlUgZ8ESlewmK-YCSuXnZN2vFeq3Nn55SvUfDDQaTI-bnLZB4ZA46Azsj4xLDu_-pok/s800/sprites.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#SocialButtons li:after{
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#F0F8FF;
content:attr(data-alt);
line-height:32px;
}
#SocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#SocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#SocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#SocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#SocialButtons .pinterest{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#SocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#SocialButtons li:hover .icon,
.touch #BD-SocialButtons li .icon{
width:210px;
}
.touch #SocialButtons li .facebook, #SocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #SocialButtons li .twitter, #SocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #SocialButtons li .googleplus, #SocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #SocialButtons li .Pinterest, #SocialButtons li:hover .pinterest{
background-color:rgba(174,45,39,1);
}
.touch #SocialButtons li .rss, #SocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class='SocialButtonsBorder'>
<ul id="BD-SocialButtons">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/hdwalle" target='_blank' rel='nofollow'>Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/hdwalle" target='_blank' rel='nofollow'>Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/b/104036847681554334414/104036847681554334414/posts" target='_blank' rel='nofollow'>Follow us on Google+</a></li>
<li data-alt="Follow us on YouTube"><a class="icon pinterest" href="https://pinterest.com/hdwalle/" target='_blank' rel='nofollow'>Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/feedburner/QEnxR/" target='_blank' rel='nofollow'>Subscribe with RSS</a></li>
</ul></div>

* IN RED COLOR RSS FEEDBURNER
* IN BROWN COLOR PINTEREST
* IN GREEN COLOR GOOGLE PLUS
* IN PURPLE COLOR TWITTER
* IN BLUE COLOR FACEBOOK

DEMOS

Comments