[수익형 블로그] CSS 코드 사용 링크 버튼 만드는 방법

오늘은 'CSS 코드 사용한 링크 버튼 만드는 방법'에 대해 자세하게 알려드리겠습니다.

초보자분들도 쉽게 따라 할 수 있도록 사진과 함께 빠르게 설명해 드릴게요. 그럼 가보시죠! ^o^

● 버튼 만드는 방법

※ 보라색이 그어진 글, '000' 표시, 사진 속 노란 밑줄을 따라 진행해주세요.

   1) 아래의 홈페이지 접속

바로가기

   2) 왼쪽에서 원하는 스타일 선택

   3) 노란 줄쪽 네모 클릭하면 컬러 변경 가능

   4) 원하는 버튼이 되면 오른쪽 아래 '코드 받기' 클릭

   5) 오른쪽에 코드가 나오면 맨 윗줄 제외하고 나머지 복사(Ctrl + C)

   6) 본인 티스토리 블로그로 돌아와서 '관리' 누르고 '꾸미기'에서 '스킨 편집' 클릭

     ※ 티스토리 블로그 바로가기

   7) 'HTML 편집' 클릭

   8) 맨 위에 '붙여넣기(Ctrl + V)' 누르고 '적용' 클릭

   9) 다시 티스토리 '관리' 페이지로 돌아와서 '콘텐츠'에 '서식 관리' 클릭

   10) '서식 쓰기' 클릭

   11) '기본모드' 누르고 'HTML' 클릭

   12) '링크 버튼 만드는 사이트'에서 아까 복사 안한 맨 윗줄만 복사(Ctrl + C)

   13) 제목은 'CSS 버튼'으로 변경하고, 붙여넣기(Ctrl + V) 후 green을 지우고 '버튼에 들어갈 글자' 로 수정

   14) 다시 '기본모드' 클릭

   15) 아래와 같이 '파란색'을 띄고 '버튼에 들어갈 글자' 뜨면 완성

   16) 오른쪽 아래 '완료' 클릭

 

   17) 이제 글쓰기에 들어가서 '서식' 클릭

   18) 만들어둔 CSS 버튼 서식 클릭

   19)  '기본모드' 누르고 'HTML' 클릭

   20) # 지우고 '원하는 링크' 붙여넣고, 버튼에 들어갈 글자 지우고 '원하는 버튼에 보일 글자' 입력

   21) 글 작성 중에 '미리보기'나, 글 작성 다하고 '완료' 눌렀을 때 아래와 같이 뜨면 완성

왼쪽 아래

완성한 버튼

728x90

반응형

지금까지 [수익형 블로그] CSS 코드 사용 링크 버튼 만드는 방법에 대해 알아봤습니다.

 

다음 포스팅은 xxx에 대해 알아보겠습니다.

다양하고 더 많은 정보를 쉽게 알려드리는
블로그 “N잡 하는 정보통” 구독과 공감 하트 꾸욱♥
그리고 이웃 여러분의 주기적인 방문은 글 작성에 큰 힘이 됩니다.

방문 해주신 이웃 여러분 감사합니다. 
오늘도 건강하고 행복한 좋은 하루 보내세요. (❁´▽`❁)/