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 17, 2007

Digg This Story

Header Image beside Blog Title

Instead of having an image occupy the entire Header section, some might want to have a small image beside the Blog Title and Description, either on the left or on the right of the Header. Blogger has a simple feature which allows you to upload an image to the Header. However, as we had explained in our article Background Image for Blogger Header (New), this image appears as a backdrop to the Blog Title and moves with the Title. To have the image on one side, we suggest two methods which you can try.

Using Blogger Header Image Upload

Let's say we have a small picture (150px by 150px) that we want to put on the left of our Blog Header. Use an image editing software to create a new blank canvas of 760px (width) by 150px (height). Check the Header width of your template. Normally it is found under #header{ of the template. Change the width to cater to your Header.

If you need a free software, try Irfanview. Next, open the small picture, copy and paste it into our blank canvas. In our example, we shift it to the extreme left of the canvas.

Header Image beside Blog Title

Save this newly created image into our computer and we are ready to upload it to our Header. Go to Template -> Page Elements and click the Edit link in the Header. Upload this image and for “Placement” select “Behind title and description.”

When you view the Blog, you would probably notice that the Title and Description overlaps the Image because most templates align the Blog Title to the left.

Header Image beside Blog Title

The next step is to align the Header Title and Description by adding a left margin greater than the width of the picture. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if you are using a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.

In our example, we added a left margin as follows:-

h1.title {
margin-left: 200px;

#header .description {
margin-left: 200px;


Preview the template. Save. We now have a nice little Header Image beside our Blog Title and Blog Description!

Header Image beside Blog Title

Using Picture Links

The second method is one we highlighted in our Add Picture Banner Link to Blogger Header article before Blogger introduced the Header image upload feature.

Again, we use an example of a 150px by 150px picture. This time, there is no need to create new images. All we need to do is to upload this image to 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. Take note of the picture URL. After uploading the picture, take note of the Image URL.

Go to Template -> Edit HTML and scroll to where you see this:-

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>


Amend the values to that shown in red. Save the template. You should be able to add Page Elements to the Header section. Under Template -> Page Elements, click to “Add a Page Element” in the Header, and select “HTML/JavaScript.” Copy and paste the image link code below:-

<div align="left"><img src="Image URL" border="0" width="150" height="150" alt="Description" /></div>


Type in the Image URL where your image is hosted. Enter the width and height settings of the image. The Description is an alternative text displayed when the image is not loaded for whatever reason. Add the text you want it to show. Notice that we have aligned the image to the left. If you want it on the right, change the word "left" to "right".

Once it is done, our next step is aligning the Blog Title and Description as discussed earlier. Set a left margin and when it is done, the final Header you get is the same as the picture shown above, a picture on the left of the Header just next to the Blog Title and Blog Description.

© 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

7 comments:

MindFul MiMi said...

I have tried to do this in my sand dollar 3 column template - but I cannot seem to move my Header title and description to either Center or with a certain margin width.
Can you help?

bizwhiz said...

Hi MindFul MiMi

Noticed that you have switched to Minima template. Anyway, for the Sand Dollar, to shift the image, you have to follow our guide to insert the #header-inner { style. In the Minima, this is already there.

aldwin said...

hi.

this is a very useful site!

thank you for generating this!

:D


uhm...the host of my blog is wordpress. can you teach us how to make a 3 column layout in blogsome.com


please..please. :D

and also, i want to put a navbar in my site, http://dincapin.blogsome.com

please teach us.

I tried to perform what you have demonstrate but i couldn't find any of those things. I think codes in blogger and blogsome are different..so please help me.

please.

please help me.


thank you!♥

fayrial said...

Firstly, thank you so much for the tips and tricks, it's so much fun to play around with :)
I'm just having trouble as the image is to the left of the text where I would like it, but it floats above rather than being right beside...help please.

thanks much,
f

chetna said...

Hi,
your site is very attractive and your article is so good
please help me visit my site
www.mp3git.blogspot.com
and
please give me your suggestion

My site future
mp3 songs :-
hindi movie :-
dubbed Hollywood movie :-

Mc said...

Nice Trick.. and genius.. to have 2 identical blog with great PR..
inspiring thanks..

Julie Ong said...

Hello,
Thanks for the tutorial. But when I do the second solution, my picture is higher than the title and the description. Is it because they might overlap if brought to the same level? How to adjust the level?
I've been personalising my blog little by little, so maybe it's one of you modified code which prevents the line up. I can give you the codes if you're willing to help me.
Thanks again.