Freebies. Tutorials. Everything to Make a Cute Blog.
I spent some time searching for new freebies, and I came across some new resources for my Find Cute Stuff page. Anyway, in the search I thought it would be fun to put together a 30 Minute Makeover idea for you! Here it is:
A super cute Free Blog Header from Designs by Dana
+
Free Sidebar Titles from Artemisa
+
A Free Blog Background from Smitten Blog Designs
=
A Super Easy, Super Cute Blog Design in 30 Minutes or Less!
So I was going through some of the new requests submitted, and someone asked for a tutorial on how to add a post divider using the new templates. So I did a little digging looking for a tutorial and I came across Dawn by Design’s Blogwear Tutorials. The tutorials that she had were great, so I went ahead and just listed some of them on my Blogger Tutorial Page.
Here is a list of the tutorials that I added to my directory:
Adding a blog header in Blogger (tutorial by Dawn by Design)
Adding a post divider image in Blogger – New Templates (Tutorial by Dawn by Design)
Customizing template colors in Blogger (tutorial by Dawn by Design)
Part 1: Get Set up
First thing you will want to do, is to sign up for a free webfonts.fonts.com account.
Once you have an account, you need to go to your “Project” tab, and where it says “Current Project”, select “Create Project”
Now you need to add the Project Details, make sure you click “Add” next to your Publish Domain, then Click “Save Project“
Next Click on “Choose fonts“.
Here, you can browse through the different kind of fonts available. **Quick Tip: If you click on “Show free”, you won’t have to scroll through all the ones that say “Upgrade”
Once you have found one(or more) that you like, Click on “Add to Project“.
Now we are going to “Work on style sheet“. We have to add a “Selector”, the Selector that you need to add will be different, depending on the Template that you are using, so I have listed below what Selector to add for the different templates.
**In this sample, I am using the “Awesome Inc.” Template, so I am going to use the h3.post-title a
After you type it in, click “Add selector“. Then you need to click on the pink drop-down menu, and select the font that you want (if you only picked one, then it will be the only one that has shown up)
Once you have selected your font, you need to click on “Save changes and update style sheet“.
Now, go to your “Publish” tab, and Click on the tab that says “Option 2: Advanced (JavaScript)“. It should like this: **if you only picked one font, than there will only be one font-family listed
Now Copy the Text in the First box and go to your Edit HTML page on you blog, and paste it directly after you <head> **it is right close to the top
Now we need to tell the template which fonts you want where, so below I have a list of different fonts that you can change. In my tutorial, I am going to change the Post Title, and the Sidebar/Gadget Title. So for my example, I need to copy the 2 lines below that work for the Awesome Inc.
Paste the ones you want into your Add CSS page, like so…
Then, you need to go back to your Web Fonts account, and Copy the fonts that you want to use. Make sure to copy the WHOLE line.
Now go back to your Add CSS page, and paste the fonts into the place where it says FONT FAMILY HERE. Now it should look something like this:
Now just Click on Apply to Blog and you’re done! Now I have a Cute font for my Post Titles, and a different one for my Sidebar Titles.
This is Part 5 of a series of tutorials, if you need to start at the beginning, click here.
In this part of the tutorial, we will make sidebar titles and I will show you how to install them.
You are going to first make the Sidebar title the same way that you did the Header. If you need to see that Tutorial, CLICK HERE. The only thing that you need to do differently, is to make the size of your sidebar titles, with the same width as your sidebar. You can find the width in your Edit HTML page here:
I am going to make all of my titles 180px wide, even though my other sidebar is 220px wide, because I want them to all look uniform. So here are my sidebar titles saved as PNGs:
Now I am going to add them to my blog by adding a picture gadget to my sidebar:
Make sure that when you upload your Sidebar Title that you do NOT select “Shrink to Fit”
This is what it will look like now:
But I don’t want the dotted lines between my sidebar titles and my other sidebar gadgets, so I am going to go back into my Edit HTML page, and I am going to find this:
and I am going to change “1px” to “0px” on the border-bottom: like this:
And there you have it!
