Blogger Widget : Beautiful Subscribe Box

Good day and welcome to Dinding Coret! =]

As we know, subscribe information from website or blog is a great way so you can always get update. When you decide to subscribe a website, you will receive much of benefits:

Be the most Up-to-date person : You will get the newest information from the website or blog via RSS reader or email.
No server down! : If you don't subcribe you will have no access to a web when the server is down, but you will always have an access to read their article if you do subscribe.
Bookmarking : If you are a blogwalking type of person I'm sure that you have seen much kind of blog. When you meet a great blog, you can bookmark it by subscribe the blog and you can always go back and visit the blog easily.

To get a great number of subscriber, you cannot ignore the appearance of your subscribe box! Ya, you may say that it is not important to customize the subscribe box appearance, but may I say about "impression on first sight"? Your visitor enjoy reading your article, why don't you give them more?

This is the default form of email subscriber (if you use Feedburner service, you must be know).
I'm not saying that it is not effective email subscribtion form. Only from the default appearance, I can have a lot of subscriber, so I can't say this is bad! =]
You know your visitor wants more! So give them a beautiful email subscribtion form!

Beautiful Subscribtion Box

Example :

How to create Beautiful Subscribtion Box

The subscribtion box stand from two codes, CSS and HTML. If you like the box appear below your article you need to follow this tutorial or maybe you just want the box appear as Blogger Widget, then just click this button :

Add Subscribe box below article

Ok, here we go. Open your DESIGN tab, EDIT HTML. Check the "Expand Widget Templates" check box. Do not forget to download your template first before do any change!

First step : Add CSS code

Search for ]]></b:skin> tag, copy the code below before the ]]></b:skin> tag.

You can do any change for the CSS code =]

Next steps : Add HTML code

Search for <div class='post-body entry-content'>, it is up to you where you want the box appear. Copy and paste after <div class='post-body entry-content'> if you want appear below your article.

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p><h4>Get Notified When We Update !!!</h4></p>
<p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value='';" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>
<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7xtfnQtJurZpSp0wvipwIoA5hL8bazfAjdIIYwQDGphCgaoP9W3H-5Qyl51fY2bRt2UUvE-JA4XHnmGV94Hs3ah9Wx1N472Y4o8tSr-Bksc_BQrkLMOAWQj0U7AK8EDizNmctIg11CXW/s1600/delicious.png) center top no-repeat"></a><a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucyrJR1KuJhYfiOdDVz5lzaBPpv56ErWHsl-fY-pWeektS8-3i-3BM3jhEe5meOzeXbbYcmSVCy-OBEshjnCyiYv7QxWl30qyVVu2LdKhDWVQKXStguYVs05YUckH-7IoD7_h02HZxEOg/s1600/twitter.png) center top no-repeat"></a><a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWhje6AEUYzqaApyYJ2MygrlwJvhViu7t0ej_S1tJxOmNQJ4uO9RuPJLxIA-3piqZuECwbdStk6MRKnEh86yUjhJJdnigrG1me-_b1U6uVgcyUWGCQ4-XVd9A9bgZY5mhdgTweWSeq7ho/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii7VznIwt0fEa9XSQIXSPVNCaJC8fZ0EHF-WK4VkV93O4x7kQ6u742ioaLqATy-d7VlT0-4VJRdk0nVrwfj7ykTjaEcp0dORGFjm56e8y58v-25mD-8VoKA1r_iMzKpGcgZ_Efe85h3bfr/s1600/facebook.png) center top no-repeat"></a><a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwYyheyTen4YqNxKOrkdy8FMOkOAfa0_2jt3sOXInY3WXKAID-OKQEwO_aL_NkXpt8x4npMUkVpvjtZlq0ZiEL37jb0XyBQwBHwkhMKBvSjctu3iMkleGRuSNIDJzN1LgAuGTucYiSQGC/s1600/stumbleupon.png) center top no-repeat"></a><a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLupuvu5Iu9uX8AwCB54L-BMBfOFrJ2vJUcKynSdJLJdYyFhJZojmHhSDcAHbn6vUhl20h4Xq8gYVqiSfjkYTfz1Jb-uisqhBAMpTrg1GlDOQcQZZFWxeky_2_M8_-NyQj6u3qpdgkAJzL/s1600/rss.png) center top no-repeat"></a>
</div></p></form>

It is not done yet! =] There are something you need to change so it can works perfectly.
1. You can change the notification message "Get Notified When We Update !!!" to what ever you want.
2. Change the Feedburner ID into yours, if you do not have it register at feedburner.com

3. Change Social Bookmark ID into yours.

4. Change RSS ID into yours, you will get this ID when you've registered as feedburner (or other) users.

Now, save your works.. =]

Blogger Widget : Beautiful Subscribe Box

Beautiful Subscribtion Box

Get Notified When We Update !!!

How to create Beautiful Subscribtion Box

Add Subscribe box below article

First step : Add CSS code

Next steps : Add HTML code

Beautiful Subscribtion Box

Get Notified When We Update !!!

How to create Beautiful Subscribtion Box

Add Subscribe box below article

First step : Add CSS code

Next steps : Add HTML code

Get Updates!

DindingCoret Community

Blogging

Photoshop

Other

Blog Archieve

Newest Post