How to customize your blogger Post Title...we can add some background picture behind the post title, or borders, change font.......................
..........................................................................well, a lot.
Before doing any customization, back up your template. Just in case....
Let's start with the beginning. Heh.
For customization, we will use the CSS style in the code section that corresponds to ourPost Title:
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
It's also important to know the width of your Post Title area, which is basically the same as your Post Content area ("main-wrapper" by default). This information, you'll find in this part of code:
width: 410px;
Attention again:
Let's do something, already....
BACKGROUND PICTURE IN POST TITLE
To add a background picture behind our Post Title, we have to do 4 small things:
1. check the width of Post Title area (or Post Content area, or) -- like in example ABOVE
2. create (or find) a picture for our 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....
3. upload the picture to a free web host (Photobucket, Picasa, TinyPic....) to get the URL address
4. place the URL address in the code, so our pretty background can show up.....
....when you do the first 3 things, go to LAYOUT --> EDIT HTML --> and in the Post Title CSS style/code, add the some lines:
background: url(URL OF HOSTED PICTURE); background-repeat:no-repeat;
height:55px;
margin:.25em 0 0;
padding:14px 40px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
....in blue, 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 PIC
....in green, you have to adjust your Title to fit into picture, change the value (higher value--> pushes the title more down)
....and in pink you can "push" your Title to the right, increasing this value....
Taa- daaam! That's it......
COLORS AND BORDERS IN THE POST TITLE
This is a much simple way of customizing Post Titles in Blogger. And you can create great effect with it, also......
Here's the example of using some border styles and some background color:
LAYOUT --> EDIT HTML --> locate the Post Title CSS style/code, and add the following lines:
background:#9fddea;
border:1px inset #000000;
margin:.25em 0 0;
padding:0 5px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
....in green, we've choose a border "1px" thick, with color #000000 (black), and "inset" style....more about border styles here....
....in blue, we "pushed" our title a little bit to the right, so it's not to close to a border (higher value --> pushes more to the right)
....if you want your Post Title to be underlined....use this line:
....well, that's about it. If you are interested in some more customization of Post Titles,
It is My Simple Notes by Using HTML for Blogging or Blogger Users in order to better good looking content
Post Title Customization - Blogger
.post h3 {
.....Attention:#main-wrapper {
...in orange, you can see the width, which is (in my case) 410px (pixels)..post h3 {
....in orange, we've added some background settings, and our picture (you have to replace CAPS with the URL adress of your hosted picture).post h3 {
....in orange, we've added some background color (you can choose any hex value you like)border-bottom:1px solid #000000;
....of course, change the width, color and border style to whatever suits you....