클릭률 높이는 티스토리 링크 버튼 1분만에 만드는 방법

오늘은 클릭률을 높일 수 있는 티스토리 링크 버튼 만드는 방법에 대해 알아보겠습니다. 애드센스 하시는 분들이라면 많이 아실텐데 CTR, CPC 가 높아져야 애드센스 수익이 많아집니다. 오늘 알려드리는 버튼을 잘 만들어보시면 클릭률이 높아지는데 효과를 보실 수 있을거에요. 쉬우니까 잘 따라하셔서 애드센스 하실 때 수익 높아지셨으면 좋겠습니다.

※목차

css button generator 홈페이지

링크 버튼 만드는 방법

티스토리 버튼 서식 적용하는 방법

css button generator 홈페이지

먼저 티스토리 링크 버튼을 만들기 위해서 css button generator 홈페이지에 접속하셔야 합니다. 검색창에 css button gerator 을 검색하시거나 아래 링크 버튼을 통하여 쉽게 접속하실 수 있습니다.

버튼 생성 사이트 바로가기

링크 버튼 만드는 방법

위에 보시는 버튼이 저희가 만들려는 버튼 모양입니다. ㅎㅎ 애드센스를 하실 때는 가독성 있는 블로그를 만드셔야 수익이 높아집니다.

처음 홈페이지에 접속하신 다음에 왼쪽에 예시 버튼들이 많은데 여기서 원하시는 버튼을 누르시면 됩니다. 그리고 버튼들을 자신이 원하는데로 수정이 가능합니다.

오른쪽에 버튼에 들어갈 텍스트, 글씨 크기 등 원하시는데로 수정하시면 됩니다.

버튼 예시 이미지 아래에 색상 박스를 눌러보시면 원하시는 색상으로 변경하실 수 있습니다. 버튼 배경색, 마우스를 버튼에 가져갔을 때 변하는 색, 폰트 색상 등 원하시는 스타일로 바꾸시면 됩니다.

원하시는 버튼을 만드신 후 get code를 눌러주시면 오른쪽에 html 코드가 나옵니다.

여기까지 하셨으면 버튼 생성은 완료이고 이걸 티스토리에 적용시켜야 합니다.

티스토리 버튼 서식 적용하는 방법

다음으로 만든 버튼을 티스토리에 적용하는 방법을 알아보겠습니다.

위에서 복사했던 코드 중 제일 위에

<a href="#" class="myButton">버튼 생성 사이트 바로가기</a>

위 코드를 제외하 밑에 있는 코드 만 복사해줍니다.

.myButton {
	background-color:#d91c68;
	border-radius:28px;
	border:1px solid #d420d4;
	display:inline-block;
	cursor:pointer;
	color:#fafafa;
	font-family:Arial;
	font-size:16px;
	padding:20px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #4e57bd;
}
.myButton:hover {
	background-color:#f59a11;
}
.myButton:active {
	position:relative;
	top:1px;
}

위 코드를 복사하신 후 티스토리로 들어와줍니다.