티스토리 버튼 만들기

티스토리 버튼 만들기를 해 보셨나요? 본인의 포스팅의 퀄리티를 올리기 위한 작업을 하시는데 좋은 팁입니다. 어렵지 않으니 버튼을 만들어 한번 활용해 보세요.

1. 버튼 만들기

일단 본인이 좋아하는 색과 모양으로 버튼을 만들어야 하는데요. 버튼을 만들 수 있는 사이트로 이동해 주셔야 합니다. 해당 사이트에서 정말 버튼다운 버튼을 만들 수 있어요.

사이트

사이트에 접속하게 되면 이렇게 화면이 뜨는데 왼쪽에 보시면 다양한 버튼 모양이 있는 것들을 볼 수 있습니다. 여기에서 본인이 좋아하는 디자인을 선택 해 주세요.

본인이 원하는 디자인을 선택하셨다면 오른편에 글자크기나 각진부분을 얼마나 동그랗게 할지 그리고 그림자를 넣을지 말지 등등 세부적으로 변경시키실 수 있습니다. 하나씩 만져보면서 본인이 원하는 스타일데로 변형 해 주시면 되겠습니다.

다 만들어졌다면 우측하단에 get code라는 버튼이 있습니다. 여기로 접속하시면 다음과 같은 두가지의 코드를 받게 됩니다. 본인이 계속 해당 버튼을 활용할 계획이시라면 해당 코드를 저장 해 두시면 편리합니다. 혹시 다른 곳에서 활용하게 될 수도 있으니까요. 한번 적용한 해당 블로그에서는 서식에 저장될 것이기 때문에 상관은 없습니다. 

이렇게 보시면 빨간색으로 화살표를 한 부분과 파란색으로 화살표를 한 부분이 보이실 텐데요. 두 가지는 모두 다르게 활용이 되니 각각 복사를 하셔서 진행하셔야 합니다. 먼저 파란색 버튼부터 진행 해 볼게요.

2. 코드 적용시키기

파란색버튼은 본인의 CSS편집에 들어가셔서 가장 아래에 붙여넣기 해 주시면 됩니다. 그러면 끝. 참 쉽죠? 대신 여기에서 주의하실 점이 하나 있어요. 해당 코드에서 color : #333333이라고 되어 있는 부분에 한칸띄고 '!important'를 다음과 같이 입력 해 주세요. 그렇지 않으면 본인이 설정한 색상으로 나오지 않을수도 있습니다. 꼭 확인 해 주세요. 

중요를 입력하셨다면 아마 이렇게 해당 글자가 파란색으로 표시가 될 것입니다. 이번엔 빨간색 화살표부분의 코드를 적용시키러 가 볼까요? 이번엔 '서식관리'으로 이동해 주세요.

서식관리에서 서식쓰기항목으로 이동해 줍니다. 여기에서 서식은 HTML로 작업할 것이기 때문에 편집창을 HTML로 적용시켜 주세요. 

그리고 나서 아까 빨간색화살표로 되어 있는 코드를 복사해서 붙여넣기 해 줍니다. 그리고 나서 twitter (이건 본인이 만든 버튼에 따라서 이름은 달라질 수 있습니다.)부분에 본인이 원하는 글자를 입력해 줍니다. '버튼이름'이나 '사이트' 등등의 이름을 입력해 주시면 됩니다. 추후에도 변경이 가능하니 너무 오랫동안 생각하지 않도록 합니다. 

그리고나서 기본모드로 들어와서 가운데 정렬을 해 주시고 저장을 해 주시면 모든 설정은 끝이 납니다. 그럼, 이제 실제 포스팅을 작성하실 때 어떻게 적용하는지 확인하러 가볼게요.

3. 포스팅 작성에 적용하는 방법

기본적으로 글을 쓸 때 오른쪽 상단에 점세개로 되어 있는 부분을 클릭하시면 '서식'항목이 나오는데 클릭 하셔서 방금 만들어둔 '링크버튼 만들기'를 눌러 적용시켜 줍니다. 

그리고 나서 드레그를 한 다음 링크를 적용시킬 사이트를 입력 해 주시면 되는데, 이 때 주의하실 점은 '새창으로 열기'를 해제 해 주혀야 한다는 점입니다. 이 부분 꼭 확인하셔서 착오 없으시길 바랍니다.

그러면 이렇게 링크버튼이 만들어 진 부분을 확인하실 수 있습니다. 본인 글쓰기 창에서는 확인하실 수 없고, 미리보기 창이나 발행을 하셔야 확인이 가능합니다. 혹시 제대로 만들어 졌는지 발행전에 확인이 필요하시다면 '미리보기'를 통해서 진행 해 주세요.

 

그럼, 오늘도 행복한 하루! bye~