free Registration box for blogger

If you are looking 'how to put a any form in a blogger' then this post is going to help you. Putting a form in blogger is very easy. All you need to do just create a new post and put aform code (Provided by following sites below)in body section of your post and publish it. That's it.

There are various sites across the web which offers free forms to use for Blogger & Websites. Here I am going to share top 10 sites which offers free forms for Blogger & Websites with embedded code.

1. Google Docs

Google Docs provide embedded code forms for your blog or website. Just login todocs.google.com and click on the New > From Template > Forms. Choose form of your choice and copy embedded code. Follow steps mentioned below:





2. FormSmarts

FormSmarts is an integrated web form service that lets you create forms, publish them online, and get form results. Add a web form to your site or blog, or let visitors access your form from MySpace®, Facebook®, and anywhere you can post a link.



3. Kontactr

Kontactr is a one-click free contact form service. With Kontactr, you can fight against the amount of spam that you receive daily. Protect your email address by using our highly secure contact form. You can also use our simple tools to embed the form right into your own website.



4. Wufoo

Wufoo offers easy, copy/paste solutions for integrating a Wufoo form into a web page. For advanced users, full CSS and XHTML markup is also included. To simplify the process even further, the intuitive Wufoo theme manager allows you to customize the look of your form with a few clicks of the mouse so that your form seamlessly matches the look of your site.



5. ZOHO

Zoho Creator provides you with an easy drag-and-drop html form builder to build html forms online. Zoho Creator also makes it easy to embed HTML Forms in your website through simple copy/paste. Once you have collected data through HTML Forms, you can manage and edit the collected data online and share the data with others



6. My Contact Form

It is now easier than ever to keep in touch with your site's visitors. The arduous task of creating contact forms, email forms, feedback forms, questionnaires, surveys, order forms, polls, or any other type of web form is a thing of the past!



7. Free Contact Form

Script provided by this site works for a wide variety of website forms, not just contact us forms. These scripts are sometimes refered to as the following: contact form, website contact form, email form, PHP contact form, Javascript contact form, form to email, form 2 email, form2email, form generator, form builder, form maker, automatic contact form or contact form script.



8. FormSpring

FormSpring gives businesses and organizations an easy way to build any type of online form, integrate it with their website and begin collecting data. Once you have started collecting that data you can use the information you gathered in our online database or export it. With FormSpring anyone can build all types of web forms, collect data online and do it simply and efficiently.



9. Web Form Designer

WebFormDesigner can automatically validate your user's input - ensure the required fields are properly complete, and check that a valid email is input. Restrict input to alphanumeric, numerals only or just letters.



10. Kampyle

Customize the look and feel of your feedback forms to fit your website's, as well as your business needs. Create multiple feedback forms for different locations of your website with the relevant questions for each page.



Do you have any suggestions? Leave your comment.

How to add the Recent Posts Widget for Blogger?

The Recent Posts Widget for blogger displays recent post titles and their summaries in your sidebar. You can customize this widget to display the recent posts of any blogger blog that you like. You can customize the number of posts to display, whether or not to display a post summary and even set the size of this summary(in number of characters).

For Further enhancements, you can add your own CSS styling and improve the look and feel of the widget,

How to add the Recent Posts Widget for Blogger?

Before adding the Widget just take a look at the Widget Settings

1. Blog URL - This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs.
2. Number of  Posts –  The number of posts to be displayed in the Widget
3. Show post date – If you want to show the date on which the post was made, then tick this option
4. Show summary– If you want to show  an excerpt of the post in the widget then tick this option
5. Summary  Size – This is basically the excerpt size. Anything more than this would be chopped off.

Now that you know about the settings, just click on the below button to add the recent posts widget to  your blog

The Widget will be added to your blog and you will be taken to the Page Elements Page.

You can drag the widget to the appropriate position and save the layout

The coding of the recent posts widget for blogger was developed by Beautiful Beta andHackospere. A Great Thank You goes to Ramani and Hans for making this awesome widget.

If you have any questions or suggestions please feel free to comment here

Email Subscription Box For Blogger

Email Subscription box let your blog readers to get your latest post updates directly to their mailbox.  All of us like to have a good template with matching design and widgets but Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.

For those who don't have a feed burner account first you need to setup your blog feed in Feedburner so, for that log in to http://feedburner.google.com/ with your Google Account.

Copy your blog feed URL and paste that url at feedburner.com

Now hit the "Next" button & it will take you to a page where you have to assign a"Title" & " Feed Address"(the Feed Address will be your FEEDBURNER-ID) to your feed.

Hit the "Next" button and you are done.

Now go to Publicize > Email Subscriptions and hit the “Active”  button.

select your platform as blogger and import the page element you are done.

Have thoughts about the post please say in comments.please subscribe the Blog

Featured Content Slider for Blogger Using jQuery

Blogger is not more a blogging platform for beginners, there are lot more can be made with a blogger / blogspot blogs. Featured content sliders are seen in many WordPress blogs and when coming to blogger it is certainly not much seen. Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs. Many thanks toWebdeveloperplus for making this code and I just tested and modified to work on blogger.

Step 1: Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after <head>

<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>

Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code

]]></b:skin>

Now the place the below code before ]]></b:skin>

#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq8Qqs90a80dmpvpnirt_Pma_gxpKeEtQlRHGzJaFgoupIM3MCR3AQEJQla73KTlgdM4ho3MbF9tkKp3lp4OJzBjkW3mChqwWTKyQcrTCN7iJBXztClV36pmI23kbjXvS-jcUrPXlA4U8/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

Step 3: This step involves the featured content structure. Search for the code
<div id='content-wrapper'> and place the below code just before 
<div id='content-wrapper'>

<div id='featured'>
     <ul class='ui-tabs-nav'>
         <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove &quot;showing post with label&quot; in Blogger</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
     </ul>
     <!-- First Content -->
     <div class='ui-tabs-panel' id='fragment-1' style=''>
        <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
         <h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
         <p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
         </div>
     </div>
     <!-- Second Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
         <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to remove &quot;showing post with label&quot; in Blogger</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
        </div>
    </div>
     <!-- Third Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
         <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>
     <!-- Fourth Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
         <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
         <div class='info'>
         <h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>  </div>

Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.

Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
$(&quot;#featured&quot;).hover(
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,0,true);
},
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,5000,true);
}
);
});
</script>

Step 5: This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo