티스토리 스킨, 카테고리에 방명록 링크 버튼을 추가해보자.

이 블로그는 티스토리 기본 스킨 중에 하나인 Poster을 그때마다 적절히 개조하면서 사용되고 있습니다.

이 Poster 스킨의 장점이라고 하면 최소한의 기능만 있어서 보기에 깔끔해 보이고 가독성이 좋더라구요.

그런데 최소한의 기능만 있는 것이 오히려 독이 될때가 있는데,

바로 메뉴 기능이 없다는 점...!!!

즉, 카테고리 기능(사이드바)만 있어서 방명록을 추가할 수가 없습니다...

하지만, 티스토리가 표방하는 것이 무엇입니까 여러분!!!

바로 그것은 「완전하게 자유로운 스킨 편집」!!!

(나무위키 피셜.)

그래서 지금부터 제가 어떻게 카테고리 사이드바에 방명록 버튼을 추가했는지 알려드릴까합니다.

이게 바로 제 블로그에 적용한 결과입니다.

보시다시피 방명록만 추가하니 심심해서 인스타그램, 유튜브 버튼도 추가해 봤어요.

이제 본격적으로 사용한 코드를 보여드리겠습니다.

~~(저도 알못이니 더 나은 코드가 있을 수 있다는 점 유의해주세요)~~

<a style="font-weight:bold;font-size:1.125em;font-family:'Nanum+Myeongjo';color:#333;text-decoration:none;" href="https://dasomkim.tistory.com/guestbook">guestbook</a>

제가 굵게 글씨를 칠하고 붉게 쓴 글씨는 사용자분께서 요령껏 수정하시면 되는 부분입니다.

아마 대충 영어를 읽을 줄 아시면 적절히 수정하실 수 있으실 텐데요,

그래도 아예 모르실 분도 있을 것 같아 대충 설명해보겠습니다.

style=……(CSS)
font-weight	글자 굵기
font-size	글자 크기
font-family	폰트 종류
color	글자 색깔
text-decoration:none	밑줄 없음

느낌적인 느낌으로 숫자를 변경해보거나 구글에 쳐서 원하는 부분을 찾아보시면 됩니다.

적용하는 법

이제는 직접 소스 코드를 적용해볼 시간입니다.

[블로그 관리홈]-[스킨 편집]-[HTML 편집]을 눌러주세요.

그럼 문외한이라면 누가봐도 당황스러운 소스코드 편집기가 우측에 뜨는데요,

</nav>라고 써진 곳 바로 뒤에다 위에 제가 적어둔 소스코드를 복붙해 주세요!!!

소스코드를 복붙한 후 [적용] 버튼을 누르고 블로그에 직접 들어가 확인해봅시다.

(참고로 소스코드 편집기 옆에 있는 미리보기에선 확인이 불가능합니다 ㅜ)

가슴이 웅장해지는 방명록 버튼을 확인하실 수 있습니다.

링크 버튼을 여러 개 추가해보자

앞에서 보시다시피 저는 방명록 버튼 말고도 인스타그램, 유튜브 등 SNS 외부 링크도 추가했는데요,

이 실제 소스코드도 보여드리겠습니다.

<a style="font-weight:bold;font-size: 1.125em;font-family:'Nanum+Myeongjo';color:#333;text-decoration:none;" href="https://www.instagram.com/아이디/">instagram</a>

<a style="font-weight:bold;font-size: 1.125em;font-family:'Nanum+Myeongjo';color:#333;text-decoration:none;" href="https://www.youtube.com/channel/채널주소">youtube</a>

아마도 대충 눈치껏 아시겠지만 붉은 글씨 부분에 원하는 주소, 원하는 글씨를 넣어 커스텀마이징 하시면 됩니다.

그리고 아까와 마찬가지로 [html 편집]을 눌러 그 위치에 쭈르륵 복붙해 주시면 됩니다.