/* 모든링크가 현재창에서 열리도록하는 세팅-시작 */ /* 모든링크가 현재창에서 열리도록하는 세팅-끝 */
본문 바로가기
티스토리 블로그 작성 노하우

[티스토리] CSS이용하여 버튼 넣기, 서식관리

by coxdesign 2025. 4. 3.
반응형

 

 

티스토리 스킨에 CSS 코드 삽입

 

1. 관리자모드 > 꾸미기 > 스킨편집 클릭

2. 우측에 html편집 클릭 > 상단 CSS 버튼 클릭 > CSS 맨 하단으로 이동하여 아래 내용 붙여넣기 후 > 적용버튼 클릭

 

css코드는 아래 서식파일 다운

 

버튼_CSS코드 서식파일.txt
0.00MB

 

블로그 본문에 버튼 넣기

블로그로 돌아와 기본모드를 html모드로 변경

버튼을 넣고 싶은 부분에 커서를 위치하고 아래 html코드를 복사>붙여넣기


<p data-ke-size="size16"><a title="title" href="링크주소넣기"><button class="aros-button">버튼 바로가기 텍스트 넣기</button></a></p>

 

다시 관리자모드로 변경하면 버튼 이미지가 아래 그림처럼 보이지만

미리보기를 누르거나 해당 블로그 주소로 들어가보면 아래 버튼처럼 보입니다.

 

 

 

버튼 서식 작성

매번 버튼 html코드를 복붙하기 번거럽기때문에 서식으로 만들어놓으면 편리하게 사용가능합니다.

 

다시 관리자모드 > 좌측 메뉴 콘텐츠/서식관리 클릭 > 우상단 서식쓰기 클릭 > html 모드로 변경

 

아래 코드를 복사 > 붙여넣기 > 서식 제목 입력 > 저장완료

 

<p data-ke-size="size16"><a title="버튼이름" href="링크주소넣기"><button class="aros-button">버튼 바로가기</button></a></p>

 

이제부터 본문 글을 작성하고 CSS버튼을 만들고 싶은 위치에 서식으로 버튼을 넣어주면됨.

 

 

 

블로그 내용안에 서식으로 버튼 넣는 방법

블로그 글 을 작성후 버튼을 넣고 싶은 부분에 커서를 넣고

상단 메뉴 우측 점3개 클릭 드래그 > 서식선택 >  서식리스트에서 넣고 싶은 버튼 서식 클릭

 

 

 

 

 

 

 

 

반응형