💡블로그에 생기를 불어넣고 싶으신가요? 단순한 텍스트 링크를 넘어, 독자의 시선을 사로잡는 반짝이는 링크를 만들어 보세요! 티스토리에서 HTML 코드를 활용하여 다양한 효과를 줄 수 있는 링크를 만드는 방법을 알려드립니다.
💡 "이 링크를 클릭하면 무슨 일이 일어날까?" 라는 궁금증을 유발하여 독자의 클릭을 유도하고, 더욱 흥미로운 콘텐츠로 이끌 수 있습니다. 이 글에서는 다양한 예시 코드와 함께, 티스토리에서 반짝이는 링크를 만드는 방법을 단계별로 설명해 드립니다.
초보자도 쉽게 따라 할 수 있도록 자세한 설명과 함께, 다양한 디자인 팁을 제공합니다. 지금 바로 시작하여, 여러분의 티스토리 블로그를 더욱 매력적으로 만들어 보세요!
반짝이는 링크버튼 만드는법
티스토리를 운영하다보면 링크버튼을 많이 사용하실텐데요. 반짝이는 링크버튼을 사용하면 독자로 하여금 궁금증을 유발해서 클릭을 더 유도할수 있는 방법이니 만드는법을 참고하시고 활용하시길 바랍니다.
먼저 관리페이지>스킨편집>CSS에 들어가서 제일 아래에 아래의 링크를 넣어서 적용 버튼을 눌러줍니다.
/*반짝이는 링크 css코드 */
<head>
<style>
.button-container {
max-width: 100%;
margin: 20px auto;
}
@keyframes button-shine {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
.button-shine {
animation: button-shine 1s infinite;
transition: all 0.3s ease;
}
.button-shine:hover {
opacity: 0.9;
}
</style>
</head>
서식 만들기를 할껀데요 서식만들기에 해당 HTML 코드를 넣어서 사용하시면 됩니다.
<div class="button-container">
<a href="원하는_링크_주소"
class="block w-full text-2xl font-bold button-shine"
style="background-color: #FF6B6B; color: #ffffff; text-decoration: none !important; display: flex; align-items: center; justify-content: center; margin: 0; height: 45px;">
링크 텍스트
</a>
</div>🎈여기서 주의사항 🎈
글쓰기를 할때 해당 서식을 불러와서 사용하는데 링크버튼 수정은 기본모드가 아닌 HTML 모드로 들어가서 주소를 넣어주고, 제목을 변경하는게 오류날 확률이 줄어들어요. 이점 필히 숙지하고 사용하시길 바랍니다.
반짝이는 링크 버튼 예제
파란색 반짝이 링크버튼
<div class="button-container">
<a href="원하는_링크_주소"
class="block w-full text-2xl font-bold button-shine"
style="background-color: #4B89FF; color: #ffffff; text-decoration: none !important; display: flex; align-items: center; justify-content: center; margin: 0; height: 45px;">
링크 텍스트
</a>
</div>
<div class="button-container">
<a href="원하는_링크_주소"
class="block w-full text-2xl font-bold button-shine"
style="background-color: #4CAF50; color: #ffffff; text-decoration: none !important; display: flex; align-items: center; justify-content: center; margin: 0; height: 45px;">
링크 텍스트
</a>
</div>
<div class="button-container">
<a href="원하는_링크_주소"
class="block w-full text-2xl font-bold button-shine"
style="background-color: #FFD700; color: #ffffff; text-decoration: none !important; display: flex; align-items: center; justify-content: center; margin: 0; height: 45px;">
링크 텍스트
</a>
</div>
<div class="button-container">
<a href="원하는_링크_주소"
class="block w-full text-2xl font-bold button-shine"
style="background-color: #FF9933; color: #ffffff; text-decoration: none !important; display: flex; align-items: center; justify-content: center; margin: 0; height: 45px;">
링크 텍스트
</a>
</div>
<div class="button-container">
<a href="원하는_링크_주소"
class="block w-full text-2xl font-bold button-shine"
style="background-color: #897475; color: #ffffff; text-decoration: none !important; display: flex; align-items: center; justify-content: center; margin: 0; height: 45px;">
링크 텍스트
</a>
</div>조금만 검색하면 기존 링크버튼 만드는 예제는 쉽게 찾아볼수 있습니다. 반짝이는 링크버튼 만들기 예제 글을 없길래 작성해봅니다. 여러 방면으로 활용해본 결과 링크 버튼 삽입시 반드시 HTML 모드에서 수정해서 사용하시길 바랍니다. 즐겁게 티스토리 블로그 하시길 바랍니다.🎄
'티스토리컴파스 > ◾링크만들기' 카테고리의 다른 글
| 티스토리 링크버튼 만들기 (말랑말랑버전 공유) (2) | 2025.05.08 |
|---|---|
| 티스토리 흔들리는 링크 버튼 만들기 (2) | 2025.05.07 |
| 티스토리 링크 버튼 스타일 서식 코드 (0) | 2025.05.03 |
