Pages

Search in the web

Thursday, August 16, 2012

Customize post title (center or right or put background image )

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.
Center or right post title.
Put background Image.
Colors and borders in post title.
Underline post title.
Center or right post title

1. Sign in to Dashboard, click on scroll down and choice "Template"

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;
}
.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 address
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;
  font: $(post.title.font);
  margin: .75em 0 0;
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....
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:



h3.post-title , .comments h4 {
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