티스토리 블로그에서 버튼 만들기

 

티스토리 블로그에서 버튼을 생성하는 방법을 알려드리겠습니다. 

블로그에서는 버튼의 디자인이 클릭율에 영향을 미칠 수 있으며, 좋은 디자인은 사용자에게 명확한 안내를 제공하고, 원하는 액션을 취하기 쉽게 만듭니다. 버튼을 명확하고 눈에 띄게 만들면 버튼 클릭율을 높일 수 있고, 이는 우리의 높은 수익율로 이어질 수 있습니다. 

아래의 내용을 차근차근 따라와주세요! 

 

 

글 작성 창에서 스타일 적용하기 

HTML 코드에서 버튼 출력하기 

1. 블로그 컨텐츠를 작성할 때, HTML 모드로 전환하여 아래의 코드를 입력합니다. 

2. "바로가기"라는 텍스트를 원하는 형태로 수정하실 수 있습니다. 

<!-- button-like라는 클래스를 가진 앵커(링크)를 생성합니다 -->
<a href="#" class="button-like"> 바로가기 </a>

 

아래의 파일을 다운받아, 복사&붙여넣기 해주세요. 

html.txt

0.00MB

 

티스토리 테마에 CSS 적용하기 

1. 티스토리 대시보드로 이동한 후 '꾸미기'>'스킨 편집>HTML편집'으로 갑니다. 

 

2. 'CSS' 를 클릭하고, 코드의 맨 아래영역에서 마지막 "}" 직전에 아래의 코드를 입력합니다. 

 

 

/* `<a>` 태그에 적용될 'button-like' 클래스를 정의합니다. */
.button-like {
  display: inline-block;  /* 요소를 인라인 블록 형태로 만듭니다. 텍스트처럼 배치되면서 블록처럼 크기를 설정할 수 있습니다. */
  padding: 10px 20px;  /* 요소 내부의 상하좌우 여백을 설정합니다. 상하는 10px, 좌우는 20px입니다. */
  font-size: 16px;  /* 텍스트의 크기를 숫자로 설정합니다. */
  text-align: center;  /* 텍스트를 중앙으로 정렬합니다. */
  cursor: pointer;  /* 마우스 커서가 요소 위에 있을 때 '손가락' 모양으로 표시됩니다. */
  text-decoration: none;  /* 텍스트 밑줄을 제거합니다. */
  color: #fff;  /* 텍스트 색상을 흰색(#FFFFFF)으로 설정합니다. */
  background-color: #4CAF50;  /* 배경 색상을설정합니다. */
  border-radius: 4px;  /* 요소의 모서리를 둥글게 만듭니다. 둥근 정도는 숫자로 조절합니다. */
}

/* 'button-like' 클래스가 적용된 요소에 마우스를 올렸을 때의 스타일을 정의합니다. */
.button-like:hover {
  background-color: #45a049;  /* 마우스 오버시 배경 색상을 변경합니다. */
}

아래의 파일을 다운받아, 복사&붙여넣기 해주세요. 

css.txt

0.00MB

 

 

이렇게 하면 블로그의 모든 페이지에서 이 스타일을 사용할 수 있습니다. 

모두 원활한 블로그 운영하시길 바랍니다.