블로그스팟 대문 페이지 목록 전체를 클릭 가능하게 만들기: CSS_HTML 수정 방법,

목록링크
블로그스팟 대문 페이지 목록 전체를 클릭 가능하게 만들기: CSS_HTML 수정 방법,

구글 블로그(Blogspot) 인터페이스는 대문 목록(리스트)에서  제목과 READ MORE.. 를 클릭해야 포스팅 글로 이동하게 되어 있습니다.

구글 블로그(Blogspot) 모바일/PC 화면에서 섬네일과 본문 일부를 클릭해도 포스팅으로 연결되지 않아 불편하셨을 것입니다 ? 
CSS와 HTML 수정을 통해 목록 전체 아무데나 클릭해도 되는 전체 대문 페이지 리스트에 링크를 거는 간단한 해결 방법을 소개합니다.

구글 블로그(Blogger/Blogspot)의 모바일/PC 인터페이스에서 리스트 항목 전체에 링크를 걸어 사용자 경험을 개선하는 방법은 크게 두 가지가 있습니다. 

현재 사용 중인 테마의 HTML 구조에 따라 CSS를 이용하는 방법과 A 태그로 감싸는 방법 중 선택하여 적용할 수 있습니다.



  • 구글 블로그(Blogspot) 모바일 섬네일 및 본문 클릭 시 포스팅 연결 방법
  • 블로그스팟 목록 전체를 클릭 가능하게 만들기 (CSS/HTML 수정)
  • 섬네일만 눌러도 이동!" 구글 블로그 모바일 인터페이스 링크 오류 개선하기

1. CSS를 이용한 '투명 레이어' 확장 방식 (권장)

가장 간단하고 구조를 깨뜨리지 않는 방법입니다. 제목(Title)에 연결된 링크 영역을 CSS를 통해 부모 요소(포스트 전체 칸) 크기만큼 강제로 넓히는 원리입니다.

Blogger 관리자 페이지 > 테마 > 맞춤설정(화살표 클릭) > HTML 편집으로 들어갑니다.

]]></b:skin> 또는 </style> 태그 바로 위에 아래 코드를 복사해서 붙여넣습니다.

CSS 방법

/* 포스트 목록 전체 클릭 영역 확장 */
.post-outer { position: relative; } /* 부모 요소 기준 설정 */

.post-title a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 섬네일과 본문 위로 투명한 막을 씌움 */
    cursor: pointer;
}


주의: 만약 클래스 이름이 .post-outer가 아니라면, 본인의 테마에서 포스트 하나를 감싸는 전체 박스의 클래스명으로 변경해야 합니다. 보통 index-post나 article 등으로 되어 있을 수 있습니다.


2. HTML 구조 수정 방식 (직접 감싸기)

HTML 소스에서 섬네일과 본문 요소를 찾아 직접 <a href='...'> 태그로 감싸는 방식입니다.

HTML 편집 화면에서 data:post.url을 검색합니다.

보통 섬네일을 출력하는 코드 부분인 <b:if cond='data:post.thumbnailUrl'> 근처를 찾습니다.

섬네일 이미지 태그(<img>)와 본문 요약 태그(data:post.snippet) 전후를 링크 태그로 감쌉니다.

수정 전 예시:

HTML 방법
<div class='post-thumbnail'>
  <img expr:src='data:post.thumbnailUrl'/>
</div>
<div class='post-snippet'>
  <data:post.snippet/>
</div>

수정 후 예시:

HTML
<a expr:href='data:post.url'>
  <div class='post-thumbnail'>
    <img expr:src='data:post.thumbnailUrl'/>
  </div>
  <div class='post-snippet'>
    <data:post.snippet/>
  </div>
</a>


3. 적용 후 확인 사항


모바일 전용 템플릿: 만약 Blogger 기본 제공 '모바일 템플릿'을 따로 사용 중이라면, 테마 > 모바일 설정에서 '데스크톱 테마를 모바일에서 사용'으로 설정해야 위에서 수정한 HTML/CSS가 정상적으로 반영됩니다.

중복 링크: 1번 방식을 사용할 경우, 본문 내에 다른 클릭 버튼(공유 버튼 등)이 있다면 해당 버튼이 클릭되지 않을 수 있으므로 적용 후 반드시 테스트가 필요합니다.

작업 전에는 반드시 테마 백업(다운로드)을 먼저 진행하신 후 수정하시는 것을 추천해 드립니다. 만족스러운 블로그 환경을 만드시길 바랍니다.

소스텍스트 아래


블로그스팟 사용자 중에서 해당 문제를 겪는 사용자분들께 도움되길 바랍니다.

#블로그스팟 #구글블로그 #Blogspot팁 #블로그SEO #모바일인터페이스 #CSS수정 #IT팁 #블로그꾸미기 #블로그스팟전체링크 #블로그스팟대문목록링크 #블로그스팟섬네일링크 #블로그스팟본문링크





댓글

댓글 쓰기

SNS publish