블로그 추천, 구독 버튼 넣기 - CSS Image Sprite

이전 글에서 CSS Image Sprite를 사용하는 이유와 소스코드를 생성해주는 사이트를 소개해드렸습니다.
블로그 로딩 속도를 빠르게 - CSS Image Sprite

이번 글에서 사이트에서 만든 소스를 실제 블로그에 적용하는 방법을 설명하겠습니다. 블로그에 추천 버튼을 삽입하는 방법을 예로 들겠습니다.

CSS Image Sprites 사용하기

먼저 스킨 저장을 해서 혹시 모를 사고에 대비하세요.

수다공작소님께서 공유해주신 아이콘을 이용해보도록 하죠.

수다공작소님의 블로그에서 첨부 파일을 내려받아 CSS Sprite Generator에서 이미지를 첨부하고 소스 코드를 생성합니다. 사이트 이용법은 블로그 로딩 속도를 빠르게 - CSS Image Sprite를 참고하세요.

결과 페이지에서 그림을 내려받아 파일 이름을 blogicon.png으로 바꾸고 블로그 스킨 편집에서 파일을 올립니다.

CSS 소스는 바로 사용할 수 없고 메모장이나 기타 편집기에 붙여 넣고 수정해야 합니다. 수정한 내용을 첨부합니다. 첫 번째, 두 번째 줄이 새로 추가한 내용입니다. 꼭 필요한 줄이니까 지우지 마시고요. 이 CSS 코드를 스킨 편집의 style.css에 붙여넣습니다.

blogicon_css.txt

다음은 버튼을 만들 HTML 코드입니다. 이 코드는 블로그 스킨 편집의 skin.html에 넣습니다. 블로그 스킨 소스 중에 바로 아래 넣으시면 됩니다. 사용하지 않는 사이트라면 삭제하셔도 되지만, 제일 윗줄과 마지막 두 줄은 꼭 들어 있어야 합니다.

blogicon_htm.txt

스킨 미리 보기를 눌러서 제대로 적용되는지 확인해보세요.

아래 사진이 제대로 적용된 모습입니다.

 

제대로 보인다면 저장을 누르고 관리창이 아니라 블로그로 돌아옵니다. 거기서 Ctrl + F5를 눌러서 링크가 제대로 연결되는지확인해보세요. 링크 연결까지 잘 된다면 성공입니다.

관련글

블로그 로딩 속도를 빠르게 - CSS Image Sprite
블로그 위, 아래, 이전글, 다음글 이동 단추 넣기