Hiding the sidebar on the static pages

Following on from step four - Make a ‘contact me’ static page

I realised when I was testing my pages I’d prefer the static pages to have the look of a normal webpage without the sidebar widgets. There are two ways to do this that I found. First to edit your template to decide not to display the sidebar on all static pages and secondly to tell each static page not to display the sidebar. I tried the first way and it didn’t work for me at all. I’m not sure if different templates work differently because I’m no html expert but I found adding the code to each page was the only way I could suppress the sidebar. So again go to your dashboard and edit your page. The pages you’ve created will come up, you need to do this for every page. Select a page to edit and in the content box, before your text or form html or whatever you’ve included in there paste this code:

<style type="text/css">
#sidebar-wrapper {display: none;}
#main-wrapper {width: 650px;}
</style>

The width variable will be specific to your template and look you want, experiment with this till you’re happy. Now do this for each page copying and pasting your code before the rest of the content. View and check it’s worked and your width settings.
If you have any problems with this and want to try the other way (editing the template) then go here. This is the tutorial I used, it’s in French so I used google translate to get the jist of it!

Hopefully now you have navigation links and have an understanding how to create the static pages that you want. Leave me a comment to let me know how you get on!

Make a ‘Contact Me’ page

Following on from step three - Making ‘about me’ static page

Before you start making your contact me page you need to create an html form. I found the easiest way to do this was to use a free online form generator. I used emailmeform but there are plenty to be found if you search online. All this site requires is a free registration then it takes you through the steps of making your own form, you can choose what you want the fields to be and how it’s delivered to you etc. Now you’ll get to a point where it asks you for your ‘Thank You’ page url. At this point I went back to my blog and created this page in exactly the same way as the about me instructions describe, but this time called it Thank You and didn’t add it to the linkbar. You can see mine here.

Once you’ve created your page remember to view it and copy the url just like before. This time paste it into the relevant box in the form generator site. This page is essentially hidden on your blog, no-one sees it till they’ve filled out the email form. If you want to see how I’ve done mine feel free to send me an email through the contact me form!

Ok so complete all the steps on the form generator site and you’ll get to the point where it gives you the html code for your form. Copy this, go back to your blog and, just like you did for your about me page, create a new page pasting this code into the page content box. Give your page an appropriate title and add to your link bar the same way as before. You can test it by sending yourself a practice email.

You can add other static pages in this way, blogger limits you to 10 pages in all though.

Go to step five - Hiding the sidebar on the static pages

Make an ‘About me’ page

Following on from previous step - Linking to home and my shop

To make your first static page go back to your dashboard and click on ‘new post’. Now if you’ve selected Blogger in Draft as your default dashboard you’ll now see ‘edit pages’ beside the usual ‘edit post’. Click on edit pages and select New Page. You can now give your page a title (I called mine about me) which will appear as a heading on the page, and type out anything you want to appear on the page. Once you’re happy with it click on ‘Publish’ and blogger will now ask you to select how you want your page to appear. This is where you want to select ‘no gadget’ so that blogger doesn’t add it’s own linkbar in, you’ve already set up all you need in the previous steps. Click ‘Save and Publish’ and when the confirmation page appears click on ‘View Page’. Blogger will now take you to your new page and what you want to do is copy and paste the url that appears in your browser.

Now go back to your dashboard, back to layout and click on your linkbar widget again. Add this new static page just like you did your home and shop pages, pasting the url into the new site url box. You can view your blog and check that your new link works and lets you switch between your About Me and Home pages.

Go to step four - Make a ‘contact me’ static page

Link to homepage and shop

Following on from the Previous step - Set up a navigation bar

Ok so you’ve clicked edit on your linkbar widget – a window should pop up now allowing you to add the first of your links. The first one I added was ‘home’. Simply type home in the ‘new site name’ box and paste your blog url into the ‘new site url’ box. Click on ‘Add Link’ and you’ll see Home appear at the bottom of this pop up window. Now enter ‘shop’ in the new site name box (or whatever you want to call your online shop link) and this time type or paste your online shop url into the new site url box. Again, add link, and it will appear above home at the bottom of the window. You can reorder the link using the wee up and down arrows beside them - the item at the top of the list will appear furthest left. Now you can click on save and go to ‘view blog’ and see if your new links appear on your blog! Remember we haven’t yet added any static pages so clicking ‘Home’ will just reload your blog. Clicking on your shop link should, hoever, open up your online shop if you’ve linked correctly. Now to add some pages.

Go to step three - Make an ‘About me’ page

Set up a navigation bar

The navigation bar I made entirely from a tutorial by Haptree. You can use blogger’s new static pages widget to create a link bar but apparently it is bug ridden and also doesn’t let you link to external links (which is what we’ll be doing in the next step for your shop) so we’ll bypass their built in system and add our own widget.

The tutorial I used to do this to do this was written by Haptree and can be found here (opens in a new window). It also explains in detail how to play around with the colours for your links and also how to create a link page for related posts (for example all your tutorial posts, or posts that mention your products.

Two small sections of code need added to your template to give you a linkbar so follow the instructions in the link and then go to your dashboard and click on the ‘layout’, ‘page elements’ tab. You should see your new Linkbar widget under your header. Click on ‘edit’ and that takes us to the next step...

Go to step two - Link to my blog home page and my shop with navigation tabs