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.



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.



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!



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