티스토리 클릭버튼, 클릭박스, 링크버튼 간단하게 만들기

[목차]

 

1. 클릭버튼(링크박스) ?

2. CSS 설정하기

3. 서식 저장하기

4. 클릭박스 추가하기

 

안녕하세요! 두부김치입니다.

 

정확한 명칭이 무엇인지 모르겠지만, 오늘은 티스토리 꾸미는 방법 중에 하나인 클릭버튼, 링크박스, 사각박스 만드는 방법에 대해서 알아보도록 하겠습니다. 

 

 

 1. 클릭버튼(링크박스)?

다른 분들의 티스토리 블로그를 구경하다 보면 마우스를 클릭박스에 가져다 놓으면 색상이 변하면서 클릭을 유도하게 하는  링크박스가 있습니다. 보통 해당 링크박스를 누르면 전면광고가 실행되는 경우가 많은데요.

 

전면광고는 적재적소에 활용하면 애드센스 수익에 많은 도움이 되니, 클릭버튼(링크박스)의 중요성은 다들 아실 겁니다.

 

만드는 방법은 CSS를 통한 사각박스스타일을 만든 다음 HTML로 CSS코드를 활성화시켜서 사각형 박스를 만드는 방법입니다.

 

 2. CSS 설정하기

 

CSS 진입은 티스토리 관리 - 꾸미기 - 스킨편집 - HTML편집 - CSS입니다.

 

아래 첨부된 파일 다운로드하셔서 메모장에서 열고 사용하시면 됩니다.

클릭박스 만들기.txt

0.00MB

 

CSS 모드 제일 하단에 붙여주세요

 

 

이렇게, CSS를 추가하시고 저장까지 완료하셨으면, 링크버튼을 만들 HTML 태그를 서식에 저장하신 후 사용하고자 할 때마다 쉽게 사용 가능하세요

 

그리고, 아시겠지만, HTML 색상은 원하시는 색깔로 변경 가능하니 참고 바랍니다.

 

 

 3. 서식 저장하기

 

서식 저장하기를 하는 이유는 매번 사용시마다 html 코드를 타이핑하기 불편하기에 서식으로 만들어서 사용할 때마다 해당 서식을 불러와서 사용하면 쉽기 때문입니다.

 

그럼, 서식은 어떻게 저장을 하는지 알아보겠습니다.

 

 

 

 서식관리 - 서식 쓰기 - HTML모드에서 아래 코드를 복사하신 후에

 

 

<a class="click-me-button" href="https://www.naver.com" target="_blank" rel="noopener"> 확인하기!! </a>

 

붙여 넣기 하신 후 저장하시면 됩니다. ("https://...." 이 부분에 이동하고자 하는 주소를 넣으시면 됩니다.)

 

 

 

 4. 링크박스 추가하기

이제 글쓰기 모드에서 링크박스를 추가하시면 됩니다.

 

 

아래 서식에서 저장된  '클릭버튼'을 선택해서 열어주시고,  글쓰기를 마치신 후 발행완료하면 됩니다.

 

 정상적으로 글을 발행 시 이렇게 클릭버튼이 보이게 됩니다.

 

정상적인 링크버튼

 

티스토리 형광펜 기능: 파일첨부, 사용방법

 

구글 애드센스 2월부터 정책 변경: CPC 0%, CPM 100%