[티스토리 수익 상승] CSS 링크버튼 간단히 만들기

 

1. CSS 링크버튼이 필요한 이유

블로그나 웹사이트를 방문할 때, 우리는 종종 다양한 버튼들을 마주하게 된다. '구매하기', '더 보기', '가입하기' '바로가기' 등의 링크버튼들이 사용자로 하여금 웹사이트를 더 쉽게 이용기도 하지만 수익 상승과도 연관이 크다는 건 잘 알려진 팩트이다!

 

CSS-링크버튼-티스토리

 

CSS를 이용한 버튼은 단순히 클릭을 유도하여 수익과 연결되는 것 이상의 의미도 가지고 있다는 의미입니다. 그것은 사용자 경험을 향상시키고, 브랜드의 일관성을 유지하며, 작업의 효율성을 높이고, 다양한 화면 크기와 장치에 대응하는 디자인을 제공하는 역할을 합니다.

그러면, CSS 버튼이 왜 이렇게 중요한지를 알아봤고, 이번 글에서는 CSS 링크버튼을 가장 쉽게 간단히 만드는 방법에 대해 자세히 알아보도록 하겠습니다.

2. CSS 버튼 생성 방법

CSS 링크버튼을 만드는 가장 쉬운 방법중 하나는, 맞춤형 버튼 생성을 쉽게 도와주는 다음의 'Best Button Generator' 사이트를 통해 만들면 간단히 해결된다!

 

Best Button Generator 바로가기

Best Button Generator 사이트

'Best Button Generator'를 간략히 소개하면, 사용자가 링크버튼의 텍스트, 색상, 크기, 모양 등을 선택하여 티스토리나 워드프레스 같은 자신의 웹사이트나 블로그에 맞는 버튼을 쉽게 만들 수 있게 도와주는 툴이다. 이 사이트에서 HTML 또는 CSS 코드로 만들어진 버튼은 코드를 가져와 자신의 웹사이트상에 쉽게 적용할 수 있다.

 

2.1 Best Button Generator HTML 및 CSS 코드 가져오기

Best Button Generator로 접속했다면, 다음 세가지 단계를 그대로 따라만 하면 된다.

Best-Button-Generator

 

a. 왼쪽 샘플의 버튼을 선택한다.

b. 중앙에 미리보기 이미지가 보이면 1. 'Get Code'를 클릭한다.

c. 맨 오른쪽에 자신의 사이트에 적용할 출력된 코드를 copy 한다. (아래 예제 코드를 복사 & 붙여 넣기)

 

css-button.txt

0.00MB

 

2.2 링크 버튼코드 블로그 CSS에 붙여 넣기

티스토리의 예를 들면, 티스토리 관리의 HTML 편집 -  CSS로 들어가서 코드의 맨 아랫부분에 복사해 온 링크버튼 코드를 붙여넣는다. 복사해온 코드에서 다음의 2. CSS 적용 부분만 넣어주면 된다. ('1. HTML 적용' 코드는 실제 포스팅할때 HTML 편집에서 사용하는 코드이다.)

CSS-링크버튼

 

★ 여기서 중요한 팁!

복사해온 CSS 버튼코드의 폰트 color부분에서 마지막에 "!important"를 직접 넣어줘야 한다! 만약 넣지 않으면 CSS 버튼 폰트 생상이 Best Button Generator 사이트의 미리 보기에서 본 폰트 생상과 다르게 보이기에 빠뜨리지 말고 넣어줘야 한다!

CSS

 

2.3 서식 만들기

이후 CSS의 링크버튼을 해당 포스팅에서 서식으로 만들어 두면 포스팅할 때 편하게 사용할 수 있다. CSS 버튼이란 제목으로 Button Generator 사이트에서 생성한 HTML 코드 부분만 복사해서 기본모드를 HTML로 변경 후 붙여 넣기 한다.

 

CSS-버튼

 

CSS-버튼

서식 만들기 완료를 누른 후, 글쓰기에서 적용하고 싶은 부분에 'CSS 버튼' 서식을 넣는다. 여기서 끝난 게 아니다!

다음으로 링크를 넣어줘야 하는데, 티스토리의 경우 툴 상단에 위치하는 'insert/edit link'로 넣으며 html 코드가 변경이 되어 안된다! 따라서 조금 번거롭지만 HTML모드로 들어가서 다음처럼 넣고 싶은 링크를 직접 넣어줘야 한다.

 

<p style="text-align: center;" data-ke-size="size16"><a class="myButton" href="https://freernd.tistory.com">누워서 코딩 바로가기</a></p>

 

 

링크 코드를 직접 넣은 후, 아래처럼 'Button Generator'에서 예제로 생성한 CSS 링크버튼이 정상적으로 출력되는 걸 확인할 수 있다.

 

누워서 코딩 바로가기

 

▼ 함께 보면 좋은 글

티스토리 자동 목차 생성 방법

pdf jpg 변환 프로그램 간단 코딩 방법 by 파이썬