blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

2 ways to add image beside blogger post title

View demo.


There are two ways to insert an image next post titles on blogger. One is using CSS and the other, through "Expand Widget Templates" mode. Before doing the coding and the actual adding of the image next to the title, check out these simple guidelines.


image next to title blogger


Guidelines.
1. It is advised to save the picture in transparent PNG or GIF format to retain transparency especially for non-white backgrounds. Observe the difference. The "Test Post" on the right shows a transparent image.

png vs jpg

2. Upload your image to a free image hosting site like PICASA WEB or PHOTOBUCKET. Get the link.

3. Back up your template! If unsure how to go about this, check this tutorials:
How to Back up your Blogger blog - Classic Template
How to Back up your Blogger blog - New Template



Technique #1. Insert Image Using CSS.
1. Open EDIT HTML page.
2. Press CTRL + F. On the search bar, type in .post-title.
3. Once you see a style declaration similar to this,

h3.post-title  {
font: $(post.title.font);
margin: .75em 0 0;
font-weight: bold;
}


    Add in the highlighted lines:

h3.post-title  {
  font: $(post.title.font);
  margin: .75em 0 0;
  background-image: url(yourimageURL.png);
  background-repeat: no-repeat;
  padding:0 0 4px 50px;
  font-weight: bold;
}


    What it means.
    -background-image:url refers to the URL of your uploaded image
    -background-repeat: no-repeat means the image will not be repeated
    -padding: 0 0 4px 50px is the space between the element border (0px for
     top padding, 0px for right, 4px for bottom and 50px for left padding)

To learn more about CSS styles, visit W3Schools. You can also check Trick for New Blogger's post for better understanding on how to set paddings on images.

4. Save template.

insert image to blogger titles


Technique #2. Insert Image Through "Expand Widget Templates" Mode.
1. Open EDIT HTML page.
2. Press CTRL + F. On the search bar, type in  

<a expr:href='data:post.url'><data:post.title/></a>


3. Once you see a similar code like this,

<b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
           <a expr:href='data:post.url'>
           <data:post.title/></a>
      <b:else/>
      <data:post.title/>
</b:if>


    Add in the highlighted lines:

<b:if cond='data:post.url'>
     <b:if cond='data:blog.url != data:post.url'>
          <a expr:href="data:post.url" href="">
          <img src='yourimageURL.png' style='border: 0'/>
          <data:post.title></a> 
     <b:else/>
     <data:post.title/>
</b:if>


        -'yourimageURL.png' refers to the URL of your uploaded image

4. Save template.

add image right after blogger titles


Related Blog.
Image beside Blog Post Title
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 6 Shared Thoughts >>


Jhem Arzaga
October 26, 2013 at 10:05 PM

wow, thanks! it works well in mine! after Googling a lot of times, now at long last, I've found what's going to work with my blog, your tutorial is the only thing that works for me! have a look www.yourquotesdiary.blogspot.com

Thanks a lot for this post! god bless ^_^

Jennifer Brown
December 15, 2015 at 10:36 PM

Loved this Article,helpful for branding and popularity.I would also like to recommend website www.smstudy.com for relevant stuffs and hope so it will be helpful for others also in the way it was for me.

Danish Daniel
February 2, 2016 at 2:41 AM

I don’t even know how I ended up here, but I thought this post was
great.

Ace Utilities Keygen

Tommy AngelFab
February 11, 2017 at 10:10 PM

Hi there,

I was wondering if you have any clue about how I could display a different image on top of the static page title. I've been looking everywhere on google and I haven't find any solution yet. I'm working with blogger and my site url is http://www.upali-beach.com
Thank you in advance for your answer
Tom

PS : If it was unclear : I'd like to have the title of the static page coming under an image that would take all page width so that the text starts right after the title (I will have more images in the text)

sravya reddy
June 19, 2017 at 3:27 AM

The best thing is that your blog really informative thanks for your great information about add image beside blogger post title

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.