[Blog] 티스토리 Poster 스킨 GitHub 연동하기

xlTistory

현재 내 블로그는 티스토리에서 기본으로 제공해주는 Poster 스킨을 사용중이다.

이 스킨은 SNS 계정을 facebook, instagram, pinterest, twitter만 연결해주는 아이콘을 생성해주는데 나는 여기에 GitHub도 연결해주고 싶어서 HTML/CSS 코드도 읽어보고 구글링으로 방법을 찾아냈다.

기존 스킨의 태그가 아닌 새로 만들어서 해결했다는게 조금 아쉽지만 결과만 중요하게(?) 생각하고자 한다.

 

 

---

<div class = "box-sns">
	<br>
	<a href="https://www.instagram.com/yulee_to" class="link-sns">
    	<img src="./images.instagram.png" width="70%" height = "70%"/>
    </a>
    <a href="https://www.github.com/uri010" class="link-sns">
    	<img src=".images.github.png" width=70%" height = 70%"/>
    </a>
 </div>

HTML에서 <div class="social-link"> 태그를 없애고 삽입

.link-sns {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 36px;
    vertical-align: top;
}
.social-link a {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	text-indent: -999em;
	background-image: url(./images/ico_package.png);
	background-repeat: no-repeat;
	vertical-align: top;
}

CSS에 추가

 

 

위 코드를 추가해주고 나면 해당 블로그처럼 카테고리 사이드바의 맨 밑에 내 깃허브와 인스타그램으로 연결되는 아이콘을 생성할 수 있다.

생성 예시

 

아이콘 사진은 https://www.flaticon.com 이곳에서 다운받아서 사용했다. 다운받은 사진을 스킨 편집의 파일업로드에서 추가해주고 파일의 이름을 html 코드에 적절히 넣어주면 끝 !!