Thursday 28 July 2011

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

 
 

Monday 25 July 2011

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.




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! 

Thursday 14 July 2011

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