티스토리 뷰
목차
티스토리 블로그 수익형 블로그 운영할때 가장 궁금했던 점은 눈에 띄는 빨간색 버튼을 만드는 것이었습니다. 왕초보도 순서대로 따라하기만 한다면 원하는 버튼을 만들 수 있으니 아래 빨간버튼 내용 놓치지 마세요!
빨간색 링크 버튼 만드는 방법
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로 변경 합니다.
글 사이에 있는 아까 서식에 있던 부분을 버튼에 넣을 글씨로 수정하고
# 부분에 링크도 넣습니다. 꼭 " " 이건 지우시면 안됩니다.
가운데 정렬을 하면 더 예쁘게 보입니다.
이제 완성입니다.
글을 쓰시다가 언제든 서식에서 만들어 놓은 버튼을 불러와서
편안하게 사용하세요!
