Many of the templates both from the Blogger template designer and leave the post titles fairly standard.
But you can add some spice to your post titles like put background image or Customize your post title to Center or Right 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 How to customize your post title?
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.
2. place the URL address in the code
Here's the example of using some border styles and some background color:
Change the width, color and border style to whatever suits you
But you can add some spice to your post titles like put background image or Customize your post title to Center or Right 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 How to customize your post title?
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.
Center or right post title.
Put background Image.
Colors and borders in post title.
Underline post title.
Center or right post title
2. Click on "EDIT HTML"
3. Hold down Ctrl and then press the letter F on your keyboard for your browser's search box to appear
4. search for h3.post-title or code that may look something like those below (code below for Minima template, yours may be slightly different):
h3.post-title
, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
Note: When you search the code (h3.post-title) maybe you found 3 of this code, you have to choice which one is under the /* Posts code, like below.
5. The just add this line text-align:center;
If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;
h3.post-title , .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
text-align: center;
text-align: center;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
8. preview and if OK, save template.
Put background Image
Create a picture for background, which will be the same width as Post Title / Content area (you can make the width smaller, of course, but if you make it bigger, it will be "cropped") you can choose height of the pic as you wish....
1. upload the picture and get the URL addressCreate a picture for background, which will be the same width as Post Title / Content area (you can make the width smaller, of course, but if you make it bigger, it will be "cropped") you can choose height of the pic as you wish....
2. place the URL address in the code
h3.post-title , .comments h4 {
background: url(URL of Hosted Picture); background-repear: no-repeat; height: 55px;
background: url(URL of Hosted Picture); background-repear: no-repeat; height: 55px;
font: $(post.title.font);
margin: .75em 0 0;
padding: 14px 40px 4px;
padding: 14px 40px 4px;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
- In Red, we've added some background settings, and our picture (you have to replace CAPS with the URL adress of your URL picture).
- In Purple, we've added the line which tells Blogger that our picture has a certain height...you'll change this value corresponding to the height of your photo.
- In Blue, you have to adjust your Title to fit into picture, change the value (higher value--> pushes the title more down).
- In pink you can "push" your Title to the right, increasing this value....
Here's the example of using some border styles and some background color:
h3.post-title , .comments h4 {
backgrond: #9fddea;
border: 1px inset #968966;
backgrond: #9fddea;
border: 1px inset #968966;
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
- In Red, we've added some background color (you can choose any hex value you like).
- In Blue, we've choose a border "1px" thick, with color #000000 (black), and "inset" style.
Underline Post Title
border-bottom:1px solid #000000;Change the width, color and border style to whatever suits you
If You Enjoyed This Post Please Take 5 Seconds To Share It.