본문 바로가기

티스토리 CSS 버튼 만들기(초보자 바로가기)

by 후찌니

CSS 버튼 제작 (초보자)

버튼을 만드는 이유

애드센스 광고는 다양한 종류가 있어요. 이 광고들은 웹사이트나 블로그에 넣을 때, 사용자들이 쉽게 클릭할 수 있게 여러 가지 방법으로 배치할 수 있어요. 예를 들면, 글 내용에 자동으로 넣거나, 수동으로 넣을 수도 있고, 인피드(글 피드), 사이드(옆), 일치하는 콘텐츠와 관련된 광고, 목록 형태의 광고, 그리고 화면 전체를 가득 채우는 전면 광고 등이 있어요.

이렇게 다양한 광고 형태를 사용하면 수익을 다양하게 얻을 수 있어요. 그중에서도 가장 많은 클릭을 받는 것은 글 내용 위에 표시되는 디스플레이 광고인데, 하지만 전면 광고도 무시할 수 없는 클릭을 받아요. 전체 수익에서도 전면 광고가 중요한 역할을 합니다. 티스토리를 시작하는 초보자에게는 전면 광고가 제일 중요하답니다.

 

전면광고 유도 버튼

전면 광고는 블로그에서 다른 페이지로 가기 위해 링크를 클릭할 때 뜨는 광고에요. 이 광고는 특별한 점이 있는데요, 바로 화면 전환하기 전에 화면을 꽉 채우는 광고라서 검색하는 사람이 한 번에 광고를 잘 볼 수 있어요. 그래서 사람들이 광고를 클릭할 확률이 높아져요.

일반적으로, 이 광고를 사용할 때는 글 내용 안에 있는 링크를 클릭하지 않고 블로그에서 떠나지 않도록 하려고 할 때 사용돼요. 그리고 광고를 띄울 때는 텍스트 링크 대신에 예쁜 버튼을 사용하면 더 많은 사람들이 광고를 클릭할 수 있어요.

 

티스토리 블로그에서 내부 링크를 더 눈에 띄게 만들기 위해서는 텍스트 대신 버튼 모양을 사용하는 것이 좋아요. 버튼 형식의 링크를 사용하면 블로그가 더 깔끔해 보이고, 더 많은 사람들이 클릭할 확률이 높아져요. 이렇게 하면 광고 수익도 더 많이 얻을 수 있어요. 초보자도 가능하니 꽉 잡고 따라오세요!

 

티스토리 광고 최적화 방법 바로가기

 

 

버튼제작 1단계

일단 가장 먼저 할일은 우리가 원하는 버튼을 만들어야겠지요!

다음의 사이트로 이동하셔서 원하시는 모양의 버튼을 만드세요!

https://www.bestcssbuttongenerator.com/

 

원하시는 디자인이 완료되었다면 위에 보이시는 Get Code를 눌러주세요!

그러면 우측에 다음과 같이 코드가 생성될 거예요!!

 

위의 코드를 살펴보시면, 빨간색 박스 부분과, 파란색 박스 부분이 있습니다.

파란색이 CSS 코드에 삽입할 부분이에요.

빨간색은 서식에 삽입할 부분이고요.

이게 다 되었습니다.

어려워하지 마시고 조금만 더 가보자고요~~

 

 

버튼제작 2단계

다음으로는 티스토리의 사용자 설정의 스킨편집으로 들어가 주세요.

우측에 보시면 HTML편집을 눌러주시고 CSS탭으로 이동합니다.~!

아무것도 건들지 마시고 제일 아래쪽으로 이동하세요!! 쭉쭉!!

그리고 아까 만들어 놓은 버튼의 코드를 복사하여 붙여 넣습니다.

저의 경우에는 3145행에서 3167행까지 작성이 되었네요!

그리고 적용 버튼 누르시면 1단계 완료!!

 

 

버튼제작 3단계

이제 서식코드를 넣어볼게요.

서식코드를 쉽게 설명드리면 만들어 놓은 버튼 코드를 바로바로 불러와서 쓰기 위한 작업입니다.!

매번 할 때 마다 코드를 붙여 넣기 할 수는 없으니까요~

티스토리 설정메뉴에서 "서식관리> 서식 쓰기"로 이동해 주세요.

그러면 글쓰기 창이 나오는데 HTML모드로 변경해 주세요!

 

그리고 안에 들어가서 제목을 작성해 주시고요~ 저는 "링크 버튼(빨간색)"이라고 썼습니다.

그리고 내용에는 아까 버튼 만들고 코드 나온 부분 중에서 빨간색 부분을 복사해서 붙여 넣기 합니다.

그러고 나서 미리 보기를 눌러보세요~

그러면 이렇게 잘 버튼이 만들어진 것이 보입니다!!

 

그럼 이제 사용방법을 알아볼까요?

글쓰기를 다시 눌러주세요!

그리고 메뉴 중에 "점점점"을 눌러주시고 서식에 들어가 보세요.

 

짜잔~

우리가 함께 만든 버튼 서식이 잘 들어가 있네요!!

여기서 중요한 부분입니다.

"#"  이곳에다가 원하시는 링크를 넣으시면 됩니다.

그러면 버튼을 누르자마자 링크로 순간이동~ 뿅~

 

그럼 저도 이만 뿅~~

감사힙니다!!

 

 

 

티스토리 날짜 지우기(삭제)

티스토리의 북클럽 스킨에서 글 작성 일자를 삭제해서 지우거나 안보이도록 숨기는 방법에 대해 알아보겠습니다. 작성일자가 오래된 글은 아무래도 검색하는 사람들이 오래된 블로그라고 생각

onelucky.tistory.com

 

도움이 되는 글

2023.09.01 - [정보무엇?] - 티스토리 링크 버튼 만들기(Feat.. 다운로드 버튼 공유)

2023.08.30 - [IT 무엇?] - 티스토리 모바일웹 자동연결 해제

2020.01.29 - [IT 무엇?] - 티스토리 구글 노출 하기

2023.09.09 - [정보무엇?] - 티스토리 저품질 피하기 전략 및 비틀리(bitly) 활용법

2023.09.15 - [IT 무엇?] - 티스토리 버튼 만들기(초보자 바로가기)