블로그스팟 우리가 사용하는 테마 vTrick에 버튼 링크를 넣는 방법, 색깔 넣기, 아이콘 넣기, 인용문 이쁘게 사용하기

블로그스팟에 우리가 사용하는 vTrick 테마에 버튼을 넣는 방법을 알아 보겠습니다.

블로그스팟은 글쓰기 모드가 2가지가 있습니다.

위의 아이콘을 누르면

새 글 작성 보기 현재 우리가 보는 화면과

<> HTML 보기가 있습니다.

HTML 보기를 누르면

이런 식의 화면이 나오게 됩니다.

블로그 스팟에 글을 이쁘게 꾸미기 위해서는 다소의 HTML은 조금 알아둘 필요가 있습니다.

우선 새글 작성 보기에서 버튼을 넣고자 하는 곳에

ZZZ 이런 식으로 써 준 뒤 태그를 복사해서 붙여 넣으시면 됩니다.

링크 삽입 또는 수정 아이콘입니다.

글을 쓴 다음에 글을 선택하고 링크 버튼을 누르면

이런 식으로 링크를 넣을 수 있습니다. 표시할 텍스트를 기억해 둔 뒤 html 모드로 가서 class="button" 을 넣어 버튼으로 바꾸거나 class="button yellow" 이런 식으로 색깔을 넣거나 버튼에 색깔을 넣으실 수 있습니다.

<a href="https://링크 주소">테스트 링크</a>

이런 식으로 버튼을 넣으시면 됩니다.

그러면 위와 같이 나오게 되는데

우리가 사용하는 vTrick 테마에는 class가 정의 되어 있습니다.

버튼의 경우는 아래의 태그를 복사하셔서 버튼을 쓰고자 하는 부분에 "새 글 작성 보기" 모드에서 "ZZZ"로 표시를 해준 뒤 <>HTML 모드로 바꾸셔서 ZZZ 부분에 넣어주면 됩니다.

<a href="https://링크 주소" class="button preview">테스트 링크</a>

<a href="https://링크 주소" class="button download">테스트 링크</a>

<a href="https://링크 주소" class="button link">테스트 링크</a>

<a href="https://링크 주소" class="button cart">테스트 링크</a>

<a href="https://링크 주소" class="button share">테스트 링크</a>

<a href="https://링크 주소" class="button info">테스트 링크</a>

이런 식으로 쓸 경우

이렇게 버튼 모양을 앞에 넣어줄 수 있습니다.

<a href="https://링크 주소" class="button green">테스트 링크</a>

<a href="https://링크 주소" class="button preview red">테스트 링크</a>

<a href="https://링크 주소" class="button download yellow">테스트 링크</a>

<a href="https://링크 주소" class="button link purple">테스트 링크</a>

<a href="https://링크 주소" class="button cart blue">테스트 링크</a>

<a href="https://링크 주소" class="button share orange">테스트 링크</a>

<a href="https://링크 주소" class="button info dark ">테스트 링크</a>

<a href="https://링크 주소" class="button white preview">테스트 링크</a>

이런 식으로 클래스에 색깔을 넣으면

예를 들어 버튼을 이용해서 다른 페이지로 이동 시키려고 할 때 좋습니다.

방문자에게 행동을 유발하게 만드는 것으로 버튼은 의외로 강력하게 작용을 합니다.

blockquote 태그를 이용해 줍니다.

인용문의 경우는 ZZZ 써준 곳에 ZZZ의 앞 뒤에 태그를 지워 주시고 넣으셔야 됩니다.

블로그 스팟에도 인용문 쓰기 기능이 있습니다.

들여쓰기 아이콘을 누르시면 됩니다.

뭔가 모양이 이쁘지가 않네요.

티스토리와 워드프레스 다 써본 입장에서 블로그 스팟은 버튼 넣는 거나 인용문 넣는 것이 조금 불편하기는 한데 못 쓸 정도는 아닌 것 같아요.

잘 숙지하셔서 이쁜 블로그 스팟 만드시길 바랍니다.

감사합니다.