Festive Sale!

With Christmas just around the corner I'm offering a super special festive offer of 20% off any purchases via my Etsy shop.

If you're interested in a custom blog design, one of my premade templates or one of a kind blog templates - or your own Etsy shop banner set or logo, enter the discount code FESTIVE2011 at the checkout to redeem your 20% off when you make a purchase!

Visit Crafty Lil' Fox on Etsy shop to find out more about what's on offer...

Have a great weekend! 

Melissa

Free Online Tools for Blogger (Blogspot) Design

If you're planning on making changes to your blog, or you want to make your blog posts and content look as professional as possible, then you'll quickly discover that having the right tools for blog design and web design makes it a whole lot easier to bring your ideas to life. Chances are however, that if you're doing your own blog design as a one off, you don't want to spend up to get software like Photoshop or Illustrator just to makeover your blog. The good news is there are some great tools out there that you can make use of to create attractive headers, background and illustrations for your blog without spending a thing.

To help you in the right direction, I thought I'd just do a quick post covering some of the great, FREE tools that you can use to create a professional look for your blog.

So here (in no particular order), are some useful sites to check out:

Pixlr - This online application has an inbuilt photo editor so that you can present professionally edited images to enhance your blog posts. If you're promoting your products or services online, then this is also a great tool for preparing your photos for uploading on your website or on sites such as Etsy or Folksy. Pixlr also has inbuilt tools for quickly uploading images onto social networks such as Facebook and MySpace.

Inkscape - This application is an open source drawing tool that works much like Adobe Illustrator. If you'd like to create Scalable Vector Graphics (SVG), then this is a great way to do it without Illustrator. With this tool you can draw lines and curves to create cute cartoon style vector images for your blog.

Picnik - Picnik can be used to create headers with a variety of frames and the means to drop your own images into the header. You can add in different fonts and other elements to create an original blog header or store banner without having to spend a lot of money on professional tools to get the look you're after.

Gliffy - If you're planning on sharing information via your blog, such as 'how to's' for craft projects, technical details of a product you offer or other information such as knitting charts, then this is an online diagram tool for creating quality flowcharts, diagrams, and technical drawings. There is a user friendly interface and intuitive easy to understand tools and functions.

Using these tools will help you to create professional looking graphics, illustrations and diagrams - these will enhance the appearance of your blog and help you to share your ideas and knowhow with your readers.

Giveaway Winners!

Thank you so much to everyone who has visited the blog and has taken part in the giveaway!
It has been so nice to find some new blogs and meet new people - so much so, that I will probably make this a regular thing (I've just got to decide how frequently I can manage!).

In the meantime, I've tallied up everyone's entries, placed the names in a hat and the winners are..... (drumroll, please!)....  Amanda from Handmade Lovin'  and Kacee from You Had Me At Scrap

Congratulations to the winners - I will email you if I have your address and/or visit your blogs to let you know you've won or if you haven't heard from me already, please email me.

Have a great week everyone - Melissa x

Using Google Fonts in Layout Design

Did you know that you can have the same cool fonts that are in the template designer - without starting from scratch with your blog?

If you've been doing any design work on your blog, chances are you've been making your changes from a layout template like Minima. And if you're just taking your first steps with customising your blog, I'm sure most people will agree that these are sooooo much easier for basic CSS/HTML customisation than the new blogs. One of the downsides, however, is that you could be missing out on some of the groovy new fonts. 

Well now you don't have to!

If you'd like a particular font that you've seen on a new blog, then I'm going to show you an easy way to install it in your blog.

To begin, head over to the Google Web Fonts Directory. Once you're there, simply look for a font that suits the style you're after.

When you find a font you like, click on 'Quick-use' option on the right and it will take you to page that looks like this:

Scroll down the page to Step 3 and you'll see this:

Copy the code section from Step 3 and go back to your blog.

Open the Design tab, then go to 'Edit HTML'.  (Tip - backup your blog before editing the HTML pages).

To install the font, simply copy the code for the font directly after the first <head> tag. 

After you've done this, you'll need to make two small changes. 

Firstly, you will need to find the & symbol - and add 'amp;' directly following it (without the quotes). Secondly, you'll need to add a '/' symbol (without the quotes) just before the closing of the font code. 

The head tag is circled in the image below, and the changes you'll need to make are also circled in the image below.  

And that's it - your new font is installed and ready to use! You can use it in your header, post titles or sidebar - whererever you like!

I recommend making a change to one type of title initially, then clicking on Preview to check everything is  installed correctly. If it's all working,  then save the changes you've made before making further changes to titles on the blog. 

Changing title fonts:

To make changes to titles, you'll need to replace the current font with the name of the font you've installed. If you're not sure what the correct name of the font is, see step 4 on the Google Fonts site for the correct details.

To find the sections you want to make changes to, type Ctrl F to search the blog code. 

If you want to change the post titles, search for 'post-title' and to find the section that looks like this:

To change the sidebar titles, search for 'sidebar' and find the section that looks similar to this:

**In both these instances, you'll see that you can also change the font size and colour in the same section of code, as well as the font family.

Once you've finished making any changes, click Preview to see how it all looks. When you're happy with your new font, just save and you're done! 

Melissa x

 

 

New blog templates!

I'd like to start by saying a big hello to everyone who has come by from Makin' Cute Blogs and is taking part in the Big July Blog Giveaway (if you missed it you can find that over here!)

I promised there would be more templates to come, so I thought I'd share these three new ones that I finished this week.

{link}

{link}

{link}

These will all be included in the giveaway, so if you haven't already entered, make sure you get involved - and get in the running to win one of these templates for your own blog!

Have a lovely week! 

Giveaway!

Welcome to the Big July Blog Giveaway!

I'm sorry that posting has been a bit erratic the last few weeks, I've been super busy working on lots of new things and helping some lovely ladies make their blogs look beautiful!

So as a way of thank you to everyone for being patient with my lack of posts, I'm going to hold a special blog giveaway.  I'm giving away two premade blog templates and shop sets from my online Folksy and Etsy shops.

Each template winner will receive the template of their choice (just like these below!) and the matching shop banner and avatar set, fully customised with their own blog or shop headline, descriptions and icons, all fully installed on their blogger (blogspot) blog.

You can find more examples of the premade blog templates over here.

Entries will be open from now until the end of July and I'll be adding fresh templates throughout that time, so there will be plenty of options for the winners to choose from!

If you'd like to enter, here's how you can join in:

Follow my blog - 1 entry

Post my button on your sidebar - 1 entry

Follow on Facebook - 1 entry

Mention my giveaway on Twitter - 1 entry

Mention my giveaway on Facebook - 1 entry

Mention the giveaway in a blog post - 2 entries

Multiple entries are allowed, so just leave a comment below and let me know any mentions you made - easy, huh?! Entries will close on the 31st of July and the winners will be drawn shortly after.

Good luck! 

Melissa x 

Blog Makeover Ideas

In my last post, I talked about how you can create a palette for your blog. So the question then is, how do you use that palette?  Well, there are several things you can coordinate to give your blog a professional finish  once you've picked out your colours.

Header
Your blog header if the first thing that people see when they get to your blog, and the style of header you choose and the colours, fonts and images can often say a lot more than your blog than you can convey in the title and description. If you have a blog that's about a particular theme or subject, such as a craft, then choosing a great font and photos or illustrations that reflect what you do helps to entice readers to delve further into your blog. If you make and sell handmade items, then choosing a colour palette that shows off your products to their best is a great option. You may also want to integrate some of your handmade items into a picture header that reflects your personal style and what you do that is unique.and

Your palette will come in useful as you select background colours, border colours and font colours for your header. If you've saved your palette details, then you can quickly and simply select the same colours over and over again by copying and pasting each colour's hex number. And don't worry if you don't have a program such as Photoshop - online software such as Pixlr provides you with a range of tools that will help you create a professional looking header. What's great about this is you can do the whole editing process in your browser window - and it won't cost you a cent!  (Just remember you must have permission from the photographer if you're using images that aren't your own).

Background
Changing your background is another way to make your blog unique, whether you want to go for a particular colour to complement your header or you're going to create or colour a unique pattern via sites like Color Lovers or Pattern Cooler.  Using colours from your palette makes it easy to keep your blog design consistent and will help you get a really professional looking blog page.

Adding a post signature
This option requires a little more technical knowhow, but adding a post signature that again color coordinates with your blog is a great way to make each post more personal and help to engage your readers. Online sites that allow you to customise a snippet of text for the post signature make this super easy, and with a bit of patience, you'll have a personalised signature and message to finish off each post you upload.


Using a blog template
If you don't have time to do customise your own blog, or you're not really up for mastering some of the HTML side of things, then templates are a great alternative to doing your own customisation. There are two options when it comes to using a template - firstly, you can find plenty of free templates online. These can be a great starting point and offer a quick and cheap solution to having a more unique blog. The downside is that you may find there are a number of others have the same blog template as you. The alternative is to purchase a template. These are usually sold in smaller quantities than free templates, so you can freshen up your blog with a really professional look for a very reasonable price. (You can view an example of a template I designed here.) 
The important thing to consider is whether you want something that is more unique, or if you're happy to have something that may be found elsewhere. A useful tip if you install the blog template yourself is to remember to always save a version of your current template (in case you have any technical hiccups) and select the 'Keep Widgets' option when installing, so that you don't end up having to re-install all the elements you've added to your sidebar.

Have a lovely day!

Beautiful Blog Backgrounds and Freebies

Hello! In my last two posts I described how to upload a blog pattern or background image.
A unique pattern or distinctive background image can really make your blog stand out, so today I'm going to share some backgrounds that I've designed, and share some ideas about where how to get your ideal background pattern.

At the top of my list of things to check out is the post, 'Pattern Resources for Making Your Own Blog Backgrounds' at Makin' Cute Blogs. This post covers a really comprehensive list of sites where you can source and create unique blog backgrounds.

One of my favourite sites (and I know I mention it a lot) is ColourLovers - where you can either make your own pattern, or find a pattern template to colour all of your own.

Here are some examples of the kinds of patterns you can make - or you can download these to use via the links underneath.

{Link}

{Link}

{Link}

{Link}

{Link}

{Link}

**Instructions**

To upload one of these patterns to your own blog, follow the link beneath the image and then click on 'Preview'.

When the image appears, right click and select save as.

You now have a pattern ready for use on your blog!

To install it, visit my last posts for instructions on how to change your background
To change the background in Template Designer go here.
To change the background in an older style template go here.

Let me know if you have any questions and make sure to post a link below to show of your new look blog!

Customise your Blog Background in HTML

Want to keep your older style blog template, but think it's looking ready for a bit of a revamp? Well, this post is going to cover how you can make some simple changes to your blog HTML to change the appearance of your blog background. I'll show you how to add in a link to an image or pattern, or how to select a custom colour to match the palette you've used on your blog.
(**If you're looking for my post on Customising Your Blog Background on Layout Templates, you'll find it here.)

If you're using an older blog template, then it can be really useful to know how to customise your blog background in HTML.  If you're not confident with using HTML, this can seem a little more challenging than if you're using the Template Designer option, but it is pretty straight forward once you get the hang of it.

To change your HTML, you need to firstly go to your 'Design' tab and click 'Edit HTML'.

The very first thing you should always do is save a copy of your template, so that you have a backup if anything goes wrong.

After you save that, type CTRL F, and type in body to find the section of your template that looks something like this:

Once you're there, you can now make changes by either selecting a custom colour, or by adding in a background image.

Adding custom colour to older style blog templates
This is super easy once you've reached this stage. Simply take the hex code that you want to use from your palette and enter the details here like this:

** Some templates will let you leave the wording as just background, others will not accept the change unless you change this to 'background-color'.

Select 'preview' to check the appearance of your template and if you're happy with the background colour click save.

***Tweaking the post/sidebar background area***
A common problem that can arise when you change the colour or add a pattern or picture background is that it makes the post hard to read if it shows through. To stop that happening, find the following section of code and change the color to prevent that happening (in this case I've changed it to white).

Adding a photo or pattern background to your blogger template
The first thing you need to do is upload the photo or pattern that you wish to use to an image hosting site. For this I've used Photobucket.

Once I've done this, I need to look for the same section of HTML code that you change to add a custom colour, which looks like this:

To change the background colour to an image, type 'URL', then copy and paste the URL of the image you uploaded in brackets next to it. It will now look like this:

Preview your blog and if necessary tweak the post/sidebar background (as above) and once you're happy with the changes you're done!

You now have a unique colour or pattern that will really make your blog stand out.

If you have any questions, please let me know! 

Customise your Blog Background on Layout Templates

Looking for a great way to update the appearance of your blog?  One of the simplest ways to make your blog your own is to change the background - and that's what I'm going to look at in this post.

There are different things you can do if you're going to customise your background - and the way that you go about it will depend upon what template you're using, for this post, I'll cover the basics of changing your background if you're using one of the new layout templates. (If you're looking for my post on HTML background changes or changing an older template I've covered How to Customise your Blog Background in HTML in this post here).

Customising the background on a Layout Template
If you're using a layout  template then you have the option to do one of two things - update the colour or pick a photo background. In both instances, you need to start by going to your 'Design' tab and clicking on 'Template Designer'. The first thing you'll need to do is select a template on this page in order to make the changes.

To choose a colour only, click on the 'Background' option, then select a colour theme from the right.

If you want to pick a specific colour using a 'hex' number, then select after you select the main colour theme, select 'Advanced', 'Background' and enter that number there.

If you'd prefer to use a photos for your background, then you can pick one from the many different choices blogger offers, or you can upload your own image and use that to create a background all of you own.

To upload an image of your own, select the drop down menu at the side of the 'Background' button and at the top left of the pop out, you'll see a box that says 'Upload Image'. You then simply select your file and you'll be shown a preview of how it will look on your blog.

** Note - if you want a full screen image, blogger advises something no smaller than 1800 by 1600 pixels. If you do use something smaller it will be tiled or repeated on the background. On the plus side, you can adjust how this will happen, by changing alignment, tiling direction and whether the image scrolls.

If you're happy with the preview, then click 'Done' to continue with any other changes you wish to make, or go to the top right and select 'Apply to Blog' to finish!

If you have any questions, please let me know! 

Friday Freebies and Linking to Images

Hello lovely people! Today I've got made some super simple banners for sidebar linking. If you've got a blog page on Facebook, Twitter and you want to let people find an easy way to email you - then these are perfect for that.

I've done 3 sets of 3 images to start with, in green, purple and blue - but if you'd like to see more of these in another colour let me know and I'll try and add it in here.

Of course, these are not a lot of good if you don't know how to link to them - so I'll explain that now!

There are two options you have. Firstly, you can insert these as a picture and then link to them individually as 3 pictures. That's not necessarily a bad option, but unless you want to start making changes in your template - they will probably end up looking like this:

I prefer to group these together (like I have on my sidebar here), so an alternative option which I recommend is to add these as HTML (and don't worry, you can do that very easily in your sidebar elements).

In order to do that, you'll need to start by uploading the images you want to use to a photo hosting site such as Photobucket.

Once you've uploaded them on there, go into Blogger and go to the 'Design' page. Select 'Add an element' for your sidebar and then select the option that says 'HTML/Java Script'.

This will cause a window to pop up in which you can enter a title and a space for the code.

You'll then need to enter the following code and make the changes outlined below:

<div align="center"> <a href="URL1" target="_blank"><img alt="Image Name1" src="Image URL1"/></a> </div>

<div align="center"> <a href="URL2" target="_blank"><img alt="Image Name2" src="Image URL2"/></a> </div>

<div align="center"> <a href="URL3" target="_blank"><img alt="Image Name3" src="Image URL3"/></a> </div>


Once you have that code, you then need to change the following:
URL - This needs to be replaced with the link that you want to direct the reader to. Eg. The Twitter image will link to your Twitter page, Facebook to Facebook page and so on.
Image Name - Just enter a short phrase to describe the image. Eg.. Twitter button.
Image URL - This is the URL or web address of the image that you've uploaded to Photobucket and it should look something similar to this... http://i1219.photobucket.com/albums/dd432/LullilooDesigns/Lulliloo-background-2.gif

After you've made the changes outlined, click save and then position the element where you'd like it to appear in your side bar.

Please let me know if you have any questions!

Manually Resize Pictures and Add Tags

If you include a lot of images in your posts, then you may find it useful to resize pictures manually to ensure they fit well on your page and it can help to balance them out so that the series of images are in proportion to each other. This offers more control than if you use the pre-set small, medium or large options that Blogger offers.

You may also find it useful to add image tags (also known as 'alt tags'). If you're unfamiliar with these tags, they are the pop up tags that often appear when you hover your mouse over the image. These are there for people who are unable to view the images, but they are also useful for getting your images to rank in search engines. If you have a website or blog that supports the sales of your handmade or other products, then this is a good way to help people find your blog or products via searches such as Google Images.

To resize your picture's manually, rather than using the small, medium or large, the  first thing to do is upload your images. It is still worthwhile using the size the corresponds with the general size  you wish to use, and then start to resize the images once they are on the blog.

The first step to change the image size is to click on the Edit HTML tab (no. 1).
Once you are on this screen, you then need to look for the width and height part of the code (no. 2). These may be grouped together or further apart, depending on your blog.
To resize the image, you need to change these numbers. One of the most important aspects of this is to ensure that you keep the proportions in balance as much as possible to prevent your picture from looking distorted.

In this second screen shot, you can see that I've changed the sizing to reduce the images roughly by half, bringing the size down from 810 x 720 to 404 x 362.  (If you have an image that you wish to make bigger, be aware that this may result in fuzziness/image pixellation. )

Once you've done this, take a look in the preview and make further changes as necessary. The more familiar you are with this, the easier it will become for you to estimate sizes.

The final step I'm going to show is how to add in image tags to describe your pictures. To do this, look for the part of the code marked alt. Next to that between the " and " you can add a few words to describe your image. The more relevant these are also to your post content and overall blog content, the better it is for your blog or site SEO.

Once you've done all that - you can preview your post and if you're happy, it's ready to be published!

Crafty Blog Colours

Welcome to my blog - I'm really excited to be starting this new 'venture'. If you've already visited my other blog, then you're probably know how much I love crafty stuff and all things handmade! (And if you haven't been there, you can visit my other blog - Lulliloo - here!)

I don't really talk about my everyday work over there, so it's going to be a whole new experience for me to be writing my own blog and talking about things like SEO, web design and online marketing. Hopefully I'll be able to come up with lots of useful and interesting information that will be relevant for all those out there who love crafty stuff as much as I do and are trying to figure everything out when it comes to starting an online home based business.

Colour is so important in design, and if you're setting up a blog, getting the right colours and doing it consistently may be a little overwhelming. If you're like I was when I started my first blog about 6 years ago - you're probably wondering how on earth to keep track of the colours you've used so that you can create a really 'clean' and pretty blog. (And if you're a crafty sort like me, you're probably grinding your teeth in frustration that you can't get everything just right!)

So for my first post, I'd like to introduce you to a site called Colour Lovers. Whether you're looking for a great palette to use on your blog, or looking for a way to store a palette that you already use, you'll find this site has everything you need. The great thing about this is that you can keep track of your favourite palettes, or you can create one that you can then use as you make changes on your site.

You will have to register for the site, but this is a good way of keeping track of any colours/pallettes you've used - and you'll find a host of other features on there including patterns (which is how I created the background here). And in my book, having your palette stored in one place instead of trying to use a colour picker tool makes life a whole lot easier!

Once you've signed in, you'll need to select the palette option like this:

This will then take you to a screen similar to the shot below. Here you'll be able to pick the colours you like and save them as a palette of up to 5 different colours.
 

After you've chosen the colours that you want, you can give the palette a name and scroll down the page to save it. Using the colours you've chosen, you can now accurately and consistently make changes to your site - knowing that you're using the same colours each time.

The screen shot below here shows 4 of the 5 colours in the palette that I used for this blog - and in order to help you when you're making changes to colours on your blog, I've circled some important things here that I'll explain now.

The circle on the left shows a number called a Hex number. This is used in the HTML code of your blog to identify the colour for fonts, borders, backgrounds and a range of other colour related selections. If you've been trying to use the colour picker each time, you'll find that you can now use this number instead. Best of all, this number can be used in other design programs, so you can create headers, banners, frames and even blog signatures, all in the same colour by simply using this number.

The 3 numbers circled on the right work in a similar way, and these are Red Blue Green numbers (or RGB). If you use these, you'll need to enter the 3 different numbers into the corresponding spaces, so generally, it's much easier to work with Hex numbers RGB is not usually used when carrying out basic blog changes.

Colour is one of the most important ingredients in a great design and once you have picked out your perfect palette, you can make sure that your colour choices are coorinated across different sites and when creating things like headers, buttons and even pages for your online stores.