1) Delivery Options – Through this you can set the time in which the Email delivery will be made. This option will be very handy, if you have more users from a particular geographic location. If your 50% + users are from US, then you can set the timing in such a way that, this will be the first thing they see on their morning.
2) Email Branding – This is the option where you can customize the way your email looks like. It’s very important that your email body resembles your blog.
3) Communication Preferences – Feedburner provides you with a standard confirm subscription email. This is the place where you would like to innovate and stand out from others. You can add your innovative marketing ideas to make sure that all who chose to subscribe actually does the same.
Feedburner also provides with a standard subscription widget, which you can place in your site, so that your readers can easily subscribe to your feeds. The standard widget looks quite boring and may not fit into the design of your site. Here I am attempting to improve on it so that we can make it a bit interesting.The feed burner code is
<form style="border:1px solid #ccc;padding:3px;text-align:center;"action="http://www.feedburner.com/fb/a/emailverify" method="post"target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXXXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=XXXXX" name="url"/><input type="hidden" value="Your Blog Name" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>
Let me break the code so that you can analyze easily. Before that let us save this as an HTML file. Open your Note pad and Type
<head></head><body>Place the code Here</body>
The first thing we can do is add a background colour to your email form by adding background: #cc0000; just after the text-align:center;" so that the code looks like <form style="border:1px solid #ccc;padding:5px;text-align:left;background: #cc0000; " chose a background colour that goes well with your layout. Next you can customize the width of text box by changing width:140px"according to your needs. Now you need to remove this line <p>Enter your email address:</p><input type="text" style="width:140px" name="email"/>
"onblur="if(this.value=='')this.value=this.defaultValue;"/>
<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>. Now the only factor which may look odd is the button, so next I am going to show how you can customize that. For that modify this code <input type="submit" value="Subscribe" /> to <input type="submit" value="Subscribe" class="funkybutton"/>.For this to work you have to add the following code in the head section : <style type="text/css">
.funkybutton { background-color: #000000; font-size: 80%;
font-weight: bold;color:#ffffff; }
</style>Your form will look like what shown below
background-color:#000000; value if you change it to #cc0000; then submit button color will be red. You also can add a different font on the button for that add font-family:Mistral; this code so that the modified code looks like
.funkybutton { background-color: #cc0000; font-size: 80%;font-family:Mistral; font-weight: bold;color:#ffffff; }
Now how to add this in you Blogger Blog? First add the above modified CSS code i.e
.funkybutton { background-color: #cc0000; font-size: 80%;font-family:Mistral; font-weight: bold;color:#ffffff; }
]]></b:skin></head> in your blog template (To see this click edit HTML option in blog layout option). The modified code will look like .funkybutton { background-color: #cc0000; font-size: 80%;font-family:Mistral; font-weight: bold;color:#ffffff; }
]]></b:skin>
</head>
NB: Do not add <style type="text/css">and </style>tags.Then Save the template and go to Page Layout option and add the modified form code at the place where you want by selecting add page element.
NB: Don’t add the body tags.
#cc0000; to background: url(URL_OF_Your_Image);
0 comments:
Post a Comment