블로그스팟 꾸미기 중 가장 중요한 것중 하나인 버튼을 원하는 형태로 만들어서 CSS 적용후 사용하는 방법에 대해서 알아보도록 하겠습니다. 블로그 스팟에서는 버튼 기능을 따로 지원하지 않아서 HTML을 이용해서 직접 넣어서 사용해야 합니다. 많이 어려운 코드는 아니니 저와 함께 잠깐 살펴보시면 누구든 쉽게 이용할 수 있을 듯합니다.
버튼 HTML 만들기
1. 버튼 제너레이터 (Button Generator) 사이트에 접속하기
버튼의 HTML코드를 하나씩 입력하면서 만들기에 초보들은 너무 어렵습니다. 그래서 이미지를 보면서 버튼을 만들어 볼수 있는 버튼 제너레이터 사이트를 이용하면 아주 쉽습니다.
버튼 제너레이터 사이트에 접속하면 버튼의 이미지가 보이고 오른 쪽의
여러가지 속성들을 변경해서 버튼을 원하는 형태로 만들 수 있습니다. 버튼의
속성값에 대한 자세한 설명은 아래 링크로 이동하시면 자세히 설명이
되어있습니다.
2. 원하는 형태로 버튼 만들기
원하는 형태의 버튼을 만든후 GET CODE를 클릭하면 코드가 나옵니다.
<a href="#" class="myButton">바로가기</a>
.myButton {
box-shadow: 3px 4px 0px 0px #8a2a21;
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
background-color:#c62d1f;
border-radius:17px;
border:1px solid #611a15;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
font-weight:bold;
padding:15px 70px;
text-decoration:none;
text-shadow:1px 1px 0px #810e05;
}
.myButton:hover {
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
background-color:#f24437;
}
.myButton:active {
position:relative;
top:1px;
}
복사해온 전체코드입니다. 빨간색 부분은 복사해서 버튼이 들어가는
위치로
파란색 부분은 CSS로 추가를 해주면 됩니다.
CSS 추가하기
테마디자이너 수정
블로그스팟의 레이아웃 메뉴로 들어가면 우측상단에 테마디자이너라는 파란색
텍스트가 보입니다.
테마가 적용된 블로그 스팟의 상세한 설정은 대부분
테마디자이너에서 이루어 집니다.
테마디자이너로 진입후 고급메뉴의 CSS추가로 들어갑니다.
그리고 이전에 복사한 CSS코드를 복사해서 넣어줍니다.
그리고 우측하단 저장을 해주면 전체 블로그에 CSS버튼이 적용이 되었습니다.
버튼 HTML 적용하기
HTML코드를 원하는 곳에 복사
<a href="#" class="myButton">바로가기</a>
버튼 코드를 넣어서 테스트를 해보겠습니다.
버튼 코드는 글쓰기 모드를 HTML모드로 변경한후 원하는 위치에 넣어줍니다.