🌞 시작
GitHub 링크를 GitHub 아이콘과 함께 사이드바에 넣고 싶었다. 그래서 방법을 찾아봤더니 티스토리 블로그 스킨의 HTML 편집을 통해 가능하다는 것을 알게 되어 시도해봤다.
👨💻 과정
1. 아이콘을 HTML 코드로 가져오기
아래의 사이트에서 github나 facebook, instagram, linkedin 등의 SNS 아이콘에 대한 html 코드를 복사할 수 있다. 색깔부터 크기, 회전, 뒤집기 등이 가능하다.
GitHub Icon | Font Awesome
GitHub icon in the Solid style. Make a bold statement in small sizes.. Available now in Font Awesome 6.
fontawesome.com
2. 본인이 넣고 싶은 위치의 tag 찾기
본인의 블로그에서 F12 를 눌러 개발자 도구를 통해서 Github 아이콘 및 링크를 넣을 위치를 찾아야한다. 그러기 위해서는 주변 tag의 class나 id를 찾아놓으면 html 편집기에서의 편집이 수월해진다.
그래서 나는 정확히 아래의 사진 속 위치에 넣고 싶어서 해당 위치를 찾았다.
개발자 도구의 Element 를 확인해보니, "분류 전체보기" 는 sidebar-element 라는 div 태그로 감싸져 있고, 위에는 "카테고리" 라는 주석이 있다는 것을 확인했다.
Tip 참고!!) 개발자라면 다 알겠지만,
1. 크롬의 개발자 도구에서 우측에 삼단 점을 누르고 Dock side의 가장 왼쪽을 클릭하면 개발자 도구가 floating 되어서 반응형 화면에도 용이하게 사용 가능하다. (어피치(복숭아) 오른쪽 삼단 점)
2. 그리고 개발자 도구의 좌측 최상단의 화살표 모양을 클릭하고 화면에 커서를 가져다 대면 내가 원하는 위치가 코드와 함께 바로 보여진다. (튜브(오리) 왼쪽 화살표)
3. 티스토리 블로그 스킨 편집
티스토리 블로그 홈에서 "Q" 를 키보드로 치면 블로그 관리자 페이지가 나온다. 여기서 좌측 사이드바에 꾸미기 - 스킨 편집 으로 들어간다. 그 다음 편집이 가능한 새 창이 뜨면 우측 상단 쪽에 "html 편집" 클릭
티스토리 블로그 홈 -> Q -> 꾸미기 -> 스킨편집 -> 새창 후 html 편집
그리고 아까 넣고 싶은 위치에 있던 html의 1) div 태그의 "sidebar-element" 라는 class나 2) "카테고리" 주석을 ctrl + F 을 통해 찾는다.
4. GitHub icon 코드 삽입
아까 fontawesome 홈페이지에서 복사한 코드를 넣어주는데, 일정 부분 커스텀해서 넣어도 좋다.
<a href="https://github.com/bonkri9" style="display: flex; justify-content: center;">
<i class="fa-brands fa-github" style="font-size:25px; margin-right: 8px;"></i>Bonkri's GitHub
</a>< 간단한 코드 의미(진짜진짜 간단 표현) >
1) href 뒤에 이동하고 싶은 링크를 넣는다.
2) 가운데 있었으면 좋겠어요! : display: flex; justify-content: center;
3) 글자 크기를 25 px로 해주세요! : font-size: 25px;
4) 오른쪽 여백은 8px 로 해주세요! : margin-right: 8px;
5) i 태그 옆에 쓰고 싶은 말 작성
5. "적용" 누르고 새 창 띄워서 블로그 상태를 확인하면 끝!
적용 버튼을 눌렀는데 html 편집기 창의 왼쪽에 바로 적용이 안 되는 것 같아서 따로 블로그 창을 새로 띄워서 확인했다.
🎉 결과
참고로 블로그 관리자 페이지에서 플러그인 -> 배너 출력을 사용하게 되면 커서를 가져다댔을 때, 링크가 무지개색으로 빛나게 된다.
