블로그스팟 이탈률 방지 필살기! 본문 중간 '카드 뉴스형 추천 글' 삽입 레이아웃 가이드

 

독자를 붙잡는 힘! '카드 뉴스형 추천 글' 레이아웃 구성법

긴 글을 읽다 보면 독자의 집중력이 떨어지는 구간이 생깁니다. 이때 연관된 주제의 카드형 링크를 배치해 보세요. 마치 전문 매거진을 보는 듯한 느낌과 함께 자연스러운 클릭을 유도할 수 있습니다.

1단계: 카드 뉴스 스타일 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드를 복사해서 붙여넣으세요. 모바일에서도 깔끔하게 반응하는 카드 디자인입니다.

/* 카드 뉴스형 추천 글 스타일 */ .next-post-card { display: flex; align-items: center; background: #ffffff; border: 1px solid #e1e4e8; border-radius: 12px; overflow: hidden; margin: 30px 0; text-decoration: none !important; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .next-post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: #4285f4; } .card-img { width: 140px; height: 100px; object-fit: cover; background-color: #eee; } .card-body { padding: 15px; flex: 1; } .card-label { display: inline-block; background: #4285f4; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 20px; margin-bottom: 5px; } .card-title { display: block; font-size: 16px; font-weight: bold; color: #333; line-height: 1.4; } @media (max-width: 480px) { .next-post-card { flex-direction: column; } .card-img { width: 100%; height: 160px; } }

2단계: 본문 중간에 카드 삽입하기

글 작성 중 [HTML 보기] 모드에서 추천하고 싶은 위치에 아래 코드를 넣으세요.

<a href="연결할_글_주소" class="next-post-card"> <img src="썸네일_이미지_주소.jpg" class="card-img" /> <div class="card-body"> <span class="card-label">함께 읽으면 좋은 글</span> <span class="card-title">추천하는 포스팅의 제목을 여기에 적으세요</span> </div> </a>

💡 레이아웃 구성 꿀팁
1. 맥락 중시: 현재 읽고 있는 내용과 연관성이 높은 글을 배치해야 클릭률이 높습니다.
2. 이미지 비율: 썸네일은 4:3 비율의 선명한 이미지를 사용하는 것이 가장 예쁩니다.
3. 간격 유지: 본문 텍스트와 카드 사이에 적절한 공백을 두어 카드가 하나의 광고처럼 느껴지지 않게 하세요.

⚠️ 주의사항
- 모바일 최적화: 위 CSS에는 모바일에서 이미지가 위로 가도록 하는 코드가 포함되어 있습니다. 반드시 직접 폰으로 접속해서 모양을 확인해 보세요.
- 링크 확인: 주소 뒤에 확장자가 없어도 연결은 되지만, 이미지 주소만큼은 반드시 .jpg 등으로 끝나는지 체크하세요.

페이지뷰를 높이는 스마트한 레이아웃, 지금 바로 적용해 보세요!