Adding images (or logo) next to our posts titles is a good way to customize our blog. As you see, I also have applied it in my blog. I added the blue winking smiley of vertical I and Y, my initial. The color is also matching the overall theme, sky blue. You can put an image too in your titles if you like. Here is how we do that:
First, login to Blogger and backup your current template by downloading full template from "edit HTML" in "layout" section of your dashboard. Those who are sorry are those who are unready.
Second, prepare the image file that is to be used, can be jpg, png, ico, etc (recommended: jpg). Pay attention to its size, we need to make sure the size is not too big or too small (compared to the title). My image is only 12 x 12 pixels, and it has the same height with uppercase letter in the title. If your image is too big, you can resize it with image editing software like Corel, Photoshop, Microsoft Paint, etc. However, apply with adaptation.
Third, upload the file to an image hosting website. Imageboo.com is a good example of a free one, yet easy to use. Once uploaded, copy its direct link, we will need it.
Last, go to Blogger Dashboard >> Layout >> Edit HTML. Do not forget to check “Expand Template Widgets” to view widgets codes. Then find these codes (use browser searching tool for faster result):
Then we need to install these codes after the first tag:
Therefore, the result will be like this:
Then, save the template and check your blog to make sure the codes work. Now the image should appear before your post title.
Note: You can experiment with the border, margin, and padding to adapt your theme if you like.
Having any difficulties? Any question?
First, login to Blogger and backup your current template by downloading full template from "edit HTML" in "layout" section of your dashboard. Those who are sorry are those who are unready.
Second, prepare the image file that is to be used, can be jpg, png, ico, etc (recommended: jpg). Pay attention to its size, we need to make sure the size is not too big or too small (compared to the title). My image is only 12 x 12 pixels, and it has the same height with uppercase letter in the title. If your image is too big, you can resize it with image editing software like Corel, Photoshop, Microsoft Paint, etc. However, apply with adaptation.
Third, upload the file to an image hosting website. Imageboo.com is a good example of a free one, yet easy to use. Once uploaded, copy its direct link, we will need it.
Last, go to Blogger Dashboard >> Layout >> Edit HTML. Do not forget to check “Expand Template Widgets” to view widgets codes. Then find these codes (use browser searching tool for faster result):
<a expr:href='data:post.url'><data:post.title/></a>
Then we need to install these codes after the first tag:
<img src='The direct URL of your image' style='border: 0; margin: 0; padding: 0;'/>  
Therefore, the result will be like this:
<a expr:href='data:post.url'>
<img src='The direct URL of your image' style='border: 0; margin: 0; padding: 0;'/>  
<data:post.title/></a>
Then, save the template and check your blog to make sure the codes work. Now the image should appear before your post title.
Note: You can experiment with the border, margin, and padding to adapt your theme if you like.
Having any difficulties? Any question?
