1. 버튼 코드 만들기
먼저 블로그스팟에서 사용할 버튼을 만들어야 합니다. 무료로 버튼의 디자인과 코드를 생성해주는 사이트(https://www.bestcssbuttongenerator.com/)에서 내가 원하는 버튼을 만듭니다.
① 왼쪽편에 다양한 컬러의 버튼의 샘플이 있는데요. 여기서 내가 원하는 버튼을 선택해주세요.
저는 빨간색 버튼을 선택했습니다. 그럼 중앙에 저렇게 빨간 버튼이 뜹니다.
② 오른쪽 상단을 보시면, 폰트사이즈를 조절할 수 있는데요. 원하는 크기로 선택해주세요.(기본은 15로 되어 있습니다.)
③ 버튼의 이름을 써주면 되는데요. 저는 그냥 기억하기 쉽게 redbutton 으로 썼습니다. 내가 기억하기 쉽게 작성 하는게 좋은 것 같아요!
④ 이렇게 모두 완료했다면, get code를 클릭해주세요.
⑤ 그러면 ②번, ③번에서 작업했던 창이 위와 같이 코드로 바뀌는데요. 여기서 <a href ~~~~ red</a>라고 적혀있는 첫 줄을 제외하고, 나머지를 복사해서 메모장에 붙여넣기 해주세요.
2. 구글블로그 테마에 버튼코드 등록하기
CSS추가 아래 빈 공간에 아까 만들었던 버튼 코드(메모장에 붙여넣기 해두었던 버튼코드)를 붙여넣기 해주세요. 그리고 오른쪽 하단에 있는 저장을 눌러주세요.
3. 글 작성_버튼 적용하기
새글 작성하기로 가셔서 버튼 적용하기를 해볼게요.
먼저 텍스트를 작성하고, 드래그를 해주세요. 저는 '블로그 스팟 버튼 만들기'라고 적어봤습니다. 그리고 링크 삽입 버튼을 누르고, '링크 붙여넣기 또는 검색' 이곳에 링크를 넣어주시고 적용을 눌러주세요.
글작성 화면에서 왼쪽 상단에 있는 연필모양을 누르시면, HTML보기와 새글 작성보기가 나오는데요. 여기서 HTML 보기를 눌러주세요.
<a href="http~~ 블로그 스팟 버튼 만들기</a>>/p> 여기에 class="redbutton"을 추가해주면 되는데요. 추가하는 위치는 바로 <a와 href 사이입니다. 바로 아래 처럼요.
<a class="redbutton" href="http~~ 블로그 스팟 버튼 만들기</a>>/p>
미리보기를 눌러보시면 위의 그림처럼 빨간 버튼이 생성된 것을 확인하실 수 있습니다. 새글 작성에서는 안 보이고요. 미리보기 또는 글을 게시하시면, 글 안에 버튼이 생성된 것을 확인하실 수 있습니다.
오늘은 블로그스팟에서 CSS버튼 만들어 적용하기를 설명해드렸습니다. 구글블로그에서도 버튼을 사용하고 싶으신 분들이라면, 차근차근 따라서 적용해보세요~!
0 댓글