티스토리 블로그에 박스없이 깜박이는 텍스트 링크 버튼 추가하기

 

안녕하세요! 오늘은 티스토리 블로그를 더 매력적으로 만들 수 있는 간단한 팁을 소개해드리려고 합니다. 바로 박스없이 깜박이는 텍스트 링크 버튼을 추가하는 방법인데요, 이 버튼은 방문자의 시선을 끌고 중요한 콘텐츠나 페이지로 쉽게 안내할 수 있습니다.

 

CONTENTS ▶

1. 깜박이는 텍스트 링크 버튼이란?

깜박이는 텍스트 링크 버튼은 일반 텍스트와 달리 주기적으로 깜박여서 시선을 끌며, 클릭 시 지정한 URL로 이동하는 기능을 가진 텍스트입니다. 박스형 버튼과 달리 텍스트만 표시되어 블로그의 디자인을 해치지 않으면서도 주목도를 높일 수 있습니다.

버튼 텍스트

 

2. 박스없이 깜박이는 텍스트 링크 버튼 추가하기

티스토리 블로그에 이 기능을 추가하는 방법은 생각보다 간단합니다. HTML과 CSS 코드 몇 줄만 추가하면 됩니다.

1) HTML 편집 모드로 전환하기

먼저 티스토리 글 작성 화면에서 HTML 편집 모드로 전환합니다. 에디터 우측 상단에 있는 기본모드 아이콘을 클릭하면 HTML 편집 모드가 보입니다. HTML 편집 모드 클릭.

2) 코드 붙여넣기

아래 코드를 복사하여 HTML 편집기내 원하는 위치에 붙여넣습니다.

 

박스없이 깜박이는 텍스트 링크 버튼.txt

0.00MB

 

 

3) 코드 수정하기

코드에서 다음 부분을 원하는 대로 수정합니다:

• https://example.com: 클릭 시 이동할 URL 주소
• 여기를 클릭하세요: 표시될 텍스트 문구
• 필요에 따라 색상, 크기 등의 스타일도 변경 가능합니다.

4) 코드 설명

이 코드가 어떻게 작동하는지 간단히 설명드리겠습니다:

• 텍스트 스타일: 글자 크기는 22px, 굵은 글씨체(font-weight: 700), Arial 폰트를 사용합니다.
• 깜박이는 효과: CSS 애니메이션을 통해 텍스트의 투명도(opacity)를 1에서 0.5로, 다시 1로 변화시켜 깜박이는 효과를 만듭니다.
• 호버 효과: 마우스를 올렸을 때 살짝 커지는 효과(scale)를 줍니다.
• 반응형 디자인: 모바일 화면에서도 적절하게 표시됩니다.

3. 커스터마이징 옵션

코드를 더 자신의 블로그 스타일에 맞게 커스터마이징하고 싶다면, 다음 부분을 수정해보세요:

• 색상 변경:
• 글자 크기 조절:
• 깜박임 속도 조절:
• 더 굵은 글씨체:

4. 활용 아이디어

이 깜박이는 텍스트 링크 버튼은 다음과 같은 경우에 효과적으로 활용할 수 있습니다:

• 중요한 공지사항이나 업데이트로 연결
• 새 포스팅이나 인기 포스팅으로 연결
• 이벤트 페이지나 구독 페이지로 연결
• 외부 사이트나 소셜 미디어 프로필로 연결

 

간단한 HTML과 CSS 코드만으로 블로그에 시선을 끄는 깜박이는 텍스트 링크 버튼을 추가할 수 있습니다. 이 작은 변화로 블로그 방문자들의 경험을 향상시키고, 중요한 콘텐츠로의 클릭률을 높여보세요!

 

질문이나 더 필요한 정보가 있으시면 댓글로 남겨주세요. 감사합니다!