Customizing Post & Date Header In Blogger

Tweet

Hello everyone, 

Today we'll be changing up the post and date header, have you ever wanted to move your post tittles and date to the centre or right?? You know play around with it?? or add a little color to it or an image OK!

First let's see how to align the post header and date;

1. Go to Template--Customise--Advanced--Add CSS

2. Now choose how you will like to align your post and date header, copy and paste the one that best suits from the list below in the CSS section; Tweet

CENTER;

.post-title {

text-align:center;

}

.date-header {

text-align:center;

}

RIGHT

.post-title {
text-align:right;
}
.date-header {
text-align:right;
}

LEFT

.post-title {
text-align:left;
}
.date-header {
text-align:left;
}

3. Click apply to blog   

Your blog post and tittle should look like this now... 

PS.. .post-title {text-align:right;} is for post tittle while .date-header {text-align:right;} is for date, so you can move either the post tittle or date. Tweet

Now let's add some images;

1. Create an image in picmonkey like I showed you in the previous post, the size of your image will depend on what you want. 

2. Upload your image to photobucket, copy direct link. 

3. Copy and paste the code below to CSS section follow the steps mentioned previously. 

h3.post-title {
background:url(DIRECT LINK) no-repeat left;
height: 55px;
padding-left: 50px;
padding-top: 30px;
margin-bottom: -20px
}

4. Change DIRECT LINK to the direct link you copied from photobucket. Click Apply to blog 

Your header should look like any of these now;

----

----

More Tip::: You can change text positions by playing with the code, e.g. changing padding-left: 12px or padding-top: 30px e.t.c. 

You see really simple and easy! Try it out and let me know.. Don't hesitate to ask questions :) Do leave your link below if you try this!!! Have a fabulous day!Tweet

PS Please follow my new Instagram Account! Thank You!
Thanks for stopping by!
xoxo
Olufunmi
Facebook | Twitter | Instagram | GFC