[HTML을 모르는 완전 초보자용] 티스토리 블로그에 “자작 수익형 바로가기(링크) 버튼” 만들기

[HTML을 모르는 완전 초보자용] 티스토리 블로그에 “자작 수익형 바로가기(링크) 버튼” 만들기

  티스토리 블로그의 특징 중 하나가 HTML 코드를 응용해서 자신의 취향대로 꾸밀 수 있다는 것이라고 한다. 하지만 이것은 HTML 코드를 전혀 모르는 나 같은 사람에게는 가장 큰 단점이자 블로그를 운용하는 데에 계속해서 직면하는 난점이다. 글을 쓰다 보면 자연스럽게 바로가기 링크버튼을 만들어 글들을 연관된 정보의 맥락에서 연동하고 싶은데 HTML 코드를 전혀 모르는 왕초보는 선배들의 글을 따라 하려고 몇 번을 시도해 보다 결국 뒤로 물러서게 된다. HTML 코드로 링크 버튼을 만드는 방법은 코드를 다운로드하여서 HTML로 가서 복사를 하고, 글쓰기 창으로 가서 서식을 어떻게 하고... 이런 식으로 진행된다. 문제는 이렇게 진행되는 중간부터 머리가 아프고 눈이 흐려진다는 것이다. 아직 이 단계를 벗어나지 못하면 3초 만에 만들 수 있다는 바로가기 버튼을 만들지 못하고 만다.

  그래서 아잼마는 꼼수를 부렸다. 이 대신 잇몸이라고 버튼만 만들어 사용하면 되니까 모르는 HTML은 무시하고 바로가기 버튼을 그림으로 만들고, 그 그림에 링크를 연결하는 방법을 사용하고 있다. 아잼마와 같이 HTML 코드를 전혀 몰라 적응이 잘되지 않는 사람들은 HTML 코드가 돌파될 때까지 이 방법을 사용하면 어떨까 추천해 본다. 사족으로 HTML 코드를 응용해서 만든 바로가기 버튼은 HTML 코드가 어려워서 만들지 못하는 것도 있지만 모양이 별로 맘에 안 든다. 물론 내가 알아본 것들은 초보자용 바로가기 버튼 만들기라 그럴지도 모르지만... 어쨌든 그다지 맘에 들지 않아 사용하기가 그렇다. 그래서 내가 할 수 있는 꼼수를 사용한다.

1. 기본원리 : 그림에 하이퍼링크 넣기

  티스토리 블로그에는 하이퍼링크 기능이 있다. 이 기능은 글자와 그림에 링크를 연결해서 연결된 다른 웹 사이트나 HTML 문서로 이동할 수 있도록 만들어 주는 아주 편리한 기능이다. 이 기능은 글자에 만들 수 있고, 그림에도 만들 수 있다. 이 점을 이용해서 바로가기 그림을 만들고 그 그림에 링크를 만들어주면 “바로가기 링크 버튼”이 완성된다. 특히 이 기능은 수익형 블로그 운영에서 수익을 증대시키는 데에 요긴하게 사용되는 기능으로 중요성이 많다. HTML 코드에 익숙한 유저라면 “바로가기 링크 버튼”을 HTML 코드를 이용해서 만들겠지만 아잼마와 같은 왕초보 아재 블로거에게는 당장 써먹을 수 없는 방법이므로 아잼마는 그림에 하이퍼링크 넣는 방법으로 대체해서 사용하고 있다.
  하지만 이 방법에는 문제가 있다. 그것은 바로가기 링크 버튼 그림을 확보하는 것이다. 링크를 거는 것은 아주 쉽지만 링크 버튼 그림이 없으면 만들어야 하기 때문에 작업이 복잡해진다. 문제는 아잼마와 같은 아날로그 시대 아재는 요즘 젊은이들이 다루는 프로그램을 거의 모른다는 점이다. 딱 하나! 아래 한글을 초장기부터 사용해서 이것이 컴퓨터 프로그램 중에서 가장 익숙하고 잘 다루는 것이다. 그 외에 다른 프로그램, 특히 포토샵과 같은 디자인 프로그램은 다룰 줄 아는 것이 없다. 그래서 아래한글로 바로가기 링크 버튼을 만들어 사용한다. 
  하이퍼링크 만들기에 대해 보다 상세한 내용을 알고 싶다면 “티스토리 하이퍼 링크 넣기(이전 발행 글 넣기)”라는 글을 추천한다. 

2. 아래 한글의 간단한 편집 기능으로 “바로가기 링크 버튼” 만들기 

  1) 아래 한글로 테두리 있는 “바로가기 링크 버튼” 만들기

  여러 그림들을 바로가기 버튼용으로 사용해 보았는데, 지금은 가장 맘에 드는 것이 티스토리 블로그에 썸네일과 설명이 나오는 그림이 가장 보기 좋아 그것을 캡처해서 많이 사용한다. 

  ① 버튼으로 사용할 그림을 캡처해서 그림 파일로 만들고, 그 그림을 아래 한글에 삽입한다.
  이때 주의 할 것은 그림의 개체 속성을 “글 앞으로” 설정하는 것이다. 그렇게 하지 않으면 그림과 테두리용 사각형이 서로 어울리지 않는다. 

  ② 아래한글에서 [도형-직사각형]으로 직사각형 만들기
  아래 한글의 [도형-직사각형]을 클릭해서 직사각형을 만든다. 이것은 바로가기 그림의 테두리로 이용할 것이다. 필요 없다 생각하면 생략해도 된다. 

  ③ 직사각형의 선의 속성을 보기 좋게 설정해 준다. 
  선의 종류와 굵기, 색을 설정해주어 보기 좋은 테두리의 모양을 만들어 준다.

  ④ 사진과 직사각형을 잘 맞춘 후 캡처해서 버튼으로 사용할 그림을 완성한다. 

  ⑤ 버튼용으로 만든 그림을 티스토리 블로그 글쓰기 창에 불러서 링크를 연결해 주면 보기 좋은 바로가기가 완성된다.
  여기에 “▼▼ 그림을 클릭해서 바로 가기 ▼▼”라는 식의 안내 문구를 첨가해 주면 방문자들이 바로가기 버튼을 이용할 때 더 쉽고 빠르게 인식할 수 있다. 

  이때 기억해야 할 중요사항이 있다. 그림에 링크를 넣어주되, “새창으로 열기”의 체크를 반드시 없애야 한다. 그래야 바로가기를 클릭했을 때 광고창이 뜨고 애드샌스 수익이 발생한다. 

  ⑥ 이렇게 한 결과 티스토리 본문에는 아래와 같은 바로가기 버튼이 만들어진다. 

  그림을 클릭하면 연동된 글로 이동한다. 이때 창이 바뀌면서 전면광고가 나타나고 이것이 광고를 클릭한 것이 되어 애드샌드 수익이 발생하게 된다. 

  2) 바로가기 버튼을 만드는 방법의 다양한 응용

  위와 같이 바로가기 버튼을 만드는 방법은 다양하게 응용할 수 있다.

  ① 먼저는 그림에 테두리가 있는 것이 싫을 경우 배경 색이 있는 그림을 이용해서 아래와 같이 만들 수도 있다. 

  이것이 테두리 있는 그림보다 보기 좋은 것 같다. 

  ② 두 번째는 바로가기 버튼 그림을 인터넷에서 다운로드하여 사용하는 방법이다.
  아래 그림과 같은 것들을 다운받아 사용하는 방법이다. 큰 노력이 필요 없이 검색해서 이용하는 것이므로 유용한 방법이다. 그러나 딱히 맘에 드는 버튼 그림들이 찾기 어려울 경우도 많다. 아래 버튼 그림들은 글을 발행하면서 사용한 것들인데... 언제 봐도 모양이 그저 그렇다. 

 

   ③ 세 번째는 바로가기 버튼을 아래한글로 만들어 사용하는 방법이다.
  이 방법은 기존에 있는 그림을 이용해서 버튼을 만드는 방법보다 아래한글을 이용하는 기술이 많이 필요한 방법이다. 하지만 직접 만들기 때문에 그림을 받아 사용하는 것보다 나름 만족감이 상승하고, 위 그림보다는 그래도 보기 좋다. 

3. 더 좋은 방법들이 있겠지만...

  어떤 사람은 이 방법들을 보고 코웃음을 칠지 모르겠다. 불편한 방법이고, 보기도 그저 그렇기 때문이다. 하지만 아잼마와 같이 HTML 코드를 모르는 50대 완전 초보자들은 그렇지 않다. HTML 코드나 CSS로 버튼을 만드는 기술들을 익히기 전까지는 아주 유용하게 써먹을 수 있는 방법이다. 여건이 되면 아래한글로 위 그림과 같은 버튼 그림 만들기도 정리해볼까 한다.