티스토리 링크 버튼 만드는 방법

 

링크 버튼 만드는 방법 따라하기

1. 티스토리 로그인 후 Q눌러서 설정 화면 이동 > 좌측 사이드 "스킨편집" 클릭

 

2. 우측 "html편집" 클릭 후 "CSS" 클릭

 

3. 우측 CSS 입력창에 아래 내용 붙혀넣기 후 적용 

.myButton {
box-shadow: 0px 0px 0px 2px #9fb4f2;
background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
background-color:#7892c2;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:12px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
.myButton:hover {
background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
background-color:#476e9e;
}
.myButton:active {
position:relative;
top:1px;
}
 
 
@media only screen and (max-width: 600px) {
  .myButton {
    font-size: 20px; /* Decreases font size for mobile devices */
width: 90%; /* Set width to 90% */
height: 60px; /* Adjust the height value as needed */
  }
}

 

4. 티스토리 설정 화면에서 좌측 사이드바 "서식 관리"클릭 > "서식 쓰기" 클릭

 

5. 제목 "버튼", 우측 "기본모드"를 "HTML"로 변경 후 아래 내용 입력 후 다시 "기본모드"로 변경하면 페이지에 버튼 창이 하나 생성됨. 확인 되었으면 저장.

<p style="text-align: center;" data-ke-size="size16"><a href="링크"><button class="myButton">버튼</button></a></p>

 

6. 글쓰기 들어간 후 우측 점3개 클릭하여 서식 클릭해서 위에서 저장했던 "버튼" 클릭

 

7. 마지막! 원하는 링크 및 이름으로 변경하는 2가지 방법

 a) HTML을 눌러서 내가 원하는 이름과 링크로 변경하면 된다.

<a href="링크"><button class="myButton">버튼</button></a></p>
<a href="https://karinvestment.tistory.com/"><button class="myButton">카르노트 바로가기</button></a></p>
링크에는 페이지가 이동할 주소를 적어주고 링크텍스트는 버튼의 이름을 적어준다.

 b) 서식에서 불러온 버튼 클릭 후 이름 변경 및 우측상단 첨부링크 변경.