How to Create a Horizontal Navigation Menu with Images

Since I’m so obsessed with blog design I’ve decided the time has come to do regular blog design tutorials – so here’s my first one.
How to Create a Horizontal Image Based Navigation Menu (Blogger)
Here’s an example of a particularly amazing image based nav menu.

So now to get started on making our own.
First of all design your navigation bar.

Divide it into separate navigation bar items.
                
Upload images to photobucket.
Next go to the ‘layout’ page on blogger.
Click on ‘add a gadget’


Select ‘add html/javascript’

In this box you need to add the following for each of the navigation bar images.
<img src="http://i720.photobucket.com/albums/ww203/altwhxre/9822a33d.jpg" width="136" height="56" alt="Home" ?>
You’ll find the img src under the html tab on the image that you uploaded to photobucket. Width and height of the image are self explanatory I hope. Alt is the name of your image.
Hit save.
Move the widget directly underneath the header.
This is what it looks like on the blog.


We’re not finished yet though. We now need to make these images link to the corresponding pages. So first of all you have created the pages and made a note of their URLs.
Re-open the html widget we created earlier.
Highlight the code for the first image then click on the link icon.

In the box that comes up – enter the url for the page that image links to.
Press OK.
Repeat this process for all of the images.
Then hit save.
Now we just need to tidy up the navigation bar and make it more fluid. To do this just open up the html widget once more and remove the paragraphs for each widget. So that all the image code is one long paragraph.
As you can see this rids us of the gaps and creates a fluid navigation bar.

It really is that simple.  Of course you can use any design you like I just did a very simple navigation bar design for demonstration purposes.
If you have any problems leave me a comment!

CSS/HTML Basics for Bloggers–Part 1

 

It’s hard to believe that when I first started this blog just over a year ago I knew absolutely nothing about CSS/HTML. I’ve learnt so much in the past year and I’ve really enjoyed it. So many bloggers want to be able to tweak their theme but aren’t sure on how to do it so I thought I’d share some of my knowledge to help you achieve the effect you want on your blogs.

This is going to be a 2 part guide. The 1st part will focus on those bloggers that use Google Blogger and then in the 2nd part I will focus on Wordpress.

I will use the HTML from one of my old blogger blogs to demonstrate what you need to change to achieve the desired result.

This is the code at the top of my template.

<Variable name="bgcolor" description="Page Background Color"
             type="color" default="#135" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#666666">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9bd" value="#F5A9A9">
   <Variable name="pagetitlecolor" description="Title Color"
             type="color" default="#eee" value="#cccccc">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#79b" value="#666666">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#fc6" value="#F5A9A9">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#468" value="#ffffff">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#579" value="#F5A9A9">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#ccc" value="#999999">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#a7a" value="#999999">

The code above sets the default colours for your theme.  So to change these colours on your blog just look up the html code for your desired colour here and replace the numbers above with the html code number for the colour you require. Simple!

body {
      background:$bgcolor;
      margin:0;
      color:$textcolor;
      font: x-small $bodyfont;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }

This code sets the body of your blog. The $bgcolor is the variable you defined in the previous step.  You can change the text align to left or right if you don’t wish it to be centred. And the text color is what you specified in the previous step.  The margin is the space around the outside of the theme.

a:link {
      color:$linkcolor;
      text-decoration:none;
      }
   
a:visited {
      color:$visitedlinkcolor;
      text-decoration:none;
      }
   
a:hover {
      color:$titlecolor;
      text-decoration:underline;
    }

This code specifies the colour and text decoration for your links. As before the link and title colours were specified in the first step. Text decoration can be set at ‘none’ for normal text, ‘underline’, ‘italic’ or ‘bold’.

#header {
background: url(http://zzzz.jpg) no-repeat top center;
height: 335px;
width: 924px;
}

This code is for your header. If your header is too big or small, change the height and/or width in this html.

#outer-wrapper {
  width: 950px;
  margin:0 auto;
  text-align:$startSide;
  font: $bodyfont;
  background: #ffffff;
  }

The outer wrapper area includes the posting area, sidebars and header.  Changing the "width" will make that area larger or smaller.
Just remember that if you change the size of this area you’ll need to amend the size of your posting area and the sidebars too.  The total width of your posting area/sidebars must be less than or equal to the width of the outer wrapper.

#main-wrapper {
  width: 600px;
  float: $startSide;
  padding-left: 10px;
  padding right: 10px;
  margin-left: 0px;
  margin-right: 10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

The main wrapper is your posting area size. To make it bigger or smaller just increase or decrease the width. Padding-left adds space to the left of the posting area and padding-right adds space to the right. If those values were both 0 then there wouldn’t be any gap between the post area and he sidebars. It is of course important to have a space between page elements otherwise your blog would look crowded and hard to read.

*/
h2.date-header {
  margin:4.5em 0 1.5em;
  border-bottom: 0px dotted $bordercolor;
  text-align: left;
  text-transform:uppercase;
  }

This code helps change the apeearance of the date on your posts.  ‘text-transform’  means what case the date is in. Uppercase makes it all capitals, lowercase makes it all non capitals.

‘Border Bottom’ sets the border underneath the date.

.post h3 {
  margin:.25em 0 .5em;
  padding:0 0 4px;
  font-size:170%;
  font-weight:normal;
  font-family:fraktur;
  line-height:1.4em;
  color:$titlecolor;
  text-transform:lowercase;

This is the code for your post titles. Increasing or decreasing font size will of course make your titles bigger or smaller. Font weight can be normal or bold. And you can also change the text to lower or uppercase (like the previous step) under ‘text-transform’.

So these are the basics to tweaking your theme in Blogger but of course if you have any questions just drop it in the comments section!

SEO Tips for Bloggers

While twitter, Facebook and other social networks are a great way of increasing traffic to your blog, I’ve found that I get far more traffic from search engines than I do from social networks. SEO or search engine optimisation is vitally important if you want to expose your blog to the masses. But it can feel a little overwhelming and all the guides that I’ve read about SEO have been over complicated. SEO is actually fairly simple and makes it easier for people to find that stunning content that you’ve spent ages writing. The beauty of SEO is that it exposes your blog to non-bloggers as well as bloggers whereas visitors landing via twitter or Facebook are usually your fellow bloggers. So let’s get started!
Keywords
One of the most important aspects of SEO is keywords. But how do you select which keywords to use? Ideally you’ll want to choose the keywords that are used in searches most often. The easiest way to find out how often a particular keyword is used in a search is to visit Google Adwords site and enter your keyword. It will tell you how often that word is searched for worldwide and it will also tell you how often it’s searched for in your local area. This helps you identify which words will bring you the most visitors.
Where you position your keywords and how often it appears in your post is also of importance. So here are some tips on keyword positioning and frequency:

• Position keywords near the start of a post
• Use keywords in blog titles (preferably near the beginning of the title)
• Add the keyword to image tags, titles and file names
• Try and use the keyword at least 3 or 4 times within a post
• Don’t have too many keywords or tags though, if you do your blog may be labelled by search engines as spam

Internal Links
Most bloggers write content within a particular area (i.e. fashion). So you’ll often have multiple posts on similar topics. You can give your SEO ranking a helping hand by linking keywords from other posts. Let’s take an example:
B from Beautifully Invisible regularly writes about fashion designer Tom Ford. So let’s say she is writing a new post about a new collection Tom Ford is launching with Tom Ford being the keyword. In her new post whenever she uses the keywords Tom Ford she could create a link to one of her previous Tom Ford posts. Not only will it boost her SEO ranking but it will also increase her page views as visitors visit her previous posts n the topic. Double win!
Final Tips

• Links from other sites increase your search ranking
• SEO plugins like All in One SEO are useful. If like myself your using the Thesis theme then it has an SEO section built in to post editing pages. Fill in the required fields to help your ranking.
• Create killer content that people will share on Facebook and twitter.
• Make post urls as short as possible and descriptive. Avoid urls that look something like this ‘fuyume.net/p-844’

Following these tips should boost your search ranking and as a result you should see more people landing on your blog via search engines. Good luck! and if you have any questions, just ask!