Post clickable in Blogger

问题

Issue: To access the post page I have to click on the post title only.

Objetive: Click anywhere in the post to go to the post page.

Principal elements:

Post form : <div class='date-outer'> Header : <h2 class='date-header'> Post description : <div class='date-posts'>

The problem is in the following code:

<!-- posts -->
<div class='blog-posts hfeed'>

  <b:include data='top' name='status-message'/>

  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
      &lt;/div&gt;&lt;/div&gt;
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
      <b:include data='post' name='post'/>
      <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
    </div>

    <!-- Ad -->
    <b:if cond='data:post.includeAd'>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
</div>

The previous code defines the elements and the structure that will have date-outer, so when I run the code I get the following structure:

<div class='blog-posts hfeed'>
  <div class='date-outer'>
    <h2 class='date-header'>...</h2>
    <div class='date-posts'>...</div>
  </div>
</div>

I get the above code snippet when I inspect my blog in Google Chrome.

But to achieve my goal I need to embed a link containing date-header and date-posts, like this:

<div class='blog-posts hfeed'>
  <div class='date-outer'>
    <a href='X'>
      <h2 class='date-header'>...</h2>
      <div class='date-posts'>...</div>
    </a>
  </div>
</div>

--------------------------------------------- My tried ----------------------------------------------

I tried placing:

<a expr:href='data:post.link ? data:post.link : data:post.url'>

The previous element when executed generates the permanent link to the post page.

After the code:

<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-outer&quot;&gt;
</b:if>

And closing it with </a> after the code:

<div class='post-outer'>
  <b:include data='post' name='post'/>
  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>

Like this for example:

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
  &lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-outer&quot;&gt;
</b:if>

<a expr:href='data:post.link ? data:post.link : data:post.url'>

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
  <b:include data='post' name='post'/>
  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>

</a>

But I only manage to contain date-header within <a>:

<div class='blog-posts hfeed'>
  <div class='date-outer'>
    <a href='X'>
      <h2 class='date-header'>...</h2>
    </a>
    <div class='date-posts'>...</div>
  </div>
</div>

What I can do?

回答1:

I found a solution that works for me. I share the link to the question where the solution is found.

https://stackoverflow.com/a/58308988/7287197

来源：https://stackoverflow.com/questions/58295443/post-clickable-in-blogger

标签

html

blogger