본문 바로가기

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

폭스씨지 2024. 6. 4.

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

 

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

 

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

 

 

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천원대로 이용할 수 있는 방법

"스포티파이 가격 요금제 월 2천원대로 이용할 수 있는 방법" 스포티파이(Spotify)는 2008년 스웨덴에서 설립된 세계 최대의 음원 스트리밍 서비스입니다. 2022년 4분기 기준으로 월간 사용자 4억 8,900

foxcg.com

 

 

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

"깨끗한 바스틀리 휴지, 화장지, 각티슈(곽티슈, 갑티슈) 추천" 갑티슈는 얼굴 관리, 화장품 제거, 아기 돌봄 등 다양한 용도로 사용되는 필수품입니다.하지만, 다양한 브랜드와 종류가 출시되어

foxcg.com

 

 

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

"챗gpt 사용법 - 최신 생성형 AI ChatGPT-4o" 챗GPT는 OpenAI에서 개발한 대규모 언어 모델 챗봇으로, 인간 수준의 텍스트 생성, 언어 번역, 다양한 종류의 창작 콘텐츠 작성 등을 가능하게 합니다.챗GPT

foxcg.com

그리드형

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

댓글