How to Create a Static Home Page in Blogger

When it comes to home pages, most websites can be divided into two: static and non-static. As their name implies, static home pages stay permanent no matter how many times the website is updated, while non-static home pages reflect the changes that are made to the site and <a href="http://helplogger.blogspot.com/2016/09/how-to-hide-posts-from-blogger-homepage.html">show the latest posts</a> first.<br/><br/>The latter has become well-known nowadays due to the rising popularity of personal and even corporate blogs. However, there are still many people who prefer static home pages because it makes their websites look more organized and professional. It also gives them more control over the readers' experience on their site and helps them create stronger brand awareness through the uniform message that their home page presents.<br/><br/>Fortunately, if you own a Blogger site and want to make your home page static, you'll find that creating one isn't as difficult as it seems. You can create a <b>static home page in Blogger</b> by taking these steps:<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="static pages in Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxPMwn7Hfs8gPIOHSBxOwZGM7tnNxlXG-AnLKxACSH5belzgo4B85OjwR0q90KDXS-1oRxnRIxY-OFqr1WpQ2ahkDcqmWCwcbYjDSBDAhUcp6je6UXkUA1T-lEQJS2e9Tu3Vk-MRa6CFTn/s1600/how-to-create-static-home-page-in-blogger.png" title="How to Create a Static Home Page in Blogger"/></div><br/><h3>1. Create your static home page</h3>The first thing you should do is to create a new page for your blog. This will serve as your static home page but, for now, it will look and act like any other page in your site.<br/><br/>To make this page, you'll need to go to the main menu of the Blogger dashboard and click on the "Pages" option on the left side on the screen. Doing this will lead you to the "All Pages" menu window. Here, click on the "New Page" button and you'll enter an editor that looks similar to the Blogger Post editor that you use when publishing a new blog post. <br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="static home page" border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RPJ4yOYo5x7jSspeuDerN0LI2BVkBeESvvuG9cK7BDycPzbAvbYOSPQ7YRZJxT1hALokMFRTzTF71mHDUhzfJfX1HyCP61ojYgS1JznHxeC-p2wrhlAvDS2Lil8VNe-0WHCFHnZsqrJE/s640/create-static-page-in-blogger.png" title="Adding a new static Blogger page" width="640"/></div><br/>At the top box, enter the title that you want for this page - in this case, let's call it the "Welcome" page. In the larger text box, type the content that you want to appear on your home page; this can be a paragraph, or two about yourself or your business and what your site is all about.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsETUs0mqjVb_MR_VAJsNUIVwUit331WcgMZ5UUFGzBL6FtbQHCOk3JHMdJtp_v4Q7_PJ_bJWSQAMGTewQs7AP72eJkqh9919k3kyEOGq51bpTgTPqh-9jK0LLazsxN9XA_TM0_nELi-e/s640/how-to-create-static-home-page-in-blogger.png" title="Publish a Static Blogger page" width="640"/></div><br/>Once you're done, click "Publish". The window will return to the main "All Pages" menu, and you'll see the new "Welcome" page you've created. Copy the URL of the "Welcome" page since you'll need it later on. To do this, right click on the 'View' link and select 'Copy Link Location' from the menu.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsbESldhqxNPW81nbM2lequH1_YsmXiVpy09Zs9psKFX9yVieNiOW85nO6Ta3xfQOSE39fZxb_e4ifjUYham_gsYyPHdWkv3g6oqCvVCtFUQGtnroLyp_ZirsGD3QgXqIBYD7z8OwuNgk/s640/static-home-page-for-blogger.png" title="View Static Home Page in Blogger" width="640"/></div><br/><br/><h3>2. Redirect the default home page to the static one</h3>Once your "Welcome" page is up, the next thing you should do is to <b>change Blogger's default homepage</b>. This involves redirecting from your site's original home page to the static homepage that you've created so it would be the first thing that people see when they visit your website.<br/><br/>Related: <a href="http://helplogger.blogspot.com/2014/07/how-to-set-custom-redirects-for-blogger-post.html">How to Set Custom Redirects in Blogger</a><br/><br/>To do this, you'll need to go to main Blogger editor menu, click on "Settings" on the left side of the screen, and choose "Search Preferences". Under the "Errors and redirections" section, you'll see the "Custom Redirects" option with an "Edit" link beside it. Click on the "Edit" link to open another window, where you'll see two boxes named "From" (with your blog's URL beside it) and "To".<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjD_19brS198xEnVn1qjNDrmEUUxgB4lZ8meYLW6L1sLotqsg9vsv0Ez6kumqTRWSPJbw6BOieSBH9KnPQ4q1IHGabRsLkFNHWT5QVYXF_rZCccJTcffDHtdBWkdHsQH1o2hzWGskXJk9x/s640/blogger-settings-custom-redirects.png" title="Redirect Blogger homepage to a custom page" width="640"/></div><br/>In the "From" box, enter only a forward slash symbol "/". In the "To" box, paste the URL that you copied earlier and add the latter part of the URL of the "Welcome" page. For instance, the page's URL of our demo blog is static-home-page.blogspot.com/welcome.html, so we'll remove the "http://static-home-page.blogspot.com" address and add only "/p/welcome.html" in the "To:" box. The "/p" signifies that it's a static page.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-O4yhZxwJGcn4TYjgSG3j1BkjuaZe9R5lzHiaEQmbXmxSYorV6W5ZhqhTS7y22cNS0gNoPOL2plCep3WQuypEDet6Qz8_a9CeFKhaDEfXCTK0zTajlK2nSWgzBtC4kOuzO45WNntwbzm/s640/custom-redirects-in-blogger-settings.png" title="Redirect Blogger homepage to static home page" width="640"/></div><br/>Next, check the little box beside "Permanent", click on the "Save" text link, and press the "Save changes" button. Doing these will redirect your site's main URL to its new static home page. Access your blog on a separate browser to see if it works.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xM6Gm5d5nLrRrsU8sStSZWsSdPLqquzK5L747xZmJlI6lyatww_pXtOBy5GHSoKv2leqb7dUfvg_9-ErKnnowi26-5GtaGAzCDKJf2nm_DitSn6zEJYbK1w5I0srciVo5y93s_scrNiW/s640/set-custom-redirect-blogger-home-page.png" title="Custom redirects in Blogger settings" width="640"/></div><br/><h3>3. Make tabs for your site</h3>If you're not planning to make tabs visible in your blog, you can stop at Step #2. But, if you want your site to have tabs that indicate the home page, the main blog page, and other pages you may have (such as the FAQs and Contact Us pages), you'll need to take another step.<br/><br/>Why is this important? Basically, when visible tabs are enabled in your site, they will show that you have two existing pages: the default home page and the new "Welcome" page you've created - both of which redirect to the same static page. This can be confusing for your readers and may even affect your search engine rankings.<br/><br/>To fix this, you first need to enable tabs by going to the "Layout" menu item and click on the "Add a Gadget" link. You can choose to add it below your blog header or sidebar. In many cases, it's advisable to add it below blog's header since they're more visible and give your website a sleek, professional look.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglRLUU4AVpX7-5dkuzsx4-SctzufFPe6pV0WeMoaYgjxX6P4aQx9d5DFoKq_mHey4Nsl9ln0WgoCaNPvdp1uCcrMRw9VL4_KufNgC3yxjcDUXyLETtLhL1BNJSKPHWWh8FaDzzk7ussS4V/s640/add-a-gadget-blogger-layout.png" title="Adding a gadget from Blogger's layout" width="640"/></div><br/>Once the pop-up window opens, scroll down and click on the 'Pages' link:<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR40RdcUKVRgN07iYKFfNVO36bss0QZH_clXovAlyUiLyrGsojfUN22NNhBAcg9dewgPRFSn7eby6VProf3aGFG6p4RhFdkTPaqG_ilLdQtnidjpTtwH5XeATRb4_GP501Im5oyqYBviIC/s400/add-static-pages-menu-to-blogger.png" title="Adding Pages gadget in Blogger" width="400"/></div><br/>This will open another window named "Configure Page List". Here, under the "Pages to show" section, you'll see the default home page and your new static homepage with small boxes beside them. Uncheck the box beside the default home page to hide it from view, check the pages that you want to display in the menu and then click on the "Save" button to save the changes.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKrC-Vz7PqLtQOir0dGhJNb_LF0JEaDoZI3rOk4kZi0zkcCCk4_VkjRduV0JX2LrdW_cZJgxuki6iJzuRQs1-5_XQCknYgh5nmdvDSfRdMXSfQhzrJ0IQuhMrgr9hHRCrMRVZU80XUbDP/s400/configure-page-list-in-blogger.png" title="Configure Page List in Blogger" width="370"/></div><br/>You can stop at this point but, if you want, you can also create a specific tab that will lead to your main blog post page. To do this, edit the "Pages" gadget that you just saved and click "+ Add external link".<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZmeg20Sb144tU0ILNzm4A5jRzoPYGdlCjShYt0VhRX_S5hgGK-T9XVM3S_2ED3Ot705jg2s3dSBmjcVwMe8mrkkOKWfE9-r69UifVLrN07KqXkifcig3fRDyh0vI-8tMi5MuS2Gmf67E/s640/add-external-link-blogger-page-list.png" title="Add external link in Blogger" width="640"/></div><br/>On the new window that would open, enter the title you'd like for the page (such as "Blog") along with <span style="color: blue;">/index.html</span> web address, then hit "Save Link" and click the "Save" button on the "Configure Page List" window. <br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2nWb4b-GKSVId3mLlzLNFEO6Dj2njZjIQ29Wp2AbDcTF4A39eguCepnNmgHLAHniWhrdsI3PPUnN03r1PpvraUnwDcxa4fTQAI_wJ2bVWtavAsWxCYm9M8hyphenhyphen2i3Rqk1fCLg1cIAoScO_/s400/add-new-static-page-in-blogger.png" title="Linking back to the Blogger blog posts" width="370"/></div><br/>Now, view your site and you will see the pages menu containing the "Welcome" page and "Blog" tabs. To see how this works, you can also visit our <a href="http://static-home-page.blogspot.com/p/welcome.html" rel="nofollow" target="_blank">demo blog</a>. Enjoy!<br/><br/><h4>Final Note</h4>Having a static home page can be beneficial for your blog. Follow the steps above now to <b><a href="http://helplogger.blogspot.com/2014/05/how-to-add-static-pages-to-blogger-blog.html">create a static home page in Blogger</a></b>!

How to Create a Static Home Page in Blogger

When it comes to home pages, most websites can be divided into two: static and non-static. As their name implies, static home pages stay per...

Read more »

How To Set Custom Redirects in Blogger

Over time, most blogs may go through many changes, like posts being added or deleted. In some occasions, you don't want people to <a href="http://helplogger.blogspot.com/2013/10/redirect-blogger-404-error-homepage.html">get 404 messages</a> when they navigate to posts or pages that don't exist on your blog and instead, make all requests to a specific link to be redirected to another page. One of the best way to avoid broken links and keep your traffic flowing in the right direction is setting custom redirects via the <b>Blogger Custom Redirects</b> tool.<br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBCorJqjKaaeGpY7ujIvB747EaKe7IrGkCWqUt3vhouaX1O6vylLFj2vg2y2I_BM9jgfkBArZshzw0JhubmJUe9DwHRmpKY0R5FDWvk6K9uEjBv9N_Nu-nL325Ks9YXh-XJMNgnh4A0SP/s1600/blogger-custom-redirects-redirect-old-url-to-new-url.png" /></div>This tutorial will show you how to set custom redirects for Blogger posts and redirect an old URL to a new URL. But before redirecting any URL, you must know that there are two types of redirects: <ul><li>A <b>302 redirect</b> means that the page <b>has moved temporarily</b>. This redirect doesn't pass the URL value to the new location and instead, it will take the visitors to an appropriate location so that you aren't showing them a 404 page not found, or an error page. You can use a 302 redirect for coming soon pages or maintenance pages.</li><li>A <b>301 redirect</b> means that a page <b>has moved permanently</b> to a new location. Use the 301 redirect when you deleted or changed the URL of your post. In most instances, the 301 redirects are always recommended for SEO because they will pass link juice (ranking power) to the redirected page and visitors will also benefit from this. However, 301s aren't suitable when you change your custom-domain, because it only supports redirection within the same blog, not to an external URL.</li></ul>Now that we've established which is which, let's see how to set custom redirects for Blogger posts.<br /><br /><h3>How to redirect old URL to new URL in Blogger</h3>Step 1. Login to you Blogger account with email and password.<br /><br />Step 2. Click on your blog > go to Settings \ Search Preferences and click "Edit" next to "Custom Redirects."<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="search preferences, custom redirects, 301, 302 redirect" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtCDiXXrOIUkIfMGCnG3GHk2ZMdzb4jrx5VckmGyPD5dZdvtUh1GLhd1kcHEKjeXzefXubmRNl3AWkJrnWf3OP2XrluDp_D_cunHe_hUAUszp-axn2ipx5RKxWO0WbSZrYd-Ryq1xu-tl/s1600/search-preferences-custom-redirects-301-permanently-302-temporary-blogger.png" title="How To Set Custom Redirects for Blogger Post" width="600" /></div><br />Step 3. Enter the old URL in the "From" field, and the new URL in the "To" field including the forward slash "/" (see the screenshot below)<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="custom redirects, redirect old url to new url" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhku-rBsJ-6obkNsVzYh7rvsNk7HyRMgoT8KaySNIrpF-VFZLM4u-qiBnUD_xV5AAQr8QK8uB35HUxoCZhdHcMyL3860U1zuSbUx3bfhyr0SVOKknTYNBGeoQ7YeS-VvjG8Tdh96ZIHFhl/s1600/custom-redirects-blogger-old-url-new-url.png" title="How To Set Custom Redirects in Blogger" width="600" /></div><br />Note: Do not enter the full URL in these fields. Just omit the address of your blog and type only the rest of the link. Again, this works only if you wish to redirect within your blogger blog and not to any external links.<br /><br />Step 4. Click the "Save" link (1) and the "Save changes" button (2), and you're done!<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger custom redirects" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN4bcGV_27rp1lzdxkSdwb2wjs0WaSsAG9G0I9k0I4oMQJsPlQkVj8sBLaKnuXEJQ7sCP2Wgm-guwHR3MRofWaBO9mNEx3zgtdC76fi4b70Ci77z1j_7GRhPHVavEkmQPH8Lhu-XcEtFd/s1600/custom-redirects-to-from-permanent-blogger-deleted-new-page.png" title="How To Set Custom Redirects in Blogger" width="600" /></div><div class="separator" style="clear: both; text-align: center;"><img alt="blogger custom redirect" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxh2FMOAJYbEjwtO1CEp-lylAhoVrV3jr0FVzRzStnZXsEVVkGhnTKhWlu1c0RALfwfa34iyVYeE6gGpid5P5eWN5KX8h8DA2uW6Sqb-Cjae66-fgrdUVvMZpDQOBsl3p2jkWeK36LyanI/s1600/custom-redirects-to-from-permanent-blogger-save-changes.png" title="How To Set Custom Redirects in Blogger" width="600" /></div><br />If you want to redirect more pages, just click the "New redirect" button. Also, you can check out this tutorial to learn <a href="http://helplogger.blogspot.com/2016/10/how-to-create-static-home-page-in-blogger.html">how to create a static homepage in Blogger</a> using <b>custom redirects</b>.

How To Set Custom Redirects in Blogger

Over time, most blogs may go through many changes, like posts being added or deleted. In some occasions, you don't want people to get 40...

Read more »

How to add Static Pages to a Blogger Blog (UPDATED)

A few months ago, Blogger has completely redesigned the section of the Pages, which now, looks very similar to that of the Blogger Posts. Now we will be able to manage the pages with more flexibility. For example, we can publish, delete or change many of them to draft at the same time - which has just the same function as the old <b>Don't show</b> option.<br /><br />Related: <a href="http://helplogger.blogspot.com/2016/10/how-to-create-static-home-page-in-blogger.html">How to Create a Static Home Page in Blogger</a><br /><br />Among the options that we can find by hovering over a page and which we can see in the screenshot below are: <ul><li><b>Edit</b>: To access the editing panel and to edit its contents.</li><li><b>View</b>: Open a new tab with the actual page.</li><li><b>Share</b>: Share it on Google+ (which was not possible before).</li><li><b>Delete</b>: remove a page.</li></ul><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="add static pages on blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPocwGjUBxj_f-QJ9KlxSyjupHZO2-guFgTmmaUOQGwR8OzGn9JRTDc2kHDgvQzwFHVaGEwKVoItIZcdYqazMDSwvjdtTCU97DDU-HhviBM05KHi-y98Y8q1jn9fra5a2NboqS30IGwLf/s1600/how-to-add-static-pages-to-blogger-blog.png" title="How to add Static Pages to a Blogger Blog (UPDATED)" /></div><div class="separator" style="clear: both; text-align: center;"><img alt="static pages, blogger" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieppxUI4ImeJqHhMxRLqTOld8iTyy5i0mJ_JrBZtmPxiGDxmuniqFmoOMAw8e73e3M92YflK5tkruB6l0igFiSsgkjziSK-tVIeJWivKbgtNKZw7oDb9ZbiRH5YtUOAHxEa1de2OnAPl8v/s1600/blogger-pages-edit-vew-share-delete.png" title="How to add Static Pages to a Blogger Blog (UPDATED)" width="600" /></div><br />In order to create a page, we need to open the pages editor from the button that says <b>New Page</b>. Almost every option tells us its function.<br /><br /><h2>How to add a Web Address in the Pages widget</h2>Many Blogger users wanted to know how can we add other web addresses, so that they display in the list of the Pages widget, since this option no longer appears in the "Pages" tab?<br /><br />This can be done by opening the settings of the Pages widget by going to "Layout", then click on the "Edit" link in the widget / gadget for <b>Pages</b> (if you don't have the Pages gadget, just click on the "Add a gadget" link and select "Pages" from the pop-up window). And from there, we will find the option that says: "Add link page" - here, we will have to type the Web Address in the second field every time we want to add a new page from a specific address or URL.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add web address, blogger tutorial" border="0" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPXMSQVYvrLx5irCt61Dyx6kaGh2RpaMQxa6ZNK0nNuQfoPRg9VRM24JlL6ht80XUeICFyKY7vo7y7AKVDPewyIkkOYnXXPngWL8S5O8hJrRTsihL5JSDvCC6hE4FbV5GZ4pnCDTeIXO4/s1600/blogger-pages-widget-how-to-add-a-web-adress.png" title="How to add Static Pages to a Blogger Blog (UPDATED)" width="600" /></div><br />Another cool feature that has been built is that now it will be possible to add a search description, and in that field to add the text that we want to appear in search results. Until now, this option has been available only for blog posts.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="search description for pages" border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqcFjqDz3CB8aInSeC4dzf321ExCdf8nZVBFGfKkxwr5BsIzHivwOkUwD1kIbMfvSKSCIo51ndzP2Y5a9pZdA5yFkcLxufQa_TBH7u2-2GWNLVylqZzvhxw4EU3JcXQtnsw5igsKG0WEj5/s1600/blogger-page-search-description.png" title="How to add Static Pages to a Blogger Blog (UPDATED)" width="320" /></div><br />This option will appear once you enable the "Enable search description?" option by choosing "Yes". This will show up on "Meta Tags" by accessing the preferences for the search engines: "Settings" > "Search preferences" > "Meta Tags" > "Enable search description"?

How to add Static Pages to a Blogger Blog (UPDATED)

A few months ago, Blogger has completely redesigned the section of the Pages, which now, looks very similar to that of the Blogger Posts. No...

Read more »

New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new <a href="http://helplogger.blogspot.com/2016/11/custom-blogger-contact-form-widgets.html">contact form widget</a> that you can add to your blog easily. At the moment, it is very basic because, at least for now, does not allow sending files or anything other than plain text.<br /><br />The contact form for Blogger has the following features:<br /><ul><li>Field for the user name</li><li>Field for email</li><li>Field for the message (textarea)</li><li>Submit Button</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="contact form, blogger gadgets, static page" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsw46fdJzxNcUv9kYotAZPD9_5efIWyGJDeAxfmWWb-ZN1O5aoyHhSzAsEVJuHu0RT1nbsjTGTUpmXtzhaHTx-VQnbtlrySO8ZHnmBUGDehDlnUkl5i3mW4J6cShY5Sp0D45ihRE4vc70y/s1600/contact-form-blogger.png" title="Contact Form for Blogger" /></div>The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.<br /><br /><h2>How to Add Contact Form to Blogger</h2>To add it to your blog, just select the Layout tab, then click on "Add a gadget" in the section you want to show - for example, in the sidebar. Then, select the <span style="color: orange;">More gadgets</span> tab and add the <span style="color: #0b5394;">Contact Form</span> gadget.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger gadgets, blogger widgets, contact form" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SDlUIUAMWPBeY3sZKLzlKqWaWJOKOOYFcTdKZxtfByAxWRtiAZhZaTqwu52ZbdmDNIeUpvihscJRn41kjhB4EmclAJKekr13tFwJOxV6IVSIMKn9280cBlR9LVPduoXy2cikp5zHopvU/s1600/contact-form-widget-for-blogger.png" title="Contact Form For Blogger" width="400" /></div><br /><h3>Styling Contact Form</h3>Since the background is transparent, the form will blend well aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example: <br /><br /><blockquote class="tr_bq"><i><span style="color: #6aa84f;">/* Contact Form Container */</span></i><br />.contact-form-widget {<br />width: 500px;<br />max-width: 100%;<br />margin: 0 auto;<br />padding: 10px;<br />background: #F8F8F8;<br />color: #000;<br />border: 1px solid #C1C1C1;<br />box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);<br />border-radius: 10px;<br />}<br /><br /><i><span style="color: #6aa84f;">/* Fields and submit button */</span></i><br />.contact-form-name, .contact-form-email, .contact-form-email-message {<br />width: 100%;<br />max-width: 100%;<br />margin-bottom: 10px;<br />}<br /><br /><i><span style="color: #6aa84f;">/* Submit button style */</span></i><br />.contact-form-button-submit {<br />border-color: #C1C1C1;<br />background: #E3E3E3;<br />color: #585858;<br />width: 20%;<br />max-width: 20%;<br />margin-bottom: 10px;<br />}<br /><br /><i><span style="color: #6aa84f;">/* Submit button on mouseover */</span></i><br />.contact-form-button-submit:hover{<br />background: #4C8EF9;<br />color: #ffffff;<br />border: 1px solid #FAFAFA;<br />}</blockquote><br /><div style="text-align: center;"><i>This is how it will look like after applying the style:</i></div><div class="separator" style="clear: both; text-align: center;"><img alt="contact form, blogger gadgets, contact form for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyLgFKWQ6FMHh_qdzo6fbPMh0MDYhU09qlHENBLWxZrIEAlQYaJQ3LqDtLens2CWZXNtsUjnwc1j2a0pR4AXl0-imGzIkWrR8JJPd61IrU_dBWNIAJIg_zRpiYP-LjQbpv4d-29OoiMld/s1600/contact-form.png" title="contact form for blogger" /></div><br />To add this style, go to <b>Template</b> > <b>Edit HTML</b>, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above<b><i> ]]></b:skin></i></b> (press CTRL + F to find it):<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGAwcBDYUVlZMufnKhKG5eX1EUBKRoTZ-Z3j-Lw-urLw7Jvf9U_xn7g_XajUEl9kRpIuInL7gbd3OkQ58PXO9UqL9Do4DMDyTNFf2dDAv-cujXxciiqzAybYgk5SwaoXkcGNGZFC7W__5/s1600/blogger-template-editor-css-styles.png" width="400" /></div><br /><h3>How To Add Contact Form In A Static Page</h3><br />First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):<br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjkZ4DUzTrMiBikZi6G9yHeHFM2ZX9E8qEgWHszx7uzC1uqMEiLhRDyDzNSTeWTtYRv15Ezg55tKZasr9JPGuGPvxlFxsRyXbF9UTy-lNMMFsfzDi97gkb7fYXVL1kseyn1hhwVpJPB-r/s640/contact-form-blogger-static-pages.png" width="640" /></div><br />Part to be removed:<br /><br /><blockquote class="tr_bq">  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'><br />    <b:includable id='main'><br /><span style="color: #cc0000;">  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='contact-form-widget'><br />    <div class='form'><br />      <form name='contact-form'><br />        <p/><br />        <data:contactFormNameMsg/><br />        <br/><br />        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/><br />        <p/><br />        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span><br />        <br/><br />        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/><br />        <p/><br />        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span><br />        <br/><br />        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/><br />        <p/><br />        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/><br />        <p/><br />        <div style='text-align: center; max-width: 222px; width: 100%'><br />          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/><br />          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/><br />        </div><br />      </form><br />    </div><br />  </div><br />  <b:include name='quickedit'/></span><br /></b:includable><br />  </b:widget> </blockquote><br />After you have saved the template, go to <b>Pages</b> and paste the following code into a new blank page with the title you want:<br /><br /><blockquote class="tr_bq"> <div class='widget ContactForm' id='ContactForm1'><br />  <div class='contact-form-widget'><br />    <div class='form'><br />      <form name='contact-form'><br />        <p>Name</p><br />        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><br />        <p>E-mail *</p><br />        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><br />        <p>Message *</p><br />        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br />        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/><br />        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><br />        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p><br />      </form><br />    </div><br />  </div><br /></div></blockquote><br />Messages will be sent to the same email that you have registered in Blogger.<br /><br />Here is the <a href="http://helploggerdemoblog.blogspot.com/p/contact.html" rel="nofollow" target="_blank">demo page</a> where you can test it (this is an account for demo purposes only, so don't expect any reply).<br /><br />That's it! If you have any questions or comments, leave them below.

New Blogger Widget: Contact form - Change Style & Install in a Static Page

Just a few days ago, Blogger introduced a new contact form widget that you can add to your blog easily. At the moment, it is very basic bec...

Read more »