Create a Cute Subscription Form

I have already shared many tutorials on RSS Subscription forms such as Subscription Email Form and Subscription Feed Widget and today we have yet another but extremely beautiful and easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe.

Live Demo

How To Add this Subscription Form To Blogger?

1. Go To Blogger > Design > Page Elements
2. Choose HTML JavaScript Widget
3. Paste the following code in it,

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgWoQkfVSoEczSyRUQ_dF3_kdqNfoV7e8SYoR_VzMPbA54KIboIyBDKXvpU2spS2PgUgbc5vXp-FjX0sDA-muGVq4TUghy21kyP_eLxmD5Tlok3UVj6-P1ZgHvdL2XYTPlswIxZ5gfL5O2/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;  
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Now make these changes,

• Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace TntByStc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.

Multi Column Footer Widget For Blogger –The Hot!

We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.

See the widget at the bottom of the following Demo blog,
Live Demo

How To Add the Multi Column Footer Widget To Blogger?

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,

1. Go To Blogger > Design > Edit HTML
2. Backup Your Template
3. Search for ]]></b:skin>
4. Just above ]]></b:skin> paste the code below,

/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

       5.    Now search for </body> and paste the following code just above </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

      6.   Save your template and you are done!
Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How to Customize the Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.

1.  In order to reduce or increase the overall width of the widget simply change width: 960px;
2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.
After you have added the fifth column then remember to change width: 23%; with width: 17%;
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

That’s it! Enjoy :D

Wishing you all a Happy New Year 2011 full of love, joy and just Happiness. Peace and blessings :)

Add a Customized Three Column Footer Widget In Blogger

You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.