블로그를 운영하는 사람이라면 누구나 자신의 블로그를 예쁘게 마음에 쏙 들게 꾸미고 싶어 합니다. 그래서 조금이나마 블로그를 꾸밀 수 있을만한 팁을 알려드리고자 합니다.
위의 스크린 샷은 어디서 한번쯤은 봤던 기억이 있을 겁니다.
티스토리 블로그를 개설하면 처음 볼 수 있는 스킨의 첫화면의 아래 메뉴들의 모습 입니다. 깔끔하기로는 둘째가라면 서러울 정도로 깔끔하기는 최고의 스킨입니다. 블로그를 만지기 두려워 하는 사람들이라면 아예 이 스킨을 사용하는 경우도 많겠죠.
만약에 위의 사이드바 메뉴 앞에 메뉴의 특성을 나타내주는 아이콘이 달려 있다면 화면이 훨씬 보기 좋을 겁니다.
사이드바 메뉴에 아이콘 넣는 방법
부트스트랩이니 fontawesome 이니 배경지식은 알아볼 필요없고 오로지 방법만 알면되는거니 바로 본론으로 들어가도록 하겠습니다.
우선 아래 TXT 파일을 다운 받아 실행하면 아래와 같은 링크 주소 한줄이 보입니다.
HTML 복사용 다운 파일.txt<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/
font-awesome/4.6.3/css/
font-awesome.min.css">
역시나 뭔지 알 필요없이 닥치고 CTRL + A, CRTL + C 해줍니다.
블로그 관리의 HTML/CSS 편집창을 열어 HTML 편집화면 <head> </head> 태그안에 집어 넣습니다. 구글 애드센스 광고 신청을 한 번에 성공한 사람이 아니라면 여기에 집어 넣는 것은 이골나게 해봤을테니 쉽게 할 수 있을 겁니다.
아이콘을 사용할 준비는 끝났습니다. 이제 아이콘을 가져오기만 하면 됩니다.
아래 링크를 클릭합니다.
<< 아이콘 가지러 가는 곳 >>
홈페이지의 화면입니다. 아래로 내려 Web Application Icons으로 가면 수백가지 아이콘들이 있는데 모두 사용가능 합니다. 이것들을 내 블로그로 링크시켜 사용하기로 하는 사전 작업이 방금 한 것입니다.
이제 이것들을 어디에다 어떻게 붙여 넣을지에 대해 설명하겠습니다. 다시 HTML편집하면에서 아래와 같이 CTRL + F에 sidebar를 검색합니다.
파란색 박스가 실제 블로그 화면에 표시되는 메뉴이름들 입니다. 검은색 글씨부분을 수정하여 저장하면 블로그 홈화면에서도 바뀌어 표시되게 됩니다.
이제 이부분 앞에 아이콘을 추가하여 주면 됩니다.
첫번째로 공지사항을 수정해보겠습니다.
홈페이지에서 마음에 드는 아이콘이 있으면 클릭을 해줍니다. 공지사항이니깐 벨 모양을 해보겠습니다.
빨간 박스 부분 전체를 긁어 복사해줍니다.
커서를 공지사항의 '공'앞에 두고 붙여넣기를 합니다. 공 앞에 한칸을 띄워 공백을 주는게 더 보기가 좋습니다.
이제 저장을 하면 아래와 같이 공지사항 앞에 벨이 보입니다.
다른 부분들도 이와 같은 방법으로 수정을 해주면 아래와 같이 됩니다.
다른 스킨의 블로그들도 이방법을 응용하면 얼마든지 아이콘을 추가해 줄 수가 있습니다.
최근댓글