• 홈
  • Uncategorized

블로그스팟에서 링크맥스 스타일 관련 포스트 위젯 구현하기

가나톡ganaTOK
가나톡ganaTOK

블로그스팟에서 링크맥스 스타일 관련 포스트 위젯 구현하기

블로그스팟에서 링크맥스 스타일의 관련 포스트 위젯을 만들고 구현하는 전체 과정을 단계별로 안내해 드리겠습니다.

1단계: 위젯 코드 준비하기

먼저 아래 코드를 복사하세요.


이 코드는 링크맥스와 유사한 관련 포스트 위젯을 만듭니다.
링크맥스 스타일 관련 포스트 위젯 코드

2단계: 위젯 추가하기 (방법 1 - HTML/JavaScript 가젯 사용)

  1. 블로그스팟/Blogger 관리자 패널로 이동
    • Blogger 계정에 로그인합니다.
    • 해당 블로그를 선택합니다.
  2. 레이아웃으로 이동
    • 왼쪽 메뉴에서 "레이아웃" 또는 "Layout"을 클릭합니다.
  3. 위젯 추가
    • 포스트 영역 아래 또는 원하는 위치에서 "가젯 추가" 또는 "Add a Gadget" 버튼을 클릭합니다.
    • 팝업 창이 뜨면 "HTML/JavaScript"를 선택합니다.
  4. 코드 삽입
    • 제목 필드에 "관련 포스트" 또는 원하는 제목을 입력합니다.
    • 콘텐츠 영역에 위의 코드를 붙여넣습니다.
    • "저장" 버튼을 클릭합니다.
  5. 레이아웃 저장
    • 레이아웃 페이지 상단의 "저장 배치" 또는 "Save arrangement" 버튼을 클릭합니다.

3단계: 위젯 추가하기 (방법 2 - 템플릿 HTML 직접 수정)

더 세밀한 제어가 필요하거나 특정 위치에 위젯을 삽입하고 싶다면:

  1. 테마 HTML 편집으로 이동
    • 왼쪽 메뉴에서 "테마" 또는 "Theme"을 클릭합니다.
    • "HTML 편집" 또는 "Edit HTML" 버튼을 클릭합니다.
    • 백업 권장 메시지가 표시되면 "계속" 또는 "Proceed"를 선택합니다.
  2. 위젯 삽입 위치 찾기
    • Ctrl+F 또는 Cmd+F를 사용하여 찾기 기능을 엽니다.
    • <data:post.body/> 또는 <div class='post-body'> 등의 포스트 본문 관련 코드를 검색합니다.
    • 포스트 본문이 끝나는 위치 바로 다음에 위젯 코드를 삽입할 준비를 합니다.
  3. 코드 삽입
    • 찾은 위치에 위의 코드를 붙여넣습니다.
    • 템플릿 구조에 따라 약간의 수정이 필요할 수 있습니다.
  4. 변경사항 저장
    • "변경사항 저장" 또는 "Save changes" 버튼을 클릭합니다.

4단계: 커스터마이징

위젯 코드에서 다음 매개변수를 수정하여 기능을 원하는 대로 조정할 수 있습니다:

javascript
var maxPosts =5;// 표시할 관련 포스트 수var maxTitleLength =60;// 제목 길이 제한var showThumbnail =true;// 썸네일 표시 여부var showSummary =true;// 요약 표시 여부var summaryLength =100;// 요약 길이 제한var defaultThumbnail ="https://...";// 기본 썸네일 URL

CSS 부분을 수정하여 색상, 폰트, 간격 등의 스타일도 변경할 수 있습니다.

5단계: 테스트 및 확인

  1. 블로그의 포스트 페이지로 이동하여 위젯이 제대로 표시되는지 확인합니다.
  2. 여러 포스트에서 테스트하여 관련 포스트가 올바르게 표시되는지 확인합니다.
  3. 모바일 장치에서도 테스트하여 반응형 디자인이 제대로 작동하는지 확인합니다.

문제 해결

  • 위젯이 표시되지 않는 경우: 코드가 올바르게 삽입되었는지, 포스트 페이지에서만 확인하고 있는지 확인합니다.
  • 관련 포스트가 없는 경우: 블로그에 같은 라벨(태그)을 가진 다른 포스트가 있는지 확인합니다.
  • 디자인 문제: CSS를 수정하여 블로그 테마와 일치하도록 조정합니다.

이 과정을 통해 블로그스팟에 링크맥스 스타일의 관련 포스트 위젯을 성공적으로 구현할 수 있습니다. 필요에 따라 코드를 수정하여 더 많은 기능을 추가할 수도 있습니다.

처음으로

댓글 쓰기