본문 바로가기
카테고리 없음

티스토리 링크버튼 여러 개 만들기(ft. 버튼 제너레이터)

by %?$!$$*2E& 2024. 6. 2.
반응형

글을 작성할 때 다른 웹페이지로 이동할 수 있는 링크를 걸어주는 버튼은 "버튼 제너레이터"라는 사이트를 이용하면 누구든지 간단하고 보기 좋은 버튼을 생성할 수 있습니다. 

 

링크버튼여러개만들기
링크버튼 여러개 한꺼번에 생성하기

 

블로그 포스팅을 하다보면 사용되는 링크의 종류에 따라 다양한 형태의 버튼을 생성하고 적용하는 것이 필요할 때가 있습니다. 예를 들어, 내부링크를 거는 버튼과 외부링크를 버튼의 색상을 다르게 하고 싶을 수도 있고, 신청하기 버튼과 알아보기 버튼을 다른 모양의 버튼으로 생성하고 싶을 수도 있습니다. 

 

이럴 때 적용할 수 있도록  이번 포스팅에서는 버튼 제너레이터를 이용하여 다양한 형태의 버튼을 여러 개 생성하여 적용하는 방법에 대하여 자세하게 설명해 보겠습니다. 

 

 

 

 

버튼 생성과 티스토리 적용

버튼을 생성하여 글 작성에 사용하는 방법은 "버튼 제너레이터" 사이트를 방문하여 생성한 버튼 생성 코드를 블로그 관리 페이지의 스킨 편집의 CSS 탭에 붙여 넣기를 하고, 버튼 코드 생성 시 함께 생성되는 a 태그 코드를 티스토리 서식 작성에 사용하시면 됩니다. 

 

하나의 버튼 코드를 생성하여 티스토리에 적용하는 자세한 사항은 이전 포스팅을 참고하시면 됩니다. 

2024.06.02 - [분류 전체보기] - 왕초보 초간단 링크 버튼 만들기(ft. 버튼 제너레이터)

 

왕초보 초간단 링크 버튼 만들기(ft. 버튼 제너레이터)

자신의 블로그를 보다 신뢰성 있는 블로그로 만들어 주는 링크 연결하는 버튼을 클릭 몇 번으로 생성하는 방법에 대해 자세하게 설명드리겠습니다.    흔히 말하는 "링크 버튼"은 블로그에서

bloginfo.gao-ri.com

 

위의 포스팅에서 첫번째로 생성한 버튼은 파란색 바탕에 흰색 글씨를 가지는 "myButton"이 생성되었습니다. 

CSS 탭에 복사하여 넣기 서식 작성에 넣기

 

CSS 코드와 서식작성에서 보면 버튼이 이름이 "myButton"으로 작성되어 들어간 것을 확인할 수 있습니다. 

 

 

 

 

 

여러 개의 버튼을 생성하여 적용하는 방법

이렇게 파란 버튼을 하나 생성한 후에 빨강버튼과 노랑버튼도 생성하려고 하면 어떻게 하면 될까요?

 

버튼 제너레이터를 이용하여 버튼을 선택하여 코드를 생성하면 기본으로 모든 버튼이 "myButton"이라는 이름으로 생성이 됩니다. 이렇게 생성된 코드를 그대로 CSS 코드에 넣어주면 동일한 버튼 이름이 적용되니 다음 버튼 생성부터는 "myButton"이라는 버튼 이름을 변경하여 코드를 넣어주면 됩니다. 

 

빨강버튼을 생성하여 "myButton1"로 이름을 변경하고, 노랑버튼을 생성하여 "myButton2"로 이름을 변경하여 CSS 탭과 서식을 작성하면 됩니다. 

 

1. 빨강버튼 생성하고 적용

코드제너레이터에서 원하는 디자인의 버튼을 선택하여 코드를 생성합니다. 

빨강 버튼을 생성

 

코드를 생성하면 똑같은 "myButton"이 생성됩니다. 이 코드를 CSS 탭과 서식작성에 복사하여 붙여넣기 한 후에 "myButton"을 "myButton1"로 변경해 줍니다. 

 

CSS 탭에 붙여넣기 한 후 버튼 이름 "myButton1"로 변경 서식작성시 버튼 이름 "myButton1"로 변경

 

2. 노랑버튼 생성하고 적용

이제 파랑버튼과 빨강버튼을 만들었으니, 노랑버튼도 버튼 제너레이터에서 생성해 줍니다. 빨강버튼과 마찬가지고 코드를 생성하면 기본 "myButton"이라는 이름의 버튼이 생성됩니다. 

 

이 코드를 CSS 탭과 서식작성에 복사하여 붙여넣기 한 후에 "myButton"을 "myButton2"로 변경해 줍니다. 

CSS 탭에 붙여넣기 한 후 버튼 이름 "myButton2"로 변경   서식작성시 버튼 이름 "myButton2"로 변경

 

 

3. 테스트

위와 같이 작성하시면 블로그에서 사용할 수 있는 버튼 서식이 파랑버튼, 빨강버튼, 노랑버튼이 생성되고 필요할 때마다 필요한 버튼 서식을 불러서 사용하시면 됩니다. 

 

버튼 서식을 다 완성하셨다면 글모드의 미리보기나 버튼서식을 넣은 글을 발행(비공개 또는 공개)하셔서 버튼이 정확하게 나오는 것을 확인하실 수 있습니다. 

 

 

세가지 버튼 테스트
세가지 버튼 테스트

 

 

버튼 만들러 가기

 

 

 

 

 

마무리

글을 작성할 때 다른 웹페이지로 이동하는 링크를 형성하는 버튼을 보기 좋게 만드는 것은 글에 안정감과 블로그의 신뢰도를 높이는데 중요한 역할을 합니다. 

 

너무 다양한 버튼을 많이 사용하는 것은 부적절하지만, 적절하고 다양한 버튼을 적재적소에 사용하면 글의 가독성을 향상할 수 있어 궁극적으로는 블로그로의 유입을 늘일 수 있으므로 잘 활용해 보시기 바랍니다. 

반응형