티스토리 링크 버튼 쉽게 만드는 방법

 

티스토리 링크 버튼 쉽게 만드는 방법 알아봅시다.

 

티스토리를 하다 보면 코드를 사용해 다양한 소스 만들기를 하게 되는데 오늘은 티스토리 링크버튼에 대해 알아보도록 하겠습니다. 간편하게 만들 수 있는 사이트가 있으니 참고하여 만들어 보도록 하세요.

 

버튼만들기 홈 바로가기

 

 

 

 

링크버튼 만들기 할때는 위의 링크버튼 만들기를 클릭하고 자신만의 링크버튼을 만들어 보세요. 링크 만드는 방법은 2가지가 있는데 <미리캔버스>에서 만들 수 있고 위의 <버튼 제네레이터>에서 손쉽게 만들 수 있습니다.

 

오늘은 Button Generator 에서 만들어 보도록 할게요.

 

 

Betton Generator 바로가기

 

링크버튼 생성하기

 

가운데 green 색을 자신이 원하는 색으로 바꾸세요. 이때 왼쪽에서 디자인과 색깔을 함께 선택하면 됩니다.

색상과 디자인을 고르면 자동으로 코드가 형성됩니다.

 

소스 복사하기

 

오른쪽에 코드를 드래그해서 복사해 두세요. 코드의 맨 윗줄은 서식에 적용해서 써야 하고 나머지 코드는 CSS에 추가해서 올려야 합니다. 오른쪽 코드는 색깔과 모양을 선택할 때마다 달라지는 소스예요.

 

 

 

 

 

복사한 코드

 

현재 만든 버튼이 마음에 안 든다면 다시 중앙의 색버튼을 눌러주면 처음 세부 디자인 화면으로 돌아갑니다.

이제 고른 버튼으로 맘을 정했다면 티스토리 코드에 적용하는 일이 남았어요. 이제부터 집중하기.

 

티스토리 코드 적용/CSS 코드 적용하기

 

Css코드 적용하기 전에 첨가해야 할 코드가 하나 있습니다.

코드를 메모장에 복사한 후

color:#333333! important 넣어주기

 

 

 

티스토리버튼 완성된 코

 

코드 가운데쯤 빨간 라인 옆에 밑줄 친 부분 끝에! important를 추가해서 넣어야 합니다.

사실 중요도! important 값은 HTML 속성 키워드로 사용하지 않는 것이 좋으나! important를 넣지 않으면 버튼의 텍스트 색상이 내가 선택한 색과 디자인이 다른 값으로 나올 수 있기 때문에! important를 넣어줍니다. 그래야 링크가 걸린 텍스트가 다른 색으로 걸리는 것을 제한하는 방법입니다.

 

이제 코드를 수정했으면 내 티스토리 설정으로 들어갑니다

 

 

 

 

티스토리 설정> 꾸미기> 스킨편집> html편집> CSS 선택

 

CSS 가장 아래쪽에 방금 전 메모장에 복사해 둔 완성된 코드를 붙여놓기 하고 적용버튼을 눌러 저장하면 됩니다. 끝~

이제 서식에 등록하면 되겠죠.

 

티스토리 버튼 서식에 등록하기

 

티스토리 글을 작성하다 링크를 걸어야 할 때 매번 HTML 코드를 사용하는 것은 불편하기 때문에 서식에다 버튼코드를 넣어놓고 필요할 때 꺼내 쓰면 편리합니다.

 

티스토리 버튼 서식 등록하는 방법

 

티스토리 설정> 콘텐츠> 서식관리> 서식 쓰기

 

서식제목에 알기 쉽게 링크버튼이라고 씁니다.

 

 

위와 같이 코드를 적은 후 저장을 합니다.

 

티스토리 버튼 서식에서 가져오기

 

이제 잘 되었는지 테스트를 해보아야겠어요. 무엇이든 처음엔 어려운 듯싶어도 자꾸 해보면 쉽다는 것을 알 수 있습니다.

티스토리는 도전인 것 같아요.

 

 

라니의 달콤한 세상이야기

 

버튼 제네레이터 사이트 바로가기