Many of the templates both from the Blogger template designer and Custom templates leave the post titles fairly standard. When it comes to fonts, sizes, colors etc.. the post titles on almost all blogs have the same design. But you can add some spice to your post titles without too much hard work and adding even a few minor customizations can make all the difference. Every Blogger template has a small piece of CSS that controls how the Post titles appear and by adding or changing small pieces of code we can change the appearance.
So in this post among other changes to your blog titles we will see, How To Change The Size, Change The Color, Change The Background Color or add A Background Image, Change The Font Family and more..
First make sure to back up your template, I’m sure you wont make a mistake but just in case. With that done lets look at some of the effects we can add to Blogger post titles.
How To Customize Post Titles
The first thing we must do is find the section of CSS that controls the post titles. This code will be the same in 95% of blogs so if for some reason it differs in your blog drop a comment and we will help.
From you dashboard click ‘Design’ > ‘Edit Html’ (No Need To Expand Widget Templates)
Click ‘CTRL F’ and look for the following code (CTRL F generates a search bar – More Info)
.post h3 a
This is the section of code that controls your post titles, it will be followed by a few lines of code that create the appearance.
If You Cant find that code try looking for this :
h3.post-title,
Now that you have located the sections of code that control the appearance of your post titles you can change the current Css or add extra Css, lets look at some examples.If you are adding Css it always goes below the code you found.
Make The Text / Font size Bigger Or Smaller – change the font-size number :
font-size: 18px;
Make The Post Titles All Capital Letters – add the following code directly below .post h3 :
text-transform:uppercase;
Make The Post Titles Bold – if you see font-weight: normal; change to font-weight: bold; or add font-weight: bold; if it is not already specified.
Move the Post Title To the left, right or in the center – Change or add the code below :
text-align:left;
text-align:right;
text-align:center;
Add A Background Color To Your Post Titles – Add The Code Below With Your Desired Color :
background:#000000;
You can change #000000 to your desired color – Get color codes here
Add A Border To Your Post Titles – Add The Code Below :
border: 1px dashed #cccccc;
You can change the border type dashed to solid or dotted, you can also change the color code from #cccccc – Get color codes here.
Add A Background Image To Your Post Titles – Add The Following Code :
background:url(http://YOURIMAGE.jpg) repeat;
Replace http://YOURIMAGE.jpg with the image you want to use.
Change the Font Style / Font Family – Your Css will either have the Font Family similar to this :
font: $(post.title.font);
Or Similar To This :
font-family: Georgia,trebuchet ms, tahoma, Verdana, Arial, Sans-Serif;
To Change The Font Family Replace that code with another font. This link is to Common Fonts For Windows And Mac.. Almost all these fonts will work with Blogger.
Remove the current font and add the new font link this :
font-family:FONT FROM ABOVE LINK HERE;
To Look Like This :
font-family: Arial, Arial, Helvetica, sans-serif;
Be sure to add ; at the end of the font family.
There is much more you can do to customize your post titles but we will leave it there for now. Don’t go changing your template without having a back up and that way you can play around until you find what your looking for. Another idea is to create a test blog and get the right combination there before changing the real blog.. Have Fun !
