Tuesday, December 20, 2011

Create a Very Beautiful Subscription Box Below Your Post

1 komentar
Hai guys, now i will give you a tutorial how to create a Very Beautiful Subscription Box below your post. Feedburner is a great google stuff, that stuff can make you share some article on your blog to feedburner automatically, like podcast. It can increase your visitor too, and now i will give you a tutorial how to Create a very Beautiful And Simple Subscription Blog Below Your Post.

1. Login to blogger
2. Go to design - edit HTML - Expand Widget Template
3. Find </b:skin> code and paste this code below before </b:skin> code
/*stay connected*/
.stay-connected {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background: #ffffff;
margin: 3px 0 3px 0;
padding: 5px;
border: 1px solid #E6E6E6;
overflow: auto;
}
#stay-icons {
float: left;
margin: 0 5px 0 0;
padding: 2px;
}
/*end stay connected*/
.yahya-email{
background:url(http://cdn2.iconfinder.com/data/icons/functionsocial/Social_Email_RSS.png) no-repeat 0px 12px ;
width:250px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.yahya-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
margin:0px 0px 0px 5px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:12px sans-serif;
}
.yahya-emailsubmit:hover{
background:#81acc7;
}
4. Now lets find <p><data:post.body/></p> and paste this code after <p><data:post.body/></p>
<div class='yahya-email' style='margin-left:20px;'>
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogYahyagan&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Enter Your Email'/><input name='uri' type='hidden' value='BlogYahyagan'/><input name='loc' type='hidden' value='en_US'/><input class='yahya-emailsubmit' type='submit' value='Subscribe'/>
</br><a href="http://blogyahyagan.blogspot.com">Want this widget on your blog? Click Here</a>
</form>
</div></td></tr></tbody></table></div>
</b:if>

5. And last step is change the text that colored blue with your feed burner url.
6. Save your template.
7. And you can see how your Subscription box look like
Lets Create Very Beautiful And Simple Subscription Box
Source : http://blogyahyagan.blogspot.com
Inspired by : Spiceupryourblog

1 comment:

 
My photo
15 years old blogger from Indonesia. Yahya Ayyash. Born on 4th March 1996. Started blogging since 2011, part time blogger. Just an amateur web designer, graphic designer and blogger. Student at SMAN 9 Bandung, at Ten Three Class. Please follow my twitter and like my facebook fan page.