This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 20, 2007

Digg This Story

Image beside Blog Post Title

We had in our earlier article showed you how to add Images or Icons to Sidebar Links. Many readers are also interested to add images next to the Blog Post Titles. You can have a small picture to automatically appear in every Post Title. This guide will explain how this can be done.

The image we are talking about has to be small, perhaps about 20px in width. But for the purposes of this guide, we shall also use a bigger image double that size, to let you see the difference.

First, we have to create that image. If you have an existing photo or picture, you can use an image editor like Google's Picasa to crop or resize it to a small image size. After that, upload it onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Copy down the IMAGE URL.

Example 1

In this first example, we use an image of 20px by 20px. Login to Dashboard and go to Template -> Edit HTML. In the Minima Template that we have, we would see these lines:-

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-family:trebuchet ms;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


If you are using a different template, you can still locate .post h3 and although the styles defined may vary slightly, the way to insert the image is the same. The codes that should be modified or inserted are highlighted in red.

.post h3 {
background:url(IMAGE URL) no-repeat;
margin:.25em 0 0;
padding:0 0 4px 30px;
font-family:trebuchet ms;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


The result we see is this image on the left of the Post Title:-

Image beside Blog Post Title

The IMAGE URL is the location where the image is uploaded, beginning with http:// To test whether the link works, enter that into a browser and press Enter. You should see that image without being prompted to download it.

We adjusted the padding to shift the Post Title. The padding is the space between the border and the element. Our intention here is to add a space between the left border of the Blog Posts and the start of the Post Title. How the value works is this. In a shorthand declaration, the padding property can take these forms:-

.post h3 {padding: 10px;}

This indicates that the padding is 10px on all the four sides of the Post Title.

.post h3 {padding: 10px 20px;}

Here, the top and bottom padding is 10px, and the left and right padding is 20px.

.post h3 {padding: 10px 20px 30px;}

Where there are three values, the top padding is 10px, the left and right padding is 20px, and the bottom padding is 30px.

.post h3 {padding: 10px 20px 30px 40px;}

This declaration style is what we use to adjust the Post Title to the exact position where we want it. With 4 values, the top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.

As you would understand by now, since our image width is 20px, we added a left padding to the Title to give a space of 30px between the border and the start of the Post Title. You would have to change the values of this padding setting to cater to your image size and blog design. Always Preview the Template and do not save it until you are happy with the change.

Example 2

In this example, we use an image size of 40px by 40px. The modification to the template code is the same as above. However, our paddings will have to take care of this larger image. To have this bigger image on the left side of the Blog Post Title like this:-

Image beside Blog Post Title

We can change the padding to this:-

.post h3 {
background:url(IMAGE URL) no-repeat;
margin:.25em 0 0;
padding:10px 0 4px 50px;
font-family:trebuchet ms;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


We set a top padding (space above the Post Title) in addition to the left padding. The Title is aligned to the middle of the picture. If the Title is to be aligned to the bottom, we would have increased the top padding from 10px to 20px. Experiment with your padding settings to align the Post Title. Preview the Template and save it if you like the new layout. Refresh the Blog and you will have an image displayed beside each of the Post Titles.

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

9 comments:

admin said...

how to add different images for wach post title..something like "new"..reply soon

Pink Lady Claire said...

Thanks for all of your tips! They are quite helpful!

I have a question on this one: is there a way to make the image for each post title different? For example, I am using a multiple user blog, and would like the image for each author to be featured at the top of the post, to the left of the header. Is there a way to set this up?

Pink Lady Claire said...

Is there a way to have a different photo for each post? I am wanting to put the profile pic for each user next to the post title. (Multiple user blog)

Shi Ting said...

Hi there,

how can i insert a picute (eg sperator line) at the post footer (after the 'Posted by' and 'Category')

please help!!!

thanks in advance

elektr10 said...

Is there any way to use different images for each blog post?Not the same image for all posts?

The Chatty Housewife said...

I am using the dots template, so there are three little dots beside each post title. I wanted to change this to a different image, so I followed your directions, replacing the three dots url with the url of my new image. Instead of the image showing up, it is just empty space. The background shows through. Can you help me?

DirtDigger (Tessa) said...

Hi,

I tried this code and it worked beautifully, except it keeps disappearing on me- i tried creating a pic through google groups first- and it worked, then disappeared. Then i tried creating it through google sites (formally know as google pages or something) and that worked- then this morning it was gone

i did the favicon too, and that is gone as well.

I first time i did it, i got it to look good in both ie and firefox- then it disappeared. when i copy the image link (in google groups you can click on the file and it does open in a new window) and reinserted it- it worked- and then disappeared again.

How can we make these stay?

Thanks

Anonymous said...

Thanks for this webpage! I am a new suscriber and beginning to customize my blog. I am trying to add color on the sidebar behind individual widgets and your direction worked perfectly! However, I am having a problwm with 'drift'...the color sometimes on refresh spills down into the text of the next widget below. How can I fix this?

raj said...

i have my website www.raj-tipstricks.blogspot.com which is about computer,email,internet,blogger tips,tricks and much more.but i am finding it difficult to include my site in search no pages of mine are indexed,.please do reply ur comments on my id rajraj12323gmail.com.waiting for an urgent reply.