How to link thumbnails at its redpectives post in blogger

34 views Asked by At

I'm getting crazy for this. I am building a blog, use watermark template. And when I make a post use the function of use an url to display an image. Blogger take the first post image to do a thumbnail for the home page post, but if you press the thumbnail its only open the image link in the web, but what I want to achieve is that if you press in the post image thumbnail you entry to the post. I dont know what piece of code manage this, so if anyone can help me I will be really grateful.

I tried to ediy the part:

          <b:if cond='data:post.thumbnailUrl'>
            <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
          </b:if>
          <meta expr:content='data:blog.blogId' itemprop='blogId'/>
          <meta expr:content='data:post.id' itemprop='postId'/>

But it doesnt work, try a few options that AI said me but its doesn't work either

1

There are 1 answers

2
Atakan Au On

The code you shared is located in the "head" section of HTML. The visitor does not see them in the web browser. The place you need to find it should be in your "body" section.

<body>
<!-- other codes -->
<b:loop values='data:posts' var='post'>
    <!-- other codes -->
    <a class='link' expr:href='data:post.url.canonical'>
        <img expr:alt='data:post.title' expr:src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' />
    </a>
    <!-- other codes -->
</b:loop>
<!-- other codes -->
</body>
  1. The "loop" tag is the loop that allows the posts to be listed.
  2. Find the "img" tag for which you want to change the link address.
  3. Find the "a" element outside the "img" element.
  4. Replace "href" value with 'data:post.url.canonical'.