버튼제너레이터_ 티스토리 빨간색 링크버튼 만들기 (왕초보)

티스토리 블로그 수익형 블로그 운영할때 가장 궁금했던 점은 눈에 띄는 빨간색 버튼을 만드는 것이었습니다. 왕초보도 순서대로 따라하기만 한다면 원하는 버튼을 만들 수 있으니 아래 빨간버튼 내용 놓치지 마세요!

 

버튼제너레이터 바로가기

 

 

빨간색 링크 버튼 만드는 방법

1. 버튼제너레이터에 접속 

- 회원 가입 필요 없음

 

버튼제너레이터 접속

 

 

2. 왼쪽 버튼 중 선택

- 가장 눈에 띄는 건 왼쪽 제일 위에 있는 CSS 녹색버튼 선택

 

 

3. 가운데 박스 ( 파란색 Button Generator 쓰인 곳 )

 

녹색 버튼 선택 후 버튼 바로 아래 색갈 네모 박스를 눌러서

내가 원하는 색으로 변경 

 

버튼 아래 작은 색깔 박스 선택 후 (1)

세모 커서를 누른채로 위아래 이동하며 색깔 선택 (2) 

큰 네모 박스안에 동그라미 누른채로 옮겨서 원하는 색깔 선택 (3)

 

★ 작은 네모 색깔 박스들 ( 왼쪽부터 )

 

1. 버튼 겉 배경 색 ( 흰색 추천 )

2. 버튼 누르기 전 색상 ( 빨간색 추천 )

3. 버튼에 마우스 커서 댔을때 색상 ( 반전 색상으로 추천 파랑이나 초록 등 )

4. 글자 색상 ( 흰색 추천 )

5. X

6. 글자 그림자 색상 ( 흰색 또는 밝은색 추천 )

 

버튼이 완성 되면 화면 오른쪽 박스에서 사이즈 조정하기

 

1. 내 버튼 이름 정하기

2. 버튼의 글자크기 ( 26 정도 )

3. Vertical Size 버튼의 세로 길이 조정하기 ( 20정도)

4. Horizontal Size 버튼의 가로 길이 조정하기 ( 최대로 해놓기 )

5. Border Radius 버튼의 모서리 라운드의 정도 ( 취향대로 )

그 외는 안만져도 됩니다.

 

설정이 끝나면 다시 가운데 박스 버튼 만들어 놓은거 바로 아래에 

파란색 Get Code 버튼 누르기

 

 

 

Get Code 누르고 내면 오른쪽 박스화면이 코드가 나타납니다.

그럼 맨 윗줄은 글을 쓸때 저 버튼을 넣을 위치에 붙여 넣기 해야하고

아래 1번 표시 된 것은 스킨 편집 >> Html 편집 >> Css 에 붙여 넣기 해야합니다.

아래 이미지를 참고 해주세요. 

 

스킨편집 CSS 수정하기

 

 

블로그 관리 >> 왼쪽 카테고리 꾸미기 아래 스킨 편집 >> 오른쪽 위에 Html 편집 >> 위의 카테고리 중 CSS 누르기

 

CSS 누른 후 가장 아래에 몇줄 띄우고 

아까 복사해 놓은 코드를 붙여 넣기 하세요.

 

.myButton { background-color:#cf2d00; border-radius:36px; border:2px solid #f4ff21; display:inline-block; cursor:pointer; color:#ffffff!important; font-family:Arial; font-size:27px; …}

 

---

 

.myButton {
background-color:#cf2d00;
border-radius:36px;
border:2px solid #f4ff21;
display:inline-block;
cursor:pointer;
color:#ffffff!important;
font-family:Arial;
font-size:27px;
…}

 

---

서식관리>> 서식만들기

 

여기까지 하셨다면 90% 성공입니다. 

그리고 이제 글쓰기에서 버튼을 만들어 보겠습니다. 

 

글을 쓰기 전에 미리 해야할 일이 있습니다. 해두면 글쓸때마다

편안하게 버튼을 만들 수 있습니다. 

 

블로그 관리 >> 왼쪽 카테고리 중 맨 위 콘텐츠 아래 서식관리 >> 서식 쓰기 >> 

>> 제목은 내가 알아 볼 수 있게 표시 ( 예시 : 빨간버튼 ) 

>> 오른쪽 위에 기본모드를 HTML로 변경

>> 아래 화면처럼 아까 버튼제너레이터 코드 중 맨 윗줄 복사 붙여 넣기 

 

 

 

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

 

이런 식으로 코드를 붙여 넣기 한 후 

green 부분 내가 버튼 글씨로 쓸 내용 이기 때문에 

저는 내용쓰기라고 수정해 두었고

 

href="#" << 여기에서 # 부분에 버튼을 눌렀을때 넘어갈 링크를 넣을 예정입니다. 

지금은 서식 저장하는거라 그냥 두시면 됩니다. 

 

이렇게 한 후 다시 HTML을 기본모드로 변경

그리고 오른쪽 아래 완료를 누르면 서식이 저장 된것입니다. 

 

---

글 쓸때 버튼 사용하기 

 

티스토리 블로그에서 글쓰기를 누르고 글을 작성합니다. 

중간에 버튼이 필요한 위치가 나오면 그 부분에서 아래 사진처럼 오른쪽 위에 ... 버튼 누르기

---

---

 

두번째 서식 누르기

그럼 만들어 놓은 빨간 버튼이 보입니다. 클릭하기

---

---

그럼 위의 사진처럼 버튼이 아닌 파란 줄과 글씨로 보입니다.

이때 기본모드 >> HTML로 변경 합니다.

 

글 사이에 있는 아까 서식에 있던 부분을 버튼에 넣을 글씨로 수정하고

# 부분에 링크도 넣습니다. 꼭 " " 이건 지우시면 안됩니다. 

 

 

빨간버튼 만들기 연습 중입니다 (테스트)

 

 

 

 

가운데 정렬을 하면 더 예쁘게 보입니다. 

 

이제 완성입니다.

글을 쓰시다가 언제든 서식에서 만들어 놓은 버튼을 불러와서

편안하게 사용하세요! 

 

버튼제너레이터