How To Add Blogger Contact Form Into A Page 2014

You can also add Blogger contact form into a page of your Blogger website. It will work absolutely fine and it will not break anything. Let me show you how:

Note: In order to add contact form to a page, you first need to add the contact form widget to the sidebar of your Blogger.
Hiding Contact Form From Your Sidebar

First, we need to hide the default contact form from your Blogger’s sidebar widget. Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above ]]></b:skin>:

#ContactForm1
{
display: none ! important;
}

Save your template.

Add Contact form widget on a Static Page

Now we’re going to add the contact form widget to a stand-alone page. Follow below steps and make customization in the bottom of the steps.

1: Click on ‘Pages’ tab on the left hand side.
2: Now click on New page >> Blank page.

3: Switch to HTML mode and click on ‘options’ tab on the right side. Then select the “Use <br> tag” option in the Line Breaks section like below.

4: Now paste below code on the empty Edit HTML field.

<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; 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>

Customization

• Change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
• Replace Required message instead of red color star symbols(*)( i.e: (required) )
• Change Send with wished text to be shown on Submit button. 

5: Last Save your static page.

Read More

Replace Newer,older and Home navigation Links with Image in Blogger 2014

Replace the newer, older and home navigation links on your blogger blog with an beautiful image and catch the eyes of viewers, As Blogger's default Older, newer and Home navigation links are not so creative, almost all the Bloggers are using images for post navigation in their Blog. To do so you should first prepare 3 images with Good Creativity because this is a one time process and their is no need of altering it in future. If you wish to change it, you can as usual change it at any time. I hope you are ready with your images and now lets step into the coding part. In this tutorial i am going to explain simple steps on how to replace these navigation links(which is at the bottom of each posts) with an image of your own.

Replace Blogger Navigation Links with customized Images
1. Go to your Blogger dashboard --> Design-->Edit HTML(Tick the expand widget option).

2. Find(CTRL+F) The Below code.

NOTE:
You may get two codes with same name, so watch the changes after replacing a particular code
<data:olderpagetitle>

Replace it with the below code.
<img src="YOUR IMAGE URL FOR VIEWING YOUR NEXT POST" />

3. Now Find the below code.
<data:newerpagetitle>

Replace it with the below code.
<img src="YOUR IMAGE URL FOR VIEWING YOUR PREVIOUS POST" />

4. Now Find the below code.
<data:homemsg>

Replace it with the below code.
<img src="YOUR IMAGE URL FOR VIEWING YOUR HOME PAGE" />

Read More

Domain Forwarding : Redirect Old Blog to New Blog Address 2014

Domain forwarding is one of the most important concept to be learnt in blogosphere. A time comes in every newbie blogger's life when we really wants to shift from a old blog address to new blog address. Closing the old blog and starting to blog with new address may not be a difficult task at all. But, what if your old blog is a pretty popular one with lots of regular visitors and so much of readership!!?. At such a moment, you will really have to take a small step before moving from your old blog to new blog address to avoid losing visitors of your old blog. The step to be taken here is named as nothing but domain forwarding.

Domain forwarding is nothing but redirecting your old blog to your new blog address thus allowing your blog visitors to get rid of your new blog address and stay updated with your new blog. So today i am going to guide you on how to add redirection meta tag to your old blog so that it takes your visitors to your new blog automatically thus keeping your blog readership safe and secure. Here is the simple and easy tutorial on it.

Domain Forwarding
Adding the Meta Redirection tag
1. Go to your Blogger dashboard --> Template --> Edit Html.

2. Find(Ctrl+F)  <head>  and paste the below code just below it.
<meta equiv="refresh" content="0;url=http://NEW_BLOG_URL"></meta>
3. Note:: If You are using a classic template, then paste the below lines.
<meta equiv="refresh" content="0;url=http://NEW_BLOG_URL">
4.Change The NEW_BLOG_URL with the Url Of Your new Blog.

5. Save The Template.

Conclusion
The very important point to be noted in this tutorial is, you must keep your old blog active and should not delete it. Once after the existing readers of your blog gets aware of your new blog address, you can then delete your old blog. Whenever a visitor visits your old blog address, the browser will automatically refresh and takes your blog visitor to your new blog address.

That's It Pals. . . . .. !!!!!!

Read More

Blogger Layout: Change Width of Header,Footer,any Section 2014

The structural blogger layout will be as shown above. Blogger layout is divided into 5 parts namely header, outer wrapper, main wrapper, sidebar wrapper and footer as shown in the figure above. To edit/modify the style of a part, you must first identify the layout you want to modify and then modify the style code of that particular section. In this post, i am giving you the tutorial on modifying various sections in the blogger layout and the codes explained below may be of slight change with respect to your blogger template.

Let me consider that you identified the section you want to edit in your blogger layout. Let me illustrate the style codes of these 5 sections. Before going to modify the width of any section, you must be aware that - width can be declared in % form or in px(pixels) and if you specify the width in % form, then your blog will start displaying width depending on the Screen resolution of the pc the visitor is viewing from. As the main concept of this blog post is to guide you on editing the width of various sections of your blogger layout, i will be concentrating on only the width modification here. You can however learn basic Css and modify the style of any section as you wish.

Modifying the Width of Blogger Layout Elements
Go to your blogger dashboard --> Template --> Edit Html ( tick the expand widget template option).

To Change Width Of Outer Wrapper
Find This Code:
body{background:#111 url(); width:980px; color:#333;
font-size:12px; font-family:Arial,Tahoma,Verdana;
margin:0 auto 0; padding:0}

OR
#outer-wrapper{background:#111 url(); width:980px;
color:#333; font-size:12px; font-family:Arial,Tahoma,
Verdana; margin:0 auto 0; padding:0}

Change 980px to your desired width and you are done!!..

To Change Width Of Header::
Find This Code:
#header{background:#000 url(); width:960px; height:155px;
color:#fff; font-size:11px; margin:0; padding:0;
overflow:hidden; margin-top:-4px;}

Change 960px to your desired width and you are done!!..

To Change Width Of Sidebar Wrapper::
Find This Code::
#sidebar-wrapper{float:right; width:320px;
margin:0; padding:0 0 10px; display:inline}

Change 320px to your desired width and you are done!!..

To Change Width Of Footer Wrapper::
Find This Code::
#footer{width:660px; clear:both; margin:0 auto;
padding-top:15px; line-height:1.6em;  text-transform:uppercase; letter-spacing:.1em;  text-align:center}

Change 660px to your desired width and you are done!!..

Hint:-
If you are unaware of finding a particular code in your blogger template html. There is nothing to worry. Just press Ctrl and F buttons together and you will notice a search bar on your browser, enter the code to be searched in it and press enter.

Backup the Template before modifying!!!
Before doing any modifications in your template Html, make sure to backup your template i.e.,
go to your blogger dashboard --> Template, you will find the backup/restore option. Just click on it and download your template before doing modifications.

Read More