Happy 1st of June!!! I have a fun tutorial for all of you to try out this summer...
Today I am going to show you how to customize the look of your post title text!
Now it is your turn!! Click on the image below to visit Google Web Fonts and choose a few favorite fonts. I suggest that you have a pad of paper and a pen or pencil handy. Go through the list of fonts and write down the names of your favorite fonts. Write down about five font choices before following the directions below.
Before you can change the font style of your post title, you must first add a little code to your blog template. Although, the directions I will give you are very simple, I highly suggest that you ALWAYS save a back-up copy of your blog template before making any changes. This way, if something goes awry, you can upload your saved back-up and save the day.
1. Once you choose a font, open up your blog template. Click on the Template link (circled in green) and click on Edit HTML to open your Blogger Template. Once you have the template open. Place this page on "standby" and switch back to your Google Web Fonts Tab.
Today I am going to show you how to customize the look of your post title text!
First things first... Let's pick out a Google Web font...
Below are a few of my favorite Google Web Fonts to use. I have included bold, handwritten, modern, traditional, fun, messy, cutsie, and cursive font choices below. These will give you a general idea of what these fonts will look like online.
To make choosing a font a little less overwhelming, try typing your own text to display (see example below).
Choose one of the top tabs to change the way you see your text. You can choose to view a word, sentence, paragraph, or a poster. I prefer to use the poster option; however, you can not type your own text to display for this option. Choose what works best for you.
2. Type in the name of the font you want to add to your blog and you will click on the arrow pointing to the right under the font name to grab the CSS.
3. Highlight and Copy the quick code on the following page
4. Switch back to your Blogger Template and locate <head> towards the very top of your template.
5. Paste the code directly UNDER the <head> tag...
As you can see in the image below, I already have several fonts installed on my blog template. I added the newest one underneath my previously installed fonts.
Once you paste the code under the <head> tag you MUST add a closing tag to your new code in order to save your blog template.
you will add </link> directly after the code you pasted. DO NOT add any spaces (see the picture below)
SAVE your template.
None of the font styles on your blog will change yet. Now we need to find the post title CSS within your blog template and add some code to change the font style.
6. Click on the black arrow in your blog template next to the <skin> tags to expand your blog template.
7. On a PC, use CTRL + F to open the search bar within your blog template
search for the code h3.post-title
The actual code may vary from one template to another, but you are looking for CSS titled, post-title within your blog template.
8. Under the post-title CSS, look for font-family. If you do not have this under your post-title code, you will add it. I already have this code in my template, so I will just need to switch out the names of the font family and save my template. For those of you who do not have this within your code, you will need to add the line of code. If you do not have the line of code, copy and paste the line of code below directly above the } line. This is the closing tag, so your line of code will need to be above this tag. 
Change the font name to your own font where I have the font, satisfy, listed below.
Make sure to copy all of the code below; including the semi-colon. If your font has two words in the name, do not add the plus symbol shown on the Google Web Font page. Just add a space between the words in the line of code below. Save your template and check your font!!
Here is what my post title looks like AFTER I changed the font family. I also made a few other custom changes, but I will show you how to do that in a later blog post.
If, for some reason you do not have the post-title code in your blog template, follow the directions below to add the code yourself.
In Blogger, you will go to LAYOUT and click on the link at the top of the layout view titled, TEMPLATE DESIGNER. Once in the template designer, click on the advanced tab and scroll to the bottom titled, add CSS.
Copy and paste the following code into the box. Make sure to change the name of the font family to the name of the font you installed earlier into your template.
Save your template and look at your beautiful post title!! If you do not like the font you chose, follow the directions above to add a different font.
I hope this tutorial was fun and I would love to hear about your successes or struggles!!
Thank you so much for stopping by!!
ONE DAY ONLY DISCOUNT!! Get my No-Credit License for 50% off at my Etsy Shop!!! Discount has already been applied, so there is no checkout code needed!! This license will only be available to purchase for the month of June. After June, I will not longer offer this license in any of my shops...
Your directions seem very easy to follow! Thanks for making that so simple. :)
ReplyDelete~Brandee
Creating Lifelong Learners
Thank you! I sure hope so!! Let me know if there is any confusion... haha
DeleteAbout to try this. Thanks for the tutorial!
ReplyDelete-Sarah
A Rocky Top Teacher
HELP! I'm stuck at step #7, I'm on a MAC. any thoughts?
ReplyDeleteSo easy to follow! I tried to change my post (body) text too, but it seems to only work with my first and second posts on the first page…any thoughts as to what I did wrong???
ReplyDeleteThanks!
Pili
Glitter and Gradebooks
Thank you Pili!!
DeleteI know what might be your problem.... are you copying and pasting your blog posts into Blogger? If so, make sure you remove the text style once you paste.
To do this, highlight the text you pasted and then click on the Blogger menu tools icon with the capital "T" and the red "x" above where you edit your posts. This will remove any text styles transferred from where you copied the text. I hope this helps (-;
Michelle