구글 블로그 썸네일 요약글 클릭 시 본문으로 이동하게 만들기

대표 이미지와 요약 서머리 글을 클릭할 수가 없다.

구글 블로그의 기본 세팅은 제목을 눌러서 게시물을 볼 수 있게 링크가 걸려있다. 이것을 썸네일/대표 이미지와 본문 요약 글을 클릭해도 이동할 수 있게 하려면 코드 수정을 해줘야 한다.

1. Blog1 위젯 안에 있는 다음과 같은 코드를 찾는다. (아니면 아무 줄이나 복붙해서 찾자)

                    <b:includable id='postBodySnippet' var='post'>
          <div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>

            <b:if cond='data:post.featuredImage'>
              <div class='snippet-thumbnail'>
                <b:include data='{                                     image: data:post.featuredImage,                                     imageSizes: [32, 64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;(max-width: 800px) 20vw, 128px&quot;                                  }' name='responsiveImage'/>
              </div>
            </b:if>
            <b:include cond='data:post' data='post' name='postSnippet'/>
          </div>
        </b:includable>

2. 위의 코드를 아래와 같이 변경한다.

                    <b:includable id='postBodySnippet' var='post'>
          <div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>

            <b:if cond='data:post.featuredImage'>
              <div class='snippet-thumbnail'>
                <a expr:href='data:post.url'>
                <b:include data='{                                     image: data:post.featuredImage,                                     imageSizes: [32, 64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;(max-width: 800px) 20vw, 128px&quot;                                  }' name='responsiveImage'/>
                </a>
              </div>
            </b:if>
                <a expr:href='data:post.url'>
            <b:include cond='data:post' data='post' name='postSnippet'/>
                </a>
          </div>
        </b:includable>

3. 첫번째 <a></a>가 썸네일 부분이고 두번째 <a></a>가 스니펫 부분이다.

 

2022. 3. 14.

 

https://wlsfl1.blogspot.com/

 

구글 블로그 인기 게시글 클릭 활성화 하기

구글 블로그 썸네일 대표 이미지 넣기