How To Customize Post Title In Blogger

How To Customize Post Title In Blogger

The default blogger post titles floats in left and doesn't look attractive. Also in simple template of blogger, you can not even change the color of your post title. Today I'll tell you how you can easilycustomize blogger post titles to make them look way more beautiful. First I'll tell you  how you can easily "change the color of post title in simple template of blogger" and and after that I'll tell you how you can change these titles in different ways and create stitched effect around them by adding  simple css code to your template.

How toChange Post-Title Color in Simple Blogger Template

For changing the color of post title in simple template, just follow the given steps:

1.) Go to Blogger dashboard and choose Template option

2.) Click on Customize button and choose  Advanced option from the list.

3.) Now select Add Css option (last option in the list) and paste the code given below:

.post-title{
color: black !important;
}
.post-title a{
color: black !important;
}

Here, I changed the post title color to black. To change it to any other color replace black with desired color code. See color codes here

It was just about changing color of the post-title in simple template of blogger. But you can customize it in numerous number of ways by aligning center, changing font, background and  image of post-title. Here I have created a few customization for post-titles. You can add any of these to your blog easily no matter which template you've applied on your blog. These designer titles have been created with pure css and won't affect the loading time of your blog.

How to Customize Post Title on Blogger

To customize the post title as one of the given images in any template of blogger(including simple template), just follow the given steps:

1.) Go to Blogger dashboard and choose Template option

2.) Click on Customize button and choose  Advanced option from the list.

3.) Now select Add Css option (last option in the list) and paste one of the codes given below:

Preview

Code

.post-title{
background : #7fff00;
border:2px dashed white;

box-shadow:1px 1px 1px 4px #7fff00;
padding:10px;
border-radius:5px;
color:white !important;
text-align:center;
}
.post-title a{
color:white !important;
}

Preview

Code

.post-title{
background:#ffc0cb;
color:white !important;
border:2px dashed white;
border-left:0px;
box-shadow:1px 1px 1px 4px #ffc0cb;
padding:10px;
border-top-right-radius:10px;
border-bottom-right-radius:200px;
text-align:center;
}
.post-title a{
color:white !important;
}

Preview

Code

.post-title{
background-color:#00b2b2;
color:white !important;
border:2px dashed white;
border-left:0px;
box-shadow:1px 1px 1px 4px #00b2b2;
padding:10px;
border-top-right-radius:50px;
text-align:center;
}
.post-title a{
color:white !important;
}

Preview

Code

.post-title{
background : #00ccff;
border:2px dashed white;
background-position: 0 0, 15px 15px;
box-shadow:1px 1px 1px 4px #00ccff;
padding:10px;
border-top-right-radius:50px;
border-bottom-left-radius:50px;
color:white !important;
text-align:center;
}
.post-title a{
color:white !important;
}

Preview

Code

.post-title{
background : #ff9999;
border:2px dashed white;
border-left:0px;
background-position: 0 0, 15px 15px;
box-shadow:1px 1px 1px 4px #ff9999;
padding:10px;
border-top-right-radius:50px;
border-bottom-right-radius:50px;
color:white !important;
text-align:center;
}
.post-title a{
color:white !important;
}