Two RSS Subscription Box For Blogger

By HDWalle -
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>
<!--Begin Subscription-->
<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 == &quot;&quot;) {this.value = &quot;Enter your email address here&quot;;}" onfocus="if (this.value == &quot;Enter your email address here&quot;) {this.value = &quot;&quot;;}" 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>
<!--End Subscription-->

*  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 
Location: BN Reddy Rd, Sachivalaya Nagar, Vanasthalipuram, Hyderabad, Andhra Pradesh, India

Comments

Post a Comment

Popular posts from this blog

How to Tack India Adsense Check in Bluedart

By HDWalle -
Image
Here going give a tip for how to tack your google Adsense check in India - Bluedart, fallow the steps then you can tack your adsense check where it is. Login into your google adsense account and click on the finalized earnings Details>> Click on the Check Standard Delivery just below  view details in payment history>> link the you will find the details of your check and the payment number is your Ref.no but you have to remove the  first ' 0 ' number, see the image red marked number should removed.  
Read more

Post Your Images in Grid View in Blogger

By HDWalle -
Image
Post your images in grid view in blogger with simple html code. define how many images you want in a row two,three,four etc. the html code is Procedure Explaine d in Image Slide s For Two images in Rows code is : <TABLE> <TR> <TD> IMAGE CODE </TD> <TD> IMAGE CODE </TD> </TR> <TR> <TD> IMAGE CODE </TD> <TD> IMAGE CODE </TD> </TR> </TABLE> Image code look's like : "  <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9jBalDSmlC6mXidZzFApkEL5h_Op5otjCzQce1Qf-APDTk7qEPtorSRAEMcxTlyK7F0XE0Js492m-Bq_qEz0H7BSIp02uBK68GZjeTsRmb6Htfss1HWD1HafzKu8LlNlfZNB679Oc6Zw/s1600/25.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9jBalDSml...
Read more

How to Protect Document in MS-Word

By HDWalle -
Image
This is tip is important to protect your document from strangers, you can lock and upload and save in your e-mails or file database on the internet, after MS-office 2000 version they implemented this new feature in the latest versions. Here we are trying to explain you guys that's how to protect or Encrypt A document with the help of MS-Office Word text files, follow these steps Protect the document and be safe from Strangers. Step 1 : Open MS-Word Application in you Machine (P.C) - Double Click on the MS-Word icon or Click Start Button > Click on All Programs > Click on Microsoft Office Folder > and Click Mircosoft Office Word then the untitled blank document will be opened. See the images below for example :   Step 2 : Click on the Office button and click or place your pointer on the Prepare then a panel will be appearing in that you will find Encrypt Document option click on it.  Click on Office Button > Click or place your pointer ...
Read more