Friday, March 4, 2011

Beautiful subscribe box to blogger

1. Log in to blogger  and Go to Design >> Page Element

2.Click Add Gadget and select 'HTML/Javascript'

3. Paste below code

<style> 
.mbt-email{ 
background:url(http://icons.iconarchive.com/icons/custom-icon-design/pretty-office/48/message-already-read-icon.png) no-repeat 0px 12px ; 
width:300px; 
padding:10px 0 0 55px; 
float:left; 
font-size:1.4em; 
font-weight:bold; 
margin:0 0 10px 0; 
color:#686B6C; 
}
.mbt-emailsubmit{ 
background:#9B9895; 
cursor:pointer; 
color:#fff; 
border:none; 
padding:3px; 
text-shadow:0 -1px 1px rgba(0,0,0,0.25); 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
font:12px sans-serif; 
} 
.mbt-emailsubmit:hover{ 
background:#E98313; 
} 
.textarea{ 
padding:2px; 
margin:6px 2px 6px 2px; 
background:#f9f9f9; 
border:1px solid #ccc; 
resize:none; 
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;   
width:170px; 
color:#666;}
</style>
<div class="mbt-email"> 
Subscribe via Email 
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('Enter here your feedburner url', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address &quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter your email address " type="text" /> 
<input type="hidden" value="Bloggertrix" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input class="mbt-emailsubmit" value="Submit" type="submit" /> 
</form> 
</div>

4. Replace Enter email address here with your feedburner URL

5.Click save you are done.

3 comments:

  1. Nice.. But, i interest with your facebook and twitter button below your posting. Can you tell me how install that's?

    ReplyDelete
  2. I made a post about it just now check it.thanks friend.

    http://www.bloggertrix.com/2011/04/how-to-make-bubble-effect-for-blogger.html

    ReplyDelete