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

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send 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 style="text-align: center;"><i>Screenshot</i></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEblET0MUQ1y9v2zOFsYoJ5gFyS9lAoGwdKmVJPz-NvDnOTIU3N2CAvzjX4kFs8hwPiJ8hAz85Qx1pWbz1wk5tIQA3lqE_PpwQYdUWYshZOWQgPXil_aRQ-71mdd0ERP0jE31hmkJovuv/s1600/contact-form-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="contact form, blogger gadgets, static page" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEblET0MUQ1y9v2zOFsYoJ5gFyS9lAoGwdKmVJPz-NvDnOTIU3N2CAvzjX4kFs8hwPiJ8hAz85Qx1pWbz1wk5tIQA3lqE_PpwQYdUWYshZOWQgPXil_aRQ-71mdd0ERP0jE31hmkJovuv/s1600/contact-form-blogger.png" title="Contact Form for Blogger" /></a></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 <b><span style="color: orange;">More gadgets</span></b> tab and add the <span style="color: #0b5394;">Contact Form</span> gadget.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvElrRFFaCYfTbjE01ndxL_Gdpc4wwccYKyTGXyhfRPSFMy5nING0C2v8jNtuIUyGSLAinWaABFvMDndturtZ-jgj-lCY7-MZxf-ekCwsZ8JbMFqtTXOYQK4xWqUicQuh4ZtIowu9XO7si/s1600/contact-form-widget-for-blogger.png" imageanchor="1"><img alt="blogger gadgets, blogger widgets, contact form" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvElrRFFaCYfTbjE01ndxL_Gdpc4wwccYKyTGXyhfRPSFMy5nING0C2v8jNtuIUyGSLAinWaABFvMDndturtZ-jgj-lCY7-MZxf-ekCwsZ8JbMFqtTXOYQK4xWqUicQuh4ZtIowu9XO7si/s1600/contact-form-widget-for-blogger.png" title="Contact Form For Blogger" width="400" /></a></div><br /><h3>Styling Contact Form</h3><br />As the background is transparent, the form will integrate 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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXMwPetBJu25UUOGDVnLy01woD0bh-ZK1n1uaGvB8iELGTR0DcsZF3kLZK_hfoMWgH-R6Ajh8Gwd1cb7m-LRHHGnQ0AOtN7W76gWK46Mlwtq0cT1tXycP3PW-PS2ZFD3CwjiqhIKvZHL8/s1600/contact-form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="contact form, blogger gadgets, contact form for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXMwPetBJu25UUOGDVnLy01woD0bh-ZK1n1uaGvB8iELGTR0DcsZF3kLZK_hfoMWgH-R6Ajh8Gwd1cb7m-LRHHGnQ0AOtN7W76gWK46Mlwtq0cT1tXycP3PW-PS2ZFD3CwjiqhIKvZHL8/s1600/contact-form.png" title="contact form for blogger" /></a></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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-777bvXfRXczNeichwahnqI5fKlkD0VUw45BgF84YZON83C0TdIAz-vC-rULiP6LRbJxxjke-2BPCBIfnNc-ZqbLfEuygyPpVDeNRY5yOAaaHBMbdjqwFJebH_a-AkGvjfWyj_v-BNA1F/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-777bvXfRXczNeichwahnqI5fKlkD0VUw45BgF84YZON83C0TdIAz-vC-rULiP6LRbJxxjke-2BPCBIfnNc-ZqbLfEuygyPpVDeNRY5yOAaaHBMbdjqwFJebH_a-AkGvjfWyj_v-BNA1F/s1600/blogger-template-editor-css-styles.png" width="400" /></a></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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqICdLY6EZYLNGmuRPMUeSMpHad0BAk_ID3UPWa10GoSwOoBbngOw1ubrozOcPGxb6lx96zmkpnMBbEop_AbwqQwfVxH-HNbhD_sjwq1lM8ukHuEwCYwv05zxmASToF2tN6lB2SxPudLM/s1600/contact-form-blogger-static-pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqICdLY6EZYLNGmuRPMUeSMpHad0BAk_ID3UPWa10GoSwOoBbngOw1ubrozOcPGxb6lx96zmkpnMBbEop_AbwqQwfVxH-HNbhD_sjwq1lM8ukHuEwCYwv05zxmASToF2tN6lB2SxPudLM/s640/contact-form-blogger-static-pages.png" width="640" /></a></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's a <a href="http://helploggerdemoblog.blogspot.ro/p/contact.html">demo page</a> where you can test it (it is an account that I don't use, so don't expect reply).<br /><!-- adsense -->That's it! If you have any questions or comments please post below.

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

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

Read more »

How to Add Different Backgrounds In Blogger Pages

In the last tutorial<b>, y</b>ou learnt <a href="http://helplogger.blogspot.com/2012/04/how-to-add-different-background-color.html">How to Add Different Backgrounds in Blogger Posts</a>. Now this tutorial, will show you how you can have a different background for each of your page, thus giving your pages their own unique look.  <br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1hKGQxatRTRg9E_xSjvJghXkTE3cHGbEOxatVLg9wIuloYAdd79KZXIacKg7qM1ziyo04RWRB_W20zOKmwNrp_pkMOQxKsaUvfjUfDEYI9kK-KkIzOxTGdULZGAoHBpq2SJmRceZUvK5/s1600/how+to+add+a+different+background+on+blogger+posts+pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1hKGQxatRTRg9E_xSjvJghXkTE3cHGbEOxatVLg9wIuloYAdd79KZXIacKg7qM1ziyo04RWRB_W20zOKmwNrp_pkMOQxKsaUvfjUfDEYI9kK-KkIzOxTGdULZGAoHBpq2SJmRceZUvK5/s320/how+to+add+a+different+background+on+blogger+posts+pages.png" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"><span style="font-size: large;"><b><a href="http://demo-helplogger.blogspot.com/">DEMO<span style="font-size: large;"> H<span style="font-size: large;">ERE</span></span></a></b></span></div><br /><b>How to Add Different Background In Blogger Posts/Pages</b><br /><br /><span style="color: #0b5394;"><b>Step 1.</b></span> Log in to your Blogger Dashboard, then go to Template > Edit HTML.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s400/blogger-template-edit-html.png" width="400" /></a></div><br /><br /><span style="color: #0b5394;"><b>Step 2.</b></span> Select "Expand Widget Templates"<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UE_isPpbzQ_DNWW7e93kf8J7ux51dIgwz4mrkFrETvgPNrtWRUWDEGQ4XxVTNorj1TjZFjb9UnZGEbddVzptCDijIw9cj1nSp6O_xpmcts7NMAmrOpPfYMSiPc3Q-oCU-_zfAlqH_nZw/s1600/blogger-expand-widget-templates-hide-pic-inside-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UE_isPpbzQ_DNWW7e93kf8J7ux51dIgwz4mrkFrETvgPNrtWRUWDEGQ4XxVTNorj1TjZFjb9UnZGEbddVzptCDijIw9cj1nSp6O_xpmcts7NMAmrOpPfYMSiPc3Q-oCU-_zfAlqH_nZw/s1600/blogger-expand-widget-templates-hide-pic-inside-posts.png" /></a></div><br /><span style="color: #0b5394;"><b>Step 3.</b></span> Search (CTRL + F) for this tag:<br /><br /><br /><blockquote></head></blockquote><br /><span style="color: #0b5394;"><b>Step 4</b></span>. Just above the </head> tag, paste this code:<br /><br /><blockquote class="tr_bq"><b:if cond='data:blog.url == &quot;<b style="color: #cc0000;">http://POST-OR-PAGE-URL.html</b>&quot;'><br /><style><br />body {<br />background-image: url(<b style="color: #cc0000;">http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG</b>);background-position: center; background-repeat:repeat; background-attachment: fixed;<br />}<br /></style><br /></b:if></blockquote><br /><b>Note:</b><br /><ul><li><i>Change:<span style="color: #cc0000;"> </span><b style="color: #cc0000;">http://POST-OR-PAGE-URL.html</b> with the URL address of your blogger post or page where you want the custom background to appear.</i></li><i></i><li><i>Change: <b style="color: #cc0000;">http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG</b> with the direct link of your background image. </i></li></ul><br /><span style="color: #0b5394;"><b>Step 5.</b></span> Click on SAVE TEMPLATE and you're done. <br /><br />

Blog Design blogger pages how to How to Add Different Backgrounds In Blogger Pages

In the last tutorial , y ou learnt How to Add Different Backgrounds in Blogger Posts . Now this tutorial, will show you how you can have a d...

Read more »

How to Create Static Pages in Blogger

<span style="font-size: large;"><b>What are Blogger static pages? </b></span><br /><br />Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.<br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznJfCnwvsk7gUmL45x-ZUXGj8lqNyc8CFPOJY8ikFhw4U0UhLOxBCTmTXs-PFk7CDShbR3JMkOCyGN64SCrr6pKwvE_V7guR9IHvDy8VAYUtb6eozavDvhsu6pb3AvVbzsakAhSX8swLn/s1600/how+to+create+static+pages+in+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznJfCnwvsk7gUmL45x-ZUXGj8lqNyc8CFPOJY8ikFhw4U0UhLOxBCTmTXs-PFk7CDShbR3JMkOCyGN64SCrr6pKwvE_V7guR9IHvDy8VAYUtb6eozavDvhsu6pb3AvVbzsakAhSX8swLn/s320/how+to+create+static+pages+in+blogger+blogspot.png" width="320" /></a></div><br /><span style="font-size: large;"><b>How to Create Static Pages in Blogger.</b></span><br /><br /><span style="color: #0b5394;"><b>Step 1.</b></span> Log in to your <a href="http://www.blogger.com/home">Blogger Dashboard</a><br /><br /><span style="color: #0b5394;"><b>Step 2.</b></span> Click on <b>Pages</b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpSSRYJ9Zs3cTX_KALpefGNGO2X0pGIRG_F1lJ-kcqCy9ogGP70CvmelHPzBGW9RL9M1dyFaj1kxhL-84AJxZRrD5AiI9vaRWwTjH6xZpSZkNQegKKbAMWk6L4Jx5r1ayRUVCIC1I9Ws6/s1600/how-to-create-static-pages-on-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="static pages blogger, blogger tutorials, widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpSSRYJ9Zs3cTX_KALpefGNGO2X0pGIRG_F1lJ-kcqCy9ogGP70CvmelHPzBGW9RL9M1dyFaj1kxhL-84AJxZRrD5AiI9vaRWwTjH6xZpSZkNQegKKbAMWk6L4Jx5r1ayRUVCIC1I9Ws6/s1600/how-to-create-static-pages-on-blogger-blogspot.png" title="how to add static pages in blogger blogspot" /></a></div><br /><br /><span style="color: #0b5394;"><b>Step 3.</b></span> Click on <b>New Page - Blank Page</b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zQ8dG7suKgSy9w9uwMIcbl80bd40lh9Sa_C_KOq-fKME4VMSRDn1h1PA-pEB7mcluaExQ8fRi1GqfA7_uVTgA_6Z09x3UjwRw3olLGMZQs-1OvkdLZjHX8Ytqrc0Kup9aIXzZZvgvTOX/s1600/how-to-create-static-pages-in-blogger-blogspot-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zQ8dG7suKgSy9w9uwMIcbl80bd40lh9Sa_C_KOq-fKME4VMSRDn1h1PA-pEB7mcluaExQ8fRi1GqfA7_uVTgA_6Z09x3UjwRw3olLGMZQs-1OvkdLZjHX8Ytqrc0Kup9aIXzZZvgvTOX/s1600/how-to-create-static-pages-in-blogger-blogspot-2.png" /></a></div><br /><span style="color: #0b5394;"><b>Step 4.</b></span> Type the title and write the page's content.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVe0GtETxIlqTPm1obV6S2Lc9bznfHlw582vSlebUf7CrcF8atSryoYAlYNByGQOc8CQK5T04FKSov7rXEWXS1ccT4sMAEOTuKW4lce_BBG6PDdM-BO0DjfE81dcFxYot-Knp2C6EYiHqq/s1600/how-to-create-static-pages-in-blogger-blogspot-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVe0GtETxIlqTPm1obV6S2Lc9bznfHlw582vSlebUf7CrcF8atSryoYAlYNByGQOc8CQK5T04FKSov7rXEWXS1ccT4sMAEOTuKW4lce_BBG6PDdM-BO0DjfE81dcFxYot-Knp2C6EYiHqq/s400/how-to-create-static-pages-in-blogger-blogspot-3.png" width="400" /></a></div><br /><b><span style="color: #0b5394;">Step 5.</span></b> Before publishing it, click on Preview to see how it will appear on your blog.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH87wJ06Ocjmdju-vAECK7akRY5m-fgdbLyNqr-Y0SSvxxlfloCSKxSoM_GG5ac5l6fnEn4xLGf0pxVwuGW8D4UmJxTnLRetgsRifjEWqnZiqDP-27ZKgEw4db6fOa1_6AthDLeY9GgPWm/s1600/static-pages-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH87wJ06Ocjmdju-vAECK7akRY5m-fgdbLyNqr-Y0SSvxxlfloCSKxSoM_GG5ac5l6fnEn4xLGf0pxVwuGW8D4UmJxTnLRetgsRifjEWqnZiqDP-27ZKgEw4db6fOa1_6AthDLeY9GgPWm/s1600/static-pages-for-blogger.png" /></a></div><span style="color: #0b5394;"><b>Step 6.</b></span> When you have finished the editing, click on Publish button.<br /><br /><span style="color: #0b5394;"><b>Step 7. </b></span>Now you have 3 options:<br /><ol><li>Keep it as nav menu below header <b>- Top tabs</b> </li><li>Display the page in your blog's sidebar - <b>Side Links</b></li><li>Add the page's link manually to your template - <b>Don't Show</b></li></ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9QVjyY5j1SN2wnvcxGSu-ZJ_lVGaBybL_NByZdWXpNSLiGcGZr4DqNqvrdFe3u5KMuzGB0CBpWb8bxJJAkD2FuaQvkZ9wRHRmnSeRIvFzIwyy59rgcuN_YlABKvO3pRiQTnG1sUx3Wwh/s1600/how-to-create-static-pages-in-blogger-blogspot-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9QVjyY5j1SN2wnvcxGSu-ZJ_lVGaBybL_NByZdWXpNSLiGcGZr4DqNqvrdFe3u5KMuzGB0CBpWb8bxJJAkD2FuaQvkZ9wRHRmnSeRIvFzIwyy59rgcuN_YlABKvO3pRiQTnG1sUx3Wwh/s400/how-to-create-static-pages-in-blogger-blogspot-4.png" width="400" /></a></div><br /><span style="color: #0b5394;"><b>Step 8.</b></span> After you have chosen where the page will appear, click on the Save arrangement button<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmTD1x8Gj5kKLHglxaLr6ZFghjVjLaJ4FeIZ6Lsr_vHR7zggkfBWE6531eFCLZZtNdV9jN_YKf_BbwEVZ-oJcU8hg3cD7vTrWC3N4OGPjx2sWZz8ZeR2qOqrXA07DBmF-C7LvINdUXsAY/s1600/how-to-create-static-pages-in-blogger-blogspot-5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmTD1x8Gj5kKLHglxaLr6ZFghjVjLaJ4FeIZ6Lsr_vHR7zggkfBWE6531eFCLZZtNdV9jN_YKf_BbwEVZ-oJcU8hg3cD7vTrWC3N4OGPjx2sWZz8ZeR2qOqrXA07DBmF-C7LvINdUXsAY/s400/how-to-create-static-pages-in-blogger-blogspot-5.png" width="400" /></a></div><br /><br />And now you're done!<br />Now you have owned the static page. If you want another static page, just repeat the steps above.<br /><br /><i><b>Note:</b> if you have opted for Don't show option: go to Pages again and right click on the page's title and select Copy link location (in firefox). You can add the link manually to your sidebar via Link widget or add the link in your template, via Edit HTML.</i><br /><br />If you need more help, leave a comment below.<br /> <!-- adsense -->

blogger pages how to static pages How to Create Static Pages in Blogger

What are Blogger static pages?  Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on...

Read more »