How to Add Contact Form Widget to Blogger

How to Add Contact Form Widget to Blogger:

After long wait finally Google introduced a new Contact Form Widget on May 16th 2013, this contact form will fit into your blogger sidebar

Why should I add Contact Form widget to my blogger?

•   If you add contact form to your blogger, visitors can easily interact with blog owner
•  You no need to reveal your Email address to visitors
•   No need any 3rd party code 
•  You can easily integrate Contact Form in blogger 

This tutorial helps you to add Contact Form Widget to your Blogger

Step 1: Login to your blogger

             

Step 2: Go To the Layout of your blog

                     

Step 3: Click On add a Gadget                

Step 4:  One pop up window will open, Select More Gadgets options 

Step 5: Select Contact Form Widget

                       

Step 6:  Name it as Contact Form (You can give any name) and click on Save Button

                       

Now the Contact Form is added to your blogger sidebar, save your blog layout and click on view blog (or) Preview button to see your blog layout

                   

Contact Form contains 3 Fields

Name: Name of the person who is sending you a message

Email: Valid Email of the person who is sending you a message

Message:  Message that the person want to send you

After entering above 3 fields, if user interacts with Send button then message will send to blog owner inbox directly

Testing:

Open your blog fill the Contact Form

                        

Click on send button, then message will send to blog owner mail

Then Check your mail id

           

Open the mail, It contains the message and sender details 

                 

Done

Enjoy :)

Thank you for visiting how2doit.in, if you find any error in my post, please let me now in the comments  

Read more ...

How to Show HTML/CSS/Java Script codes in a separate box on blogger post

How to Show HTML/CSS/Java Script codes in a separate box on blogger post:

If you want to show your HTML or any other code in a separate box in blogger post you have to add some CSS code to your blog template

Step 1: Login to your blogger

Step 2: Go to Blog template 

             

Step 3: Click on Edit HTML

                       

Step 4: Search for ]]<>/b:skin>  code in your template

                      

Step 5: Copy the below source code and paste it before ]]<>/b:skin> 

.how2doit{
margin :10px;
padding :6px;
background : #efefef;;
height :100px;
border : 1px Solid #81F7D8
overflow:auto;
text-align:lefy;
}

       

Click on save template

6.  If you want to insert any code in your post always write your source code in between

 <div class="how2doit"> Source Code </div>

Ex:

Go to your post editor write bellow code

             

Publish your post and see the result

   

Done

Enjoy :)

Thank you for visiting how2doit.in, if you find any error in my post, please let me now in the comments 

Read more ...

How to show html code in blogger post

How to show html code in blogger post:

When you try to display the HTML, CSS, JavaScript or any other code in your blogger blog post, it will execute that code and it will display the result of that code, many of bloggers don't know how to display HTML or any other code in there blog even I faced lot of problem while posting HOW TO CREATE CATEGORIES IN BLOG Post in my blogger

This tutorial helps you to show HTML code in your blog post

There are many methods to show HTML code in blog post

Method 1:

It is very simple method, if you want show your HTML codes in blog post replace '<' symbol with '<' and '>' with '>', after replacing copy and paste that code in your blog post

Ex:

<ul>

<li><a href="/search/label/How To Blog">How To Blog</a>  </li>

<li><a href="/search/label/How%20to%20Make ">How To Cook</a>  </li>

</ul>

If you want to display above code in your post, replace all '<' with '<' and '>' with '>' as shown below                          

Copy and paste above code in your blog post 

Method 2:

By using http://www.simplebits.com/cgi-bin/simplecode.pl 

Click on above link

Enter the HTML code in Markup text box click on Process button 

                               

                                   

Copy and paste above code in your blogger , Publish your post

Done

Enjoy :)

Thank you for visiting how2doit.in, if you find any error in my post, please let me now in the comments 

Read more ...