티스토리 초기 셋팅 수익형 버튼 적용하기, 버튼 디자인 생성 사이트

티스토리 블로그를 시작한 블로거라면 수익형 버튼 설정에 관심이 많으실 겁니다.

이 글에서는 티스토리에 간단히 버튼을 적용하는 방법을 자세히 알려드리겠습니다.

당연히 티스토리 에드센스 승인을 받고 진행해야 의미가 있겠죠?

---

# 티스토리 수익형 버튼 적용 방법

이 글을 끝까지 따라 해본다면, 아래 사진과 같은 버튼을 본인의 글에 적용할 수 있습니다.

버튼 적용 샘플 사진

 

1. 티스토리 관리자 홈 > 왼쪽 메뉴 꾸미기 > 스킨 편집 화면으로 이동

 

 

2. html 편집 버튼 클릭 후, CSS 버튼 클릭

 

3. 구분하기 쉽게 맨 아래에 CSS 코드 복사 붙여 넣기

 

/*커스텀 링크 버튼*/
.myButton {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:5px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:19px;
	font-weight:bold;
	padding:12px 60px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}

 

4. 화면 사이즈별로 잘 적용됐는지 확인하고 상단에 적용 버튼 클릭

 

여기까지 했다면 다 한 겁니다! 이제 원하는 글에 버튼만 넣으면 되거든요(●ˇ∀ˇ●)

 

5. 글 작성 > 기본모드 > HTML 모드로 변경

 

6. 당황하지 않고! 본인이 원하는 부분을 찾아 그곳에 HTML 버튼 소스 복사 붙여 넣기

<div style="text-align: center;">
	<a href="https://www.naver.com/">
    <button class="myButton" role="button">
    	<span class="text">버튼 테스트</span>
	</button>
	</a>
</div>

내가 원하는 곳을 찾아 HTML 소스를 적용하는 게 어렵다면 우선 빈 글에 버튼만 추가해 본 후 잘 적용되는 것부터 확인하는 게 좋을 것 같아요.

또는 CTRL + F (찾기) 기능을 통해 본인이 적용하고자 하는 위치에 임의의 글을 적어서 찾아서 넣는 것도 방법입니다!

 

7. 미리보기 또는 글 발행 후 잘 적용됐는지 확인하기

기본모드에서는 편집을 할 수 있는 상태라 디자인이 적용돼서 보이지 않으니 참고하세요!  

 

여기까지 잘 따라와 네이버로 이동하는 버튼이 적용되었나요? 축하드립니다\^o^/ 

본인이 원하는 링크와 제목을 바꾸기 위해선 2곳만 수정하면 됩니다!

① href 속성의 값을 원하는 url로 변경한다.

<a href="https://www.naver.com/"><button class="myButton" role="button">

② span 태그 안에 있는 텍스트를 변경한다.

<span class="text">버튼 테스트</span>

---

만약 색상이나 글자 크기를 조절하고 싶다면 직접 CSS를 공부해서 수정해도 OK!

저는 디자인 감각이 💩이라 아래 사이트를 통해 버튼 디자인을 골라 적용했더니 훨씬 좋네요ㅋㅋㅋ

"Button Generator"사이트인데 이미 디자인된 버튼이 여러 개 있어 그중에 마음에 드는 걸 골라 바로 CSS소스를 뽑아 올 수 있었습니다!

 

 

 

티스토리 무료 버튼 디자인 사이트 4가지 (그 외 개발자, 기획자도 사용 가능)