블로그스팟으로 포스팅을 할 때 하이퍼링크를 사용하는 경우가 많습니다. 이럴 때 단조로운 링크형식보다는 보기 좋은 버튼 형식으로 링크를 만들면 사용자가 인식하기도 좋고 사용하기도 편리합니다. 이번 글에서는 블로그스팟에서 CSS 버튼을 만들고 편하게 사용할 수 있는 방법에 대해서 알아보도록 하겠습니다.
블로그스팟 CSS 버튼 만들고 사용하기 (구글블로그 버튼 적용하기)
1. 버튼 만들기
제가 여기서 설명하고자 하는 것은 자주 사용하는 모양의 버튼을 5개 정도 만들어서 블로그스팟 테마에 추가를 해 놓고 하이퍼링크가 필요할 때마다 class 속성을 활용하여 편하게 버튼모양으로 만드는 것입니다.
이를 위해서는 우선 무료로 CSS 버튼 디자인과 코드를 만들어 주는 사이트에서 원하는 버튼 5개의 코드를 만들도록 하겠습니다.
https://www.bestcssbuttongenerator.com/ 에 들어가면 아래와 같이 여러종류의 버튼 디자인을 보실 수 있습니다. 이 중에서 사용할 5개의 버튼을 선택하고 코드를 생성합니다.
저는 light_grey, dark_blue, blue, white, orange 이렇게 5개를 선택한 후 각각의 classname을 쉽게 인식할 수 있도록 mb_light_grey, mb_dark_blue, mb_blue, mb_white, mb_orange 로 하였고, 속성 중 Font Size만 16px로 변경하였습니다.
이렇게 한 후 "Get Code"를 클릭하면 CSS 코드가 만들어 집니다.
만들어진 코드중 <a ~ </a> 를 제외한 나머지 부분을 notepad 에 복사합니다. 이런 식으로 원하는 만큼의 버튼 스타일의 코드를 notepad에 복사합니다. 저는 위에서 말씀드린 데로 5개의 버튼을 선택한 후 해당 코드를 노트패드에 복사를 했습니다.
2. 블로그스팟 테마에 등록하기
위와 같이 자신이 원하는 버튼들을 만들고 해당 코드를 notepad에 복사를 한 후에 필요할 때마다 편하게 사용하기 위해서는 블로그스팟 테마에 해당 코드를 추가해 놓아야 합니다.
블로그스팟에 로그인 한 후 테마 → 맞춤설정을 클릭합니다.
고급을 클릭합니다.
“맞춤 CSS 추가” 에 notepad에 있는 코드를 모두 복사하여 붙여넣기 한 후에 오른쪽 아래에 있는 디스켓 모양을 클릭하여 저장하면 버튼 코드가 테마에 추가됩니다.
위와 같이 10개의 링크를 만들고 HTML 보기를 클릭합니다
3. 버튼 사용하기
지금까지 만들고 테마에 추가한 버튼을 사용해서 이 글의 첫번째 그림과 같이 왼쪽은 일반 링크, 오른쪽은 버튼형식의 링크를 만들어 보겠습니다.
우선 왼쪽 5개, 오른쪽 5개 모두를 아래와 같이 블로그스팟 링크 만들기를 사용하여 링크를 만듭니다. 이렇게 만들어진 링크는 <a href=”링크주소”>링크명</a> 형식 코드로 만들어 집니다.
HTML 코드에서 아래와 같이 class=”mb_light_grey”, class=”mb_dark_blue, class=”blue”, class=”mb_white”, class=”mb_orange” 를 추가하면 원하는 디자인의 버튼형식으로 링크가 만들어 집니다.
결과를 한번 볼까요? 이렇게 버튼 형식으로 만들어 놓으면 보기도 좋고 시각적으로 잘 인식되는 장점이 있습니다.
오늘은 위와 같이 블로그스팟에서 CSS 버튼을 만들고 테마에 추가해서 사용하는 방법까지 알아보았습니다. HTML 코드를 직접 수정해야 하는 어려움이 있지만 이렇게 한번만 만들어 놓으면 이후에는 class=”mb_light_grey” 만 추가하면 버튼 형식의 링크를 쉽게 만들 수 있기 때문에 상당히 편리합니다. 링크를 사용할 필요가 있으시다면 꼭 적용해 보세요.
만약 제가 적용한 버튼과 같은 CSS 코드를 사용하고 싶으시다면 아래 코드를 사용하시면 됩니다.
아래 코드는 제가 테마에 추가한 버튼 CSS 코드입니다.
--------------------------------------------------------
.mb_light_grey {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.mb_light_grey:hover {
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.mb_light_grey:active {
position:relative;
top:1px;
}
.mb_dark_blue {
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
background-color:#63b8ee;
border-radius:6px;
border:1px solid #3866a3;
display:inline-block;
cursor:pointer;
color:#14396a;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #7cacde;
}
.mb_dark_blue:hover {
background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
background-color:#468ccf;
}
.mb_dark_blue:active {
position:relative;
top:1px;
}
.mb_blue {
box-shadow:inset 0px 1px 0px 0px #97c4fe;
background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color:#3d94f6;
border-radius:6px;
border:1px solid #337fed;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #1570cd;
}
.mb_blue:hover {
background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color:#1e62d0;
}
.mb_blue:active {
position:relative;
top:1px;
}
.mb_white {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.mb_white:hover {
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.mb_white:active {
position:relative;
top:1px;
}
.mb_orange {
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color:#ffec64;
border-radius:6px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:16px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.mb_orange:hover {
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color:#ffab23;
}
.mb_orange:active {
position:relative;
top:1px;
}
