A Sunday Special - The Subscription Widget 4 You!

If the Princess of Passion gave us the challenge of poetry, I'll give you the challenge of my passion as well, don't say no:)

(Updated! - With Visual Aid or Illustration)

Well, tonight must be special, it's Sunday night... I talked to my B and after I put her into a tight sleep I start adding one helpful function at the top right corner of the comment box here. It's the subscription widget. Well, these days, we do not want to miss any post of our blogger friends... Is that true guys? We want that all of us here will experience the so-called productive blogging. I keep on writing because I know that you will be here. So despite of our busy schedule we managed to read one's blog, this time we will make it easier to both of us. SB is a community of bloggers, so let's make it at our convenience.

In my simple way I am glad to know that at first, Balqis and Princess Fiona appreciated the bold prints. Most of us can do this when we are writing our post, but don't you know we can do this too when writing our comments to give that so-called emphasis? Just envelope the words with the opening <b> and the closing </b>! So it may look like this, <b>My Sunday Special Post!</b>.

Yet so much for that, aside from the bold thing, and my sincere invitation for you to add your blog links to our New! SB Blog Directory, I have one humble present, the customized email subscription widget for your blog right here! I love this stuff and I want to share it here with you guys. I am not really into writing tutorial here, but I feel the need to give this to you. Anyway, have you put your subscription box or widget already at your blog? If not, this one is for you.

Go to your Blogger dashboard, open Design and select the add widget/gadget, choose HTML/Javascript and copy and paste the one I have for you below, but first you need to edit it... oh come on Prime, I forget asking you if you have the feedburner account already, but for now I'll assumed you have one, or if not please create yours here.

Kindly click the link provided to see the illustration below.
1. From Dashboard to Design
2. From Design to Add Gadget
3. From Add Gadget to HTML/Javascript

Here is the code... please copy them all, paste it at your new widget/gadget.

<style>
.sbbar12{width: 300px; float: right;padding:0 0 8px 0;}
.sbbar12 .emailsub1{border-bottom: 0px solid #e6e6e6; padding: 0 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.sbbar12 .emailsub1 .emailicon11{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR60I1ob5BFnAZfXlBOcMZ7idTloYRdP7Jqa_fB1L6p8MbFQl2NpCX_A5BpYzDHeS-BrasPznXQQz7lbTw2YKndxBUWkLXDnIANHEu5G36Xu3EuG06_CoioBDk2Q5aA62_BX8rGy8gg87I/s1600/sbemailsubsPURPLE.jpg) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 0; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
.sbbar12 .emailsub1 .emailupdatesform{margin: 5px 0 5px 5px; width: 300px; float: left;}
.sbbar12 .emailsub1 .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #347235 ; padding: 0px 8px 0px 8px; color: #000000; font-size: 12px; height: 25px; width: 185px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.sbbar12 .emailsub1 .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#347235 0%,#347235 100%); background:-webkit-gradient(linear,left top,left bottom,from(#347235),to(#347235)); border: 1px solid #347235; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

</style>

<!--[if IE 9]>
<style>
.sbbar12 .emailsub1 .emailupdatesform input.joinemailupdates{background:#347235; border: 1px solid #347235; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
</style>
<![endif]-->

<div class='sbbar12'>
<div class='emailsub1'>
<div class='emailicon11'><p style='width:270px;color:#000000;font-size:13px;font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;'>Replace with your message, at least two lines just like the one we have here!</p></div>
<div class='emailupdatesform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SimplifiedBlogging&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='emailupdatesinput' gtbfieldid='10' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email to subscribe...&apos;;}' onfocus='if (this.value == &apos;Enter your email to subscribe...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email to subscribe...'/><input name='uri' type='hidden' value='SimplifiedBlogging'/><input class='joinemailupdates' type='submit' value='Submit'/></form></div></div></div>

All you have to do is change some value, no, it's not what you think, it's simple guys.

1.- if your sidebar is a bit smaller, you need to change the number there from 300 to 250 and the like, I indicated all the numbers that are needed to be adjusted if it doesn't fit with the size of your sidebar... let's do some experiments.

2.- Put your message, at least two lines, or it depends to the size of your sidebar, if it looks nice then go with shorter one.

3.- The most important one, if you have the feedburner account, you can see this at your address, mine is http://feeds.feedburner.com/SimplifiedBlogging, yours will looks just the same except for your title or name, so please replace SimplifiedBlogging to your feedburner name. Remember, there are two SimplifiedBlogging in the codes, replace the two of them with yours.

4.- Save and drag it to the desired part of your sidebar where this customized subscription widget you want to appear. Good luck guys.

I challenge you all to do this, let's spice up the coming week with the pleasure of this experiment. You can make it for sure. Tell me all the troubles that might block your way in putting this email subscription widget, I will always extend my hand.

Goodluck guys.

Subscription Code Widget Credit: mybloggertricks.com
Image Credit: scottchan / FreeDigitalPhotos.net

Share it Please

Tweet

Prime Aque

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.