Change Post Title Font, Size and Color on custom Blogger template

modify Post Title Font, Size and Color from custom Blogger template

4
data:blog.title
post-title

Blogger post title is the main attraction to divert attention of readers. By modifying the post title font, size and color we can bring some variation. Beside of this when a visitors first land on a blog then first s/he look into all the post title and after that if found interesting then they enter into the post for reading.
However in this tutorial we will learn how we can change our blogger template's post title font, size and color. But this tutorial for custom blogger template users only. We will use a CSS code block that will help you to play with your post title.

By default in blogger template we use different Headline, sub-headline, minor headline etc. And Blogger denote this headline by h1, h2, h3, h4, h5, h6 tag.  The priority of headline sets  higher to lower.  Suppose  h1 = Header 1. Generally used to at the Blog title. And almost all template including blogger default template use h3  tag for post title. So our code for post title start with .post h3 and here .post means blog post and h3 tag means header3.


Removing the older code of Post title

Every template must have the code start with .post h3 so you have to find this kinds of code. After that simply delete those code block. Before proceeding take a backup of your template first and then follow the below steps-

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->Template -> Edit HTML

Step 3 Scroll down and find the code like below. Code won't be exact like below but find similarity

.post-title, .post h3{
...................................................................
...................................................................
...................................................................
}
.post h3 a, .post h3 a:visited, .post h3 strong {
...................................................................
...................................................................
...................................................................
}
.post h3 strong, .post h3 a:hover {
......................................................
.....................................................
 }


Step 4 Now simply delete the code block.

Adding Post tile code for changing Post Title Font, Size and Color

After successfully removing the code block you have to add the new code for tweaking the Post title Font, Size and Color. I didn't define any variable here so it will work easily but you won't be able to change it from template Customize option at the backend of the template. Please go through the below steps-

Step 1 Sign in to your blogger account and go to blogger dashboard

Step 2 On Blogger Dashboard Click ->Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F 

Step 4 Paste the below code above </b:skin> and hit the Save template button.

.post-title, .post h3{
line-height: 26px;
color:#000000;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;font-size:140%;font-weight:700;
text-transform: uppercase;margin-bottom:10px;
padding-bottom:5px
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display: block;
text-decoration: none;
color: #0872AF;
font-weight: normal
}
.post h3 strong, .post h3 a:hover {
color:#222222;
}

Customization


  • Change color:#000000 code with different color code for displaying in post page.
  • For changing the font alter 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif with different font. Remember first font with quote represent main font. Here 'Trebuchet MS' but you can replace it with 'Sans-serif'.
  • Alter font-size:140% with 120% or 150% or 160% for decreasing or increasing font size on home page.
  • Alter font-weight:700 this will change the font boldness. You can change 700 with 400 or 500 or 900.
  • Remove text-transform: uppercase; code line if you don't like all the uppercase font. You post title will display with lowercase.
  • Change color: #0872AF code for visited link color code.
  • Alter color:#222222 for changing font hover color.
You can get the color code from our 


Hope you have successfully modified your blog post tile with new font, size and color. If you have any query then feel free to write me. Thanks.
Change Post Title Font, Size and Color on custom Blogger template
4 Stars stars - "Change Post Title Font, Size and Color on custom Blogger template" Blogger post title is the main attraction to divert attention of readers. By modifying the pos...

Post a Comment

I think you did a very good job with this helpful post. I'm a programmer who also writes & and content-edits information-technology related books and articles. Of course your grammar isn't 'the best' but hey I can't speak a word of farsi or hindi and can only say hou bu hou in Mandarin, so I'm not 'criticizing' you. Over the years I've thought about doing some blogger help pages, but people like YOU have always done it before I think of it, which actually is quite pleasing, because it proves "great minds think alike", ha ha. Blessings to you and yours. Keep up your very thoughtful posts.

Thanks Geekiest Women for valuable feedback. I just surprised that you have written long comment without SPAM. I love to read it. |o|

hi after changing the color code #00000 it it didnt work.still remained blue
any help?

Hi Apple Media,
I think you have missed the Semi-colon. Just add color code like below with Semi-colon. It will work now.

#000000;

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *