Tuesday, December 20, 2011

Let's Create Very Beautiful And Simple Subscription Box

4 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
Inspired by : http://www.spiceupyourblog.com
Lets see this awesome blogging tips Replace Post A Comment Text With A Cool Image On Blogger

4 komentar:

  1. Awesome! I follow your blog..Keep sharing Bro. :)

    ReplyDelete
  2. boleh dicoba neh. thanks for sharing, gan

    ReplyDelete
  3. naah, sekarang jauh lebih baik kk.... Blog Walking . . . ^_^

    ReplyDelete