친효애드온 : 티스토리 + 구글 블로그 본문 링크 배너 수동형 적용 방법

티스토리는 링크를 본문에 삽입 후 엔터를 누르면 해당 링크의 내용들이 자동으로 배너 스타일로 만들어집니다. 이거 하나는 참... 티스토리가 잘 해 놨어요. 사용자 편의성 부분은 오픈형 블로그 중에서는 아직까지는 티스토리가 탑이긴 합니다. 한국에서 만들었으니 뭐 당연하겠지만요. 다만 이런 티스토리도 완벽하지는 않습니다. 이따금씩 자동으로 링크 배너가 안 만들어지기도 합니다. 이유는 알 수 없지만 주로 URL 주소가 길거나 특정 사이트들이 안 되는 것 같습니다. 아마도 각 플랫폼과의 서버 통신이 원활하지 않은게 원인인 듯 해요.

아무튼! 이런 사소한 문제가 예전부터 신경이 쓰였고 어차피 구글 블로그에서도 안 되니까 그냥 둘 다 적용시킬 수 있는 수동형 링크 배너를 만들었습니다. 사용 방법도 그리 안 어렵습니다. 누구나 쉽게 따라할 수 있습니다. 스크립트 필요 없습니다. 그럼 일단 어떤 스타일인지 살펴보겠습니다.

미리보기

저의 티스토리 주소 바로가기 링크 배너를 바로 아래에 적용시켜 보았습니다.

친절한효자손 취미생활

친절한효자손이 운영하는 티스토리로 놀러오세요!

rgy0409.tistory.com

이렇게 적용됩니다. 티스토리 오리지널 크기의 절반 수준이죠. 썸네일은 4분의 1로 줄었습니다. 너무 크면 부담스럽거든요. 광고 같기도 하고요. 그럼 어떻게 적용시키는지 안내해 드리겠습니다.

코드 다운로드

먼저 아래의 HTML과 CSS 코드가 들어있는 텍스트 파일을 다운로드 받습니다.

첨부파일 (구글 드라이브)

다운로드 받은 파일을 열어보시면 HTML과 CSS 코드가 있을겁니다. 먼저 CSS 코드를 전체 선택 후 복사합니다.

CSS 세팅

복사한 CSS 코드를 스킨에 붙여넣기 합니다.

구글 블로그의 경우에는 관리자 > 테마 > 맞춤설정 오른쪽 버튼을 눌러줍니다.

HTML 편집으로 들어갑니다.

친효스킨 for 구글블로거를 기준으로 설명드립니다. 아무 곳이나 클릭 후 Ctrl+F를 눌러서 검색창을 활성화 합니다. 한글로 "커스텀" 이라고 입력하면 CSS 코드가 모인 곳을 바로 찾으실 수 있을겁니다. 적당히 공간을 확보 후 방금 복사한 CSS 코드를 그대로 붙여넣기 합니다. 그리고 오른쪽 상단의 저장 버튼을 눌러 스킨에 적용시켜줍니다. 여기까지 세팅은 완료된 것입니다. 간단하죠?

HTML 사용법

이제 사용 방법입니다. 이것도 어렵지 않습니다. 일단 첨부파일의 HTML 코드를 살펴봅시다.

1 2 3 4 5 6 7 8 9 10

<figure class="rgyArticleLink">     <a href="클릭URL" target="_blank" rel="noopener">         <div class="rgy-image" style="background-image: url('이미지URL');"></div>         <div class="rgy-text">             <p class="rgy-title">타이틀</p>             <p class="rgy-desc">대략적인 내용</p>             <p class="rgy-host">도메인.tistory.com</p>         </div>     </a> </figure> Colored by Color Scripter

cs

이런 구조일 것입니다. 일단 한글로 작성된 부분만 수정하는건 아시겠죠? 하나 하나 풀어서 설명드리겠습니다.

클릭URL : 링크 클릭 시 이동하는 URL 주소를 입력

이미지URL : 썸네일로 지정할 이미지의 URL 주소를 입력

타이틀 : 링크 제목

대략적인 내용 : 말그대로 링크의 대략적인 코멘트를 작성

도메인.tistory.com : 굳이 티스토리 아니어도 해당 링크의 대표 URL 주소를 입력

도메인URL의 경우에는 구글 블로거(Blogger)에 적용하는 경우라면 https://rgy0409.blogspot.com/ 이 될 겁니다. 제 경우라면 말이죠. 아무튼 기호에 맞게 사용하시면 됩니다.

참고로 썸네일 주소가 정상적으로 적용되어야 위의 스샷처럼 이미지가 정상적으로 출력됩니다. 만약 썸네일 주소가 올바르지 않거나 그냥 안 넣으시면 썸네일 공간이 옅은 회색으로 처리됩니다.

이렇게 수정한 HTML 코드를 모두 재복사합니다. 그리고 티스토리나 구글 블로거의 글쓰기 모드를 HTML로 변경 후 원하는 위치에 그대로 붙여넣기 하시면 됩니다. 완전 쉽죠? 본문에 대략적으로 텍스트를 입력해서 코드 삽입 위치를 표시해두면 쉽습니다.

구글 블로거의 경우 왼쪽 상단에 있는 펜 모양의 아이콘을 누릅니다.

HTML 보기 메뉴로 들어가서 이제 본문 코드 수정을 하시면 되겠습니다. 지금 이 글의 윗 부분에 미리보기에 있는 링크가 바로 이 과정을 통해 완성된 모습인 것입니다. 그럼 모두들 잘 적용해 보시기 바랍니다. 오늘 내용 끝!