Complete Solution

How to Change/Customize Post Title Background Color in Blogger Templates? It is easy but different Picture Window, Awesome Inc and Ethereal, Watermark, Travel every template. No tension just follow below steps:



 





 1. First log in to your Blogger account and back-up your template.



 2. Then click Template >>  Edit HTML



 3. Chose Proceed to start editing the HTML code.



 4. Click on "Expand Widget Templates"



 5. Ctrl F and find the below code:



 

 /* Variable definitions
   ====================

 6. Replace the above code with the following one:



 

/* Variable definitions<br /> ====================<br /><br /> <Group description="Post Title Background Color" selector="h3.post-title"><br /> <Variable name="post.title.bg.color" description="Title Background Color" type="color" default="#222222" value="#eeeeee"/><br /> <Variable name="post.title.bg.hover.color" description="Title Hover Background Color" type="color" default="#222222" value="#000000"/><br /> </Group>



 7. Save your template and move on the next step.



 8. Now this step is a little different for each Blogger template. So, please follow the instruction according to the template you are using.



 1. For Simple Blogger template, find the following code:



 

h3.post-title, .comments h4 {<br /> font: $(post.title.font);<br /> margin: .75em 0 0;<br />}

 and replace it with the following one:



 
h3.post-title, .comments h4 {<br /> font: $(post.title.font);<br /> margin: .75em 0 0;<br />}<br /><br />h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }<br />h3.post-title a:hover { background:$(post.title.bg.hover.color); }



 2. For Picture Window Blogger template, find the following code:



 

h3.post-title {<br /> margin: 0;<br /> font: $(post.title.font);<br />}



 and replace it with the following one:



 

h3.post-title {<br /> margin: 0;<br /> font: $(post.title.font);<br />}<br /><br />h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }<br />h3.post-title a:hover { background:$(post.title.bg.hover.color); }



 3. For Awesome Inc & Ethereal Blogger templates, find the following code:



 

h3.post-title, h4 {<br /> font: $(post.title.font);<br /> color: $(post.title.text.color);<br />}<br />

 and replace it with the following one:



 

h3.post-title, h4 {<br /> font: $(post.title.font);<br /> color: $(post.title.text.color);<br />}<br /><br />h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }<br />h3.post-title a:hover { background:$(post.title.bg.hover.color); }



4. For Watermark Blogger template, find the following code:



 

h3.post-title {<br /> font: $(post.title.font);<br /> margin: 0;<br />}

 and replace it with the following one:



 

h3.post-title {<br /> font: $(post.title.font);<br /> margin: 0;<br />}<br /><br />h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }<br />h3.post-title a:hover { background:$(post.title.bg.hover.color); }



 5. For Travel Blogger template, find the following code:



 

h3.post-title {<br /> margin-top: 20px;<br />}

 and replace it with the following one:



 

h3.post-title {<br /> margin-top: 20px;<br />}<br /><br />h3.post-title a, h3.post-title a:visited { background:$(post.title.bg.color); }<br />h3.post-title a:hover { background:$(post.title.bg.hover.color); }

 9. Coding is finished. Save your template.



 Lets Change the Post Title Background Color in Template Designer



 Coding work is finished. Now, you can simply open the Blogger Template Designer and customize the post title background color.



  



To open Template Designer, click Customize button. In Template Designer, select Advanced from the left menu. You can see the Post Title Background Color option at the top. Here, you can preview your changes live. Please note that the change in Title Hover Background Color will not appear in Preview window. You can simply apply these changes to your blog and enjoy.

Subscribe to Get Newest Articles By Email!

Follow us!