티스토리 링크버튼 만들기 (도움 SNS쓰레드 연동)

클릭률을 높이고 싶다면? 수익을 높이고 싶다면?
티스토리에서 버튼으로 링크를 만들어보세요. 디자인은 깔끔하게, 수익은 효과적으로!
블로그에서 HTML CSS로 링크 버튼을 만드는 방법을 알아보세요.
어렵지 않습니다. 지금 바로 따라만 하세요.

왜 링크를 버튼으로 만들어야 하나요?

단순히 텍스트에 링크를 걸어두는 방식,
요즘 사용자들이 잘 안 누를 수 있습니다..
눈에 딱 들어오는 버튼 형태라면?
훨씬 클릭 확률이 높습니다.
✔ 이유는 간단해요:

사용자가 더 직관적으로 받아들일 수 있어요.
디자인이 깔끔해지니까 신뢰감도 상승해요.
클릭 유도 → 애드센스 수익 증가로 이어져요.

즉, 사용자 경험(UX)을 개선하면서 수익까지
연결되는 스마트한 전략입니다.

티스토리 블로그 경우, 한 번만 스킨HTML CSS에 설정해두면,
이후 글 작성 시 버튼을 불러와 자유롭게 사용할 수 있습니다.
최종 결과물이 글제목 사진 이미지와
같이 버튼이 표시되는 방법을 함께 알아보겠습니다.

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

컴퓨터 언어 (HTML CSS 자바스크립트 코드)를 작성해야 되는데

우리가 블로그 글쓸려고 하는 것인데 이것까지 배워야 하나 생각이 들겁니다.
그래서 여러분을 위해 온라인 무료 ' 버튼 생성기 사이트'를 찾아왔습니다.

링크버튼생성기
(bestcssbuttongenerator.com) 바로가기

링크버튼생성기 사이트, https://www.bestcssbuttongenerator.com

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

/* 버튼 */ /* 레드 색상 계열 버튼 */

<a href="#" class="myButton">DINOBoB</a>

.myButton1 {
	box-shadow:inset 0px -1px 0px -24px #e67a73;
	background-color:#e4685d;
	border-radius:4px;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Times New Roman;
	font-size:28px;
	font-weight:bold;
	padding:32px 76px;
	text-decoration:none;
	text-shadow:13px 12px 0px #b23e35;
}
.myButton1:hover {
	background-color:#eb675e;
}
.myButton1:active {
	position:relative;
	top:1px;
}

링크버튼코드 다운받기

이 코드 부분은 워드크래커님 '워드프로세스 정보꾸러미', 유튜브 쵸리, 그로블님 영상을 참고했습니다.

'블로그 관리 > 스킨편집 > HTML CSS' 로 갑니다.
CSS 오른쪽 막대를 스크롤 제일 아래로 끌어내립니다.
버튼생성기에서 만든 myButton1 이하 모두 복사하여 붙쳐 넣습니다.
그리고 적용을 누르고 빠져나옵니다.

'콘텐츠 > 서식관리'로 갑니다. 제목 '클릭을 부르는 빨간버튼'을 쓰고
기본모드에서 HTML 모드로 변환합니다.
"<a href="링크 주소" class="myButton1"> 디노밥 바로가기 </a>"
코드를 붙여넣고 '링크주소', '버튼에 나올 내용'을 적고 '완료'를 클릭합니다.

글관리에서 글 제목을 작성하고 서식에서 '클릭을 부르는 빨간버튼'을 불러옵니다.
그리고 완료를 누르고 글관리에서 글을 클릭하면 빨간버튼이 적용된 화면을 볼 수 있습니다.

이제 응용에 들어갑니다.
스킨편집 CSS에 myButton1~myButton4 코드를 작성합니다.
서식에 '표 4x4' 를 넣은 후 HTML 모드로 가서 각 칸에
아래와 같이 넣습니다.
<a href="링크 주소" class="myButton1"> 국민취업제도 신청하기 </a>
<a href="링크 주소" class="myButton2">내일배움카드 신청하기</a>
<a href="링크 주소" class="myButton3>중장년새출발지원금 신청하기</a>
<a href="링크 주소" class="myButton4>근로장려금 신청하기</a>

버튼길이가 각 다른 게 아직 갈길이 머네요.^^

SNS 쓰레드 외부유입하기

뜬금없이 갑자기 쓰레드 유입? 링크 버튼과 무슨 관계' 냐고 생각이 들겁니다.

앞에 응용사례처럼 한페지에 표 링크버튼을 쭉 나열해 놓습니다.

SNS 유입한 방문자가 링크버튼을 누르게 하기 위해서 입니다.

SNS 쓰레드(Threads)는에서 불특정 다수가 보기때문에 특정대상,

특정세대, 특정인물로 한정을 지어서 작성하는 것이 좋습니다.

아래 사례를 복사해서 사용해됩니다.

사례]
4050대도 쉽게 받는 정부지원금 총정리 생각보다
많은 지원금 모르고 있더라.
나이 제한 없이 신청 가능한 혜택들, 꼭 챙겨서 놓치지 마!

1. 국민취업지원제도 (최대 300만원)
2. 내일배움카드 (최대 500만원)
3. 중장년 새출발 크레딧 지원금 (최대 3000만원 대출융자)
4. 근로장려금 (최대 300만원 )
5. 주거급여 (지역별 차등 지급)
6. 근로복지공단생계비 대출 (4인 가구 기준 월 150만원)
7. 실업급여 (최대 9개월)
8. 폐업희망리컨패키지 재취업 (최대 945만원)

가족과 지인에게도 꼭 알려줘! 놓치면 넘나 아까워!
지원대상, 신청방법, 혜택 자세하게 설명해놨으니까
아래 링크 블로그에 가서 알아봐.

https://bobjyeon.tistory.com/entry/rer
----------------------------------------------

저도 코딩초보인데 따라만 해서 만들었는데요.
눈에 띠는 링크버튼을 만들고 싶다면 한번 해보세요~

티스토리 링크버튼 만들기 (도움 SNS쓰레드 연동)

왜 링크를 버튼으로 만들어야 하나요?

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

SNS 쓰레드 외부유입하기

관련글