티스토리 버튼을 쉽게 만드는 방법

티스토리에서는 서식을 이용하여 HTML/CSS로 버튼을 만든 다음, 글을 작성할 때 서식에서 버튼을 불러와서 편집할 수 있습니다. 제 티스토리 블로그에서는 이 방법을 이용하고 있습니다. 하지만 서식을 이용하여 버튼을 추가할 때 버튼 레이아웃이 깨진다고 호소하는 사용자들이 계십니다. 특히 버튼을 복사하여 붙여넣기 하면 CSS 클래스가 사라지면서 버튼 스타일이 엉망이 됩니다.

보다 간단한 방법으로 [버튼 이름|링크 텍스트|링크 URL] 형식으로 버튼을 추가하는 방법을 소개해드리겠습니다.

티스토리 버튼을 쉽게 만들어 삽입하는 방법

워드프레스에서는 블록 에디터를 사용하여 쉽게 버튼을 만들고, CSS 클래스를 지정하여 버튼 스타일을 입맛에 맞게 꾸밀 수 있습니다. 워드프레스 버튼 만들기에 대한 자세한 내용은 다음 글을 참고해보세요.

티스토리에서는 HTML/CSS를 사용하여 버튼을 만들어서 서식으로 저장한 다음, 서식에서 버튼을 불러올 수 있습니다.

보다 간단히 버튼을 만드는 방법으로 다음과 같은 형식으로 입력하면 해당 스타일의 버튼이 표시되도록 하는 것을 고려할 수 있습니다.

[버튼1|링크 텍스트|URL]

[버튼2|링크 텍스트|URL]

최종적으로 다음과 같은 버튼이 표시되는 방법을 살펴보겠습니다. 색상 등 스타일은 자유롭게 커스텀할 수 있습니다.

1 티스토리에 로그인한 다음, 꾸미기 » 스킨 편집을 클릭하여 스킨 편집 화면을 표시합니다. html 편집 버튼을 클릭합니다.

2 HTML 탭에서 하단으로 스크롤한 다음 </body> 바로 위에 다음 자바스크립트(JavaScript) 코드를 입력합니다.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
	const paragraphs = document.querySelectorAll('p');

	paragraphs.forEach(paragraph => {
		const button1Regex = /\[버튼1\|([^\|]+)\|([^\]]+)\]/;
		const button2Regex = /\[버튼2\|([^\|]+)\|([^\]]+)\]/;

		if (button1Matches = paragraph.innerHTML.match(button1Regex)) {
			const linkText = button1Matches[1];
			const url = button1Matches[2];
			paragraph.innerHTML = `<a class="myButton1" title="바로가기" href="${url}">${linkText}</a>`;
		} else if (button2Matches = paragraph.innerHTML.match(button2Regex)) {
			const linkText = button2Matches[1];
			const url = button2Matches[2];
			paragraph.innerHTML = `<a class="myButton2" title="바로가기" href="${url}">${linkText}</a>`;
		}
	});
});
</script>

코드를 입력한 후에 상단의 적용 버튼을 클릭하여 수정 사항을 적용합니다.

새 탭에서 링크가 표시되도록 하려면 <a class="myButton2"...>의 적당한 곳에 target="_blank"를 추가하면 됩니다.

그림으로 살펴보면 다음과 같이 추가하면 됩니다.

3 상단의 CSS 탭을 클릭하고 맨 아래에 다음과 같은 CSS 코드를 입력합니다.

/* 버튼 */
/* 레드 색상 계열 버튼 */
.myButton1 {
	display: inline-block;
	background: linear-gradient(135deg, #ff8a80 0%, #e57373 100%);
	background-color: #ff8a80;
	border: none;
	line-height: 1.5;
	color: white !important;
	text-align: center;
	font-size: 22px;
	width: 100%;
	padding: 20px 0;
	border-radius: 30px;
	transition: all 0.4s ease;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.myButton1 {
		font-size: 16px;
		padding: 15px 0;
		width: 90%;
	}
}

.myButton1:hover {
	background: linear-gradient(135deg, #e57373 0%, #ff8a80 100%);
	background-color: #e57373;
	color: #ffffff !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 블루 색상 계열 버튼 */
.myButton2 {
	display: inline-block;
	background: linear-gradient(135deg, #68bfe6 0%, #4fa3cf 100%);
	background-color: #68bfe6;
	border: none;
	line-height: 1.5;
	color: white !important;
	text-align: center;
	font-size: 22px;
	width: 100%;
	padding: 20px 0;
	border-radius: 30px;
	transition: all 0.4s ease;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.myButton2 {
		font-size: 16px;
		padding: 15px 0;
		width: 90%;
	}
}

.myButton2:hover {
	background: linear-gradient(135deg, #4fa3cf 0%, #68bfe6 100%);
	background-color: #4fa3cf;
	color: #ffffff !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

CSS 탭은 HTML 탭 바로 오른쪽에 위치해 있습니다.

마찬가지로 CSS 코드를 입력한 후에 상단의 적용 버튼을 클릭하여 변경 사항을 저장합니다.

CSS 스타일은 자유롭게 커스텀할 수 있습니다. 기본적인 CSS를 이행하면 도움이 될 것입니다. 버튼 스타일을 변경하고 싶은 경우 아래의 "버튼 생성기로 맞춤형 버튼 만들기" 섹션을 참고하세요.

1~3단계는 한 번만 진행하면 됩니다.

4 이제 글을 작성할 때 버튼을 넣을 곳에 다음과 같은 형식으로 버튼을 추가할 수 있습니다. 새로운 문단(Paragraph)에서 버튼을 추가해야 합니다.

테스트하여 버튼이 잘 표시되는지 체크해보시기 바랍니다. 개별 문단(단락)에서 버튼을 추가해야 하며, 그렇지 않으면 버튼이 표시되지 않습니다. (엔터를 치면 새로운 문단이 만들어집니다.)

티스토리 기본 스킨 중 하나인 Odyssey(오디세이) 스킨에서 테스트했으며 다른 스킨에서도 잘 작동하리라 생각됩니다.

버튼을 추가하는 텍스트를 입력하는 것이 번거로운 경우 상용구 프로그램을 사용하여 [버튼1|...] 텍스트를 상용구로 지정하여 빠르게 불러올 수 있습니다.

• 무료 상용구 프로그램 BeefText

버튼 생성기로 맞춤형 버튼 만들기

온라인 무료 버튼 생성기 사이트를 이용하면 맞춤형 버튼을 쉽게 만들 수 있습니다.

버튼 스타일을 선택하고, 컬러 등 스타일을 적절히 변경한 다음, Get Code(코드 가져오기) 버튼을 클릭하면 버튼 코드가 생성됩니다.

제시된 CSS 코드로 대체할 수 있습니다. CSS 클래스명은 적절히 변경하세요.

다른 방법으로 챗GPT에 원하는 버튼 스타일을 요청하면 만들어줍니다. 만족하지 않으면 만족스러운 버튼이 생성될 때까지 요청할 수 있습니다.😄

티스토리 블로그를 재활용하여 워드프레스에서 애드센스 승인 받기

티스토리는 자체 광고를 도입하여 광고 수익의 절반 이상을 카카오에서 가져갑니다. 저는 자체 광고 도입 이후 티스토리에서 광고를 제거했습니다.

티스토리를 워드프레스 옮기는 사용자들도 계십니다.

• 티스토리 백업 파일을 이용하여 워드프레스로 이사하기 (업데이트)

티스토리 블로그 글을 워드프레스로 옮겨 플러그인을 사용하여 챗GPT로 글을 수정하여 재활용하는 것도 가능합니다.

• 티스토리 블로그를 재활용한 워드프레스 애드센스 승인 후기

참고

• 웹 스크래핑 플러그인으로 티스토리에서 워드프레스로 이전하기
• 구글 검색 알고리즘 문서 유출 및 주요 내용 (+ 유출된 문서 URL)
• 워드프레스 Brave 플러그인: 팝업 닫기 버튼 지연 로드 및 카운트다운 타이머 표시