본문 바로가기
상식

바로가기 단추, 티스토리 초보자 간단 만들기

by 올바른 2024. 8. 30.

티스토리는 많은 블로거들이 사랑하는 플랫폼으로, 개인의 생각과 정보를 공유하는 데 최적화된 공간입니다. 블로그를 운영하면서 방문자들이 원하는 정보를 쉽게 찾을 수 있도록 돕는 것이 중요합니다. 그중 하나가 바로 '바로가기 단추'입니다. 초보자도 간단히 바로가기 단추를 만드는 방법을 자세히 설명하겠습니다.

 

[ 목차 ]

     

     1. 바로가기 단추란? 

     

    바로가기 단추는 블로그 방문자들이 특정 페이지나 카테고리로 쉽게

    이동할 수 있도록 돕는 버튼입니다.

    자주 방문하는 카테고리나 인기 있는 포스트로의 링크를 제공함으로써

    사용자 경험을 향상할 수 있습니다.

    검색 엔진 최적화(SEO) 측면에서도 유용한 요소로 작용할 수 있습니다.

     

     

     

     2. 바로가기 단추의 필요성 

     

    바로가기 단추는 블로그의 내비게이션을 개선하고,

    방문자들이 원하는 정보를 빠르게 찾을 수 있도록 도와줍니다.

    이는 블로그의 체류 시간을 늘리고, 이탈률을 줄이는 데 기여합니다.

    검색 엔진은 사용자 경험을 중요하게 여기므로,

    이러한 요소들이 SEO에 긍정적인 영향을 미칠 수 있습니다.

     

     

     

     3. 바로가기 단추 만들기 

     

    1) CSS 버튼 만들기

    Button Generator 사이트는 직접 디자인을 수정해 나만의 버튼을

    만들 수 있는 사이트입니다.

    size(크기)와 Border(테두리), Box Shadow(박스 그림자)를 조절하면

    내가 원하는 버튼을 아주 편하게 만들 수 있습니다.

    나에게 알맞는 사이즈와 모양으로 꾸며보세요.

    버튼만들기1

    버튼 수정이 끝나면 Get Code(코드 받기)를 눌러 버튼의 디자인을 가져오게 됩니다.

     

     

    2) 티스토리 내스킨에 적용하기

    [스킨편집]-[html편집]을 눌러 티스토리 스킨을 편집할 수 있는 창을 연다음,

    CSS를 눌러서 버튼의 디자인코드를 넣은 후 적용버튼을 누르면 됩니다.

    버튼만들기2

    여기에서 빨간 테두리로 표시한 'B' 부분을 복사하여 

    버튼복사하기

     

    CSS 편집에 붙여 넣기 한 다음 적용 버튼을 누르면 됩니다.

     

    3) 서식으로 만들기

    버튼을 편하게 사용하기 위해서는 서식으로 만들어 관리하면 편리하지요.

    [콘텐츠]-[서식관리]를 클릭하고 서식 쓰기를 누른 다음,

    제목을 정하고 쓰기 모드를 기본모드에서 HTML로 바꾼 후 내용칸에 위의

    노란 테두리 'A' 부분을 복사하여 텍스트로 입력합니다.

    서식만들기 참조

     

    다시 기본모드로 바꿔보면 내가 정한 이름의 버튼이 하나 생성된 게

    보일 것입니다.

    문제가 없는 걸 확인했으면 완료를 눌러서 서식을 저장하면 됩니다.

     

     

     

     4. 실제로 버튼 만들기 

     

    이제는 글쓰기를 할 때 만든 버튼을 적용해 볼 차례입니다.

    글쓰기를 한 후 새로운 글쓰기창이 열리면 오른쪽위에 있는

    점 3개 아이콘을 눌러서 서식을 클릭합니다.

    만든 서식 중 사용할 서식을 클릭해 내용칸에 삽입을 해줍니다.

    미리 보기를 해보면 내가 만든 버튼이 내용칸에 잘 입력된 것을

    확인해 볼 수 있습니다.

    만약 글씨의 색상이 맘에 안 들면,

    <a href="#" class="myButton">red</a> 을 삭제하고

    다음의 내용을 복사하여

    <p data-ke-size="size16"><a href="#"><button class="myButton">

    버튼이름</button></a></p>

    을 붙여 넣기로 입력하세요.

     

     

     

     5. 버튼 적용하기 

     

    이제 내가 원하는 용도의 버튼으로 만들기 위해 HTML을 눌러서 내가 만든

    임의의 버튼을 바꿔보지요.

    링크에는 페이지가 이동할 주소를 적어주고 링크텍스트는 버튼의 이름을

    적어두면 됩니다.

    <a href="링크"><button class="myButton">버튼이름</button></a>
    <a href="https://www.bestcssbuttongenerator.com"><button class="myButton">

    버튼만들기바로가기</button></a>
    링크에는 페이지가 이동할 주소를 적어주고 텍스트에는 버튼의 이름을 적어주세요.

    미리 보기를 해보면 내가 원하는 주소로 이동이 되는 버튼을 확인해 볼 수 있습니다.

     

     

     

     

     

     6. 마무리 

     

    바로가기 단추는 사용자 경험을 개선하는 데 큰 역할을 합니다.

    방문자들이 원하는 정보를 쉽게 찾을 수 있도록 돕는 것이 SEO에

    긍정적인 영향을 미칩니다.

    방문자들이 자주 찾는 카테고리나 포스트를 중심으로 단추를

    배치하는 것이 좋습니다.

    티스토리에서 바로가기 단추를 만드는 것은 블로그의 사용자

    경험을 향상하고,

    SEO에도 긍정적인 영향을 미치는 중요한 작업입니다.

    위의 단계를 따라 간단하게 바로가기 단추를 추가하고,

    방문자들이 원하는 정보를 쉽게 찾을 수 있도록 도와주세요.

    블로그 운영에 있어 작은 변화가 큰 차이를 만들 수 있습니다.

    이제 여러분의 블로그에 바로가기 단추를 추가하여 더 많은

    방문자들이편리하게 정보를 찾을 수 있도록 해보세요!

     

    티스토리 바로가기 버튼 만들기

    반응형

    댓글