Thursday, September 12, 2013
Separate Contact page in Blogger
Well we discussed about how to "create a blogger contact form". In this tutorial I want to discuss on How to create a page where the contact form will be placed. In the earlier tutorial we came across the points to create a blogger contact form but to have a professional feel we should have it on a separate page. However no need to worry about that because I have came up with a trick to add a contact form on a separate page that we see on other blogs such as wordpress.
Why should I use a contact form on separate page?
When you are using a contact form that is released by Blogger, it normally appears as other widgets on every page. This gives your blog an odd look. To make your contact form professional lets have it on a separate page. That is what I want to bring it to you in this tutorial.You may like to read:
How to earn money with your facebook pages?
How to Trace details of unknown number
How to add facebook like button below blogger posts?
Best practices to write titles for Search Engine Optimization(SEO)
Great tips to reduce loading time of your blog to increase more readers
Idiotic and funny ways you never know to promote your blog
How to earn money from blogs?
Add floating widget to your blogger blog
Get more viewers to your blog using facebook fan page
How to add contact form on a separate page?
1. First you need to login to your blogger dashboard.2. You should have already added a Blogger Contact form, if you don't know how to add it please read this article
3. After adding the contact form widget to your blogger you need to create a new page as shown in the figure below.
Step a) Navigate to Pages in your blogger dashboard.
Step b) Now click on New Page.
Step c) Select Blank Page.
4. Copy the code below and paste it in the page editor.
<form name='contact-form'> <div>Your Name : </div> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <div>Your Email: <em>(required)</em></div> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <div>Your Message: <em>(required)</em></div> <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/> <div style='text-align: center; max-width: 450px; width: 100%'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div> </form>
Note: Switch to HTML while pasting the below code into the page editor as shown below.
5. Disable the comments for the page by selecting "Don't allow, hide existing"
6. Now publish it.
7. Now navigate to Template > Edit HTML.
8. Click Jump to widget and select ContactForm widget from there.
9. Click the arrow mark to expand the widget. Then expand <b:includable id='main'> by other arrow mark beside it.
You can see the below code. Delete it.
<b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>
Now replace the above code with the below piece of code.
<b:widget id='ContactForm1' locked='false' title='Contact Me' type='ContactForm'> <b:includable id='main'> <b:include name='quickedit'/> </b:includable> </b:widget>
If you still have anything to ask please comment below.
Labels: Blogger Plugins, blogger tips
Wednesday, September 11, 2013
How to add Contact Form Widget to blogger Official Plugin
At last Blogger has came with a contact form widget. When our readers want to contact us it seems to be difficult without a contact form on blogger blog. But now blogger has introduced a widget to add a contact form on our blogger sidebar. However you can also customize the contact form. Don't you think it got easy to your readers with this widget. Here I have explained you how to add it to your blogger blog.Why Blogger Contact Form:
Most of blogger blogs commonly have a page where the user has to contact the author through mail id. In this traditional blogger contact page the have to reveal his mail id to his users and the users have to contact through the mail. Some bloggers also use third party contact forms on their blogs. But with this new blogger widget the user can easily contact the author through a simple form where he can enter his name, mail id and message.More importantly if you need any help, suggestions, feedback from your readers then you need to have a contact form on your blog.
How to add contact form to blogger?
Here are simple steps to add a contact form to your blogger blog.1. First Login to your Blogger Dashboard and go to the Layout page.
2. On the sidebar, click on the Add Gadget link.
3. As shown in the below picture click on More Gadgets and select Contact Form on the Right Side.
4. You can give any title such as Contact Me in the Title box and click save.
That's all your contact form is ready on your sidebar now.
Just view your blog and you can see the contact form as shown in the below image.
The contact form consists of name, email and message fields.
When a user sends any message through this contact form you will receive it directly into your mail inbox and you can directly reply to that message from your mail. Remember that the copy of message will be sent to each of the admins of your blog.
Error messages will be displayed when a user leaves the fields with star mark as the form is validated with javascript. This form doesn't have any captcha, however it is less likely to be attacked by bots.
I will post an article on changing the look of the contact form with simple CSS.
Now you can also create a separate contact page for blogger.
Please let me know your queries in the comments below. Thank you. Share it with your friends and do us a favour. Labels: Blogger Plugins, blogger tips
Thursday, September 5, 2013
SEO Title Tag Best Practices
Hi friends, today in the web world it is very competitive to get good ranking on google. We have already discussed on optimizing the title tags for SEO before. If you haven't read that post you can read it here.
Title tag is an important SEO practice to optimize your site for search engines. Search engines mostly rely on the title tags to crawl, because title contains the lines which tells us what the page is about. It is very important to write the best titles for our posts. You need to be careful while writing a title for a page to get good rankings on google.
Title is a name of a page or document written between <title> and </title> tags in the head tag.
How to format Title tags?
The main thing you have to keep in your mind is using the best keywords. Yes I already told If content is the king then keyword is queen. So the best practice to achieve good ranking always lies here. So you have to choose the best keywords for your title to describe your post within 70 characters. Google detects only the first 70 characters and it leaves the remaining characters in your title. So I recommend you to use your website's brand name at the end of your title. I feel it is also better when you cut the tail(your brand or website name from your title) when your website name dilutes your title. If your brand is famous then you can place your brand name in the front. Keep in mind that google detects the keywords of your title from left to right so put your primary keywords (which are most important.) at the left side that is towards the front.How to choose best title for SEO?
I already discussed about this before and repeating it now. Use best suitable keywords in your title which can be easily identified by google. When it comes to keywords to choose for any title I think it's somewhat difficult to do. But experts can do it, because it's an art for them. So try using the best keywords for your titles.I recommend you to use and, or, if, but, then, etc in your keywords. It is unnecessary because only first 70 characters are read by google and these words occupy the space which can be used by some other important keywords.
Tips to write best titles:
- Don't repeat same title name for different posts on your blogs or sites. This may harm your rankings because of duplicate content.
- When your post targets only a specific geographic location then please remember to put it in your title.
- Don't use same keyword more than a single time in your title.
Please comment below if you have anything to share or ask your query. Thank you. Labels: blogger tips, SEO
Subscribe to:
Posts (Atom)
0 comments: