Navigation Tabs

Monday, 16 June 2014

The top ten best Blogger tutorials for setting up and customising your blog!

Howdy folks!

Today's post is a list of the best Blogger tutorials for customising your blog. I used all of these myself in the process of making my blog look well.. pretty awesome actually.. so huge thanks going out to all the lovely people who helped make it happen and hopefully the tutorials will be useful to you too!

First things first, if you don't actually have a blog of your own yet you will need one! Steps 1 & 2 show you how to get set up so you can skip these if you are already up and running.

1. Set up a blogger account..
  • My blog uses the 'simple' template so if you would like yours to looking like mine choose this option when you follow the instructions here.
2. Set your blog to private..
  • From the drop down menu to the right of your new blog's name on the blogger dashboard, is a link to everything you will need.  For now select 'settings'. Under the heading 'Permissions' set the 'Blog Readers' to 'Private - Only these readers'. Click 'save changes'. 
  • The purpose of this is to keep your blog nice and private whilst you customise and write your first post so that you can launch it later in style! Don't forget to come back and change this to 'public' later so you can share your blog with the world!
3. Customise your layout..

  • From the drop down menu on the blogger dashboard select 'template designer'. Select 'layout' and decide on the layout option that will work best for your needs. The darker grey areas on the layout options indicate areas where you can have 'gadgets' or 'widgets', these are tools or plugins that allow you to add third party content to your blog, such as 'follow' buttons or an instagram feed like on my blog. My blog uses the layout that has a gadget area both sides of the posting area highlighted in the screenshot above.
4. Customise your header..
  • There are several different options for creating your custom blog header and the good news is that having expensive design software is not essential! Picmonkey is a free online photo editing software and the fabulous ladies over at the blog guide book have created a brilliant tutorial which you can find here for using it to create your header!
  • For those of you creating a blog in the same template as mine, I created my header in Adobe Photoshop and it is 1030 pixels x 300 pixels. However, it is important to note that the default width size of your blog will be different to mine (960 pixels x 300 pixels) as I have adjusted the widths of the various columns to allow for my customised design. If you would like your blog to fit the same parameters as mine you will need to go into the Template Designer and 'adjust widths' to the settings in the screen shot below.

5. Customise your social media buttons ..

social media icons by pink moustache
  • Before you start the tutorial you will  need your own social media button designs. If you are confident you can go ahead and make some but there are loads of free cute ones out there already like these adorable ones that I used from pink moustache which are very cute!
  • To upload your buttons you can then use this very easy to follow tutorial by the fabulous Emily at Blogaholicdesigns. What's really cool about this tutorial is that you can use the same technique for adding your page nav tabs in the next step with just a slight modification on where you place your gadget!

6. Add pages and customise your navigation tabs..

Essentially what you will be doing in step 5 is creating pages, but instead of having plain boring hyperlinks at the top to link to your pages you will have customised tabs like mine (see below) woo! There are 2 parts to this, designing your navigation tabs, and uploading them so that they work. Here's how to do it..

  • If you are fluent in a design program you can go right ahead and start designing your tabs. Remember the size of the nav tabs will be determined by the width of your blog and how many tabs you need to fit in the space. My blog is 1110 pixels and my tabs are approximately 135 pixels x 44 pixels.  If you are fluent in Adobe Illustrator you may find it easier working in this program for accuracy.
  • If you do not have access to a design program and are not confident with how to do this yourself you can follow the tutorial on the third grade in the first state blog which shows how to create the tabs in Gimp the free photo editing software. 
  • To upload your navigation tabs follow the second part of the tutorial from third grade in the first state here . When I did my navigation tabs I didn't want to use photo bucket to host my images so I uploaded them as a draft blog post the same as for the social media icons tutorial, and set the links up there before copying the code into the pages gadget and editing appropriately. 
7. Remove Blogger navigation bar
  • This bit is really simple but will have a big impact design wise on the look of your blog so it's totally worth doing! Follow the instructions here
8. Add a custom favicon
  • Don't have a clue what a favicon is? Never fear, the lovely Marianne Manthey from to explain all about it and how to get one for your blog! Full instructions here
9. Add an instagram widget
  • For this tutorial we are back to the super helpful blog guide book for advice and guidance on adding an instagram feed to your blog, full instructions here with a little help from SnapWidget. For those of you that want to follow the same layout as me, I chose the Grid 'widget type', set it to display 1x7 clicked 'yes' to add a border around each photo. 
10. Add a Pintrest hover button to your images
  • Adding a Pintrest hover button will enable your readers to pin images directly from your blog to their Pintrest board in the blink of an eye, meaning super fast sharing and more exposure. This tutorial here from code it pretty will take you through necessary steps to get your own official Pintrest hover button! 

Hope you found that helpful and happy blogging everybody!

No comments:

Post a Comment