링크 버튼 만들기 - 티스토리 블로그

"링크 버튼 만들기 - 티스토리 블로그"

 

티스토리 블로그에 링크버튼을 만드는 것은 사용자에게 주목을 끄는 효과와 버튼 클릭을 유도하는 중요한 디자인요소입니다.

 

링크 버튼 만들기 - 티스토리 블로그

 

 

html과 css를 활용하면 버튼을 생성할 수 있지만, 초보자들을 위하여 손쉽게 적용하는 방법 위주로 설명드리겠습니다.

 

css 코드 다운로드

아래의 코드를 복사하거나 첨부되는 css 코드를 다운로드합니다.

 

/* 버튼 디자인 */
.myButton {
	box-shadow:inset 0px 3px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:36px;
	border:3px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size:27px;
	font-weight:bold;
	padding:12px 200px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffee66;
    text-align:center;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}

 

버튼디자인.txt

0.00MB

 

티스토리 블로그 스킨편집

티스토리 블로그의 관리 페이지에서 '꾸미기 - 스킨편집'으로 이동합니다.

 

 

 

스킨편집 창에서 아래와 같이 html 편집 버튼을 누릅니다.

 

 

CSS 붙여 넣기

복사한 css 코드를 css 탭으로 이동하여 맨 하단에 붙여 넣기 합니다.

 

 

우측 상단의 '적용'을 눌러 저장합니다.

 

버튼 서식 만들기

매번 html 코드를 입력하는 작업이 번거로우므로 서식으로 지정을 하면 편리하게 버튼을 사용할 수 있습니다.

 

'콘텐츠 - 서식관리'를 눌러 서식관리메뉴로 이동합니다.

 

 

아래와 같이 html 모드로 변경을 한 후 html 코드를 삽입합니다.

 

 

<center><a href="#" class="myButton" target="_self">링크버튼 만들기 바로가기</a></center>

 

 

버튼 사용하기

이제 티스토리 글쓰기 에디터에서 바로 버튼을 삽입할 수 있습니다.

 

글쓰기에서 상단의 더 보기 ( ••• )를 눌러서 '서식'을 선택합니다.

 

 

만들어 둔 '링크 버튼'을 선택하면 본문에 링크버튼을 삽입할 수 있습니다.

 

 

 

링크버튼 만들기 바로가기

 

(실제 위의 버튼은 위에서 설명한 css 를 이용한 버튼입니다.)

 

 

 

이제, 에디터에서 링크를 수정하면 됩니다.

 

오늘은 누구나 편리하게 티스토리 블로그에서 링크버튼을 사용할 수 있는 요령을 알아보았습니다.

유용하게 사용하시기 바랍니다.

 

 

 

스포티파이 가격 요금제 월 2천원대로 이용할 수 있는 방법

 

깨끗한 바스틀리 휴지, 화장지, 각티슈(곽티슈, 갑티슈) 추천

 

챗gpt 사용법 - 최신 생성형 AI ChatGPT-4o