티스토리 공감 버튼 콩닥콩닥 움직이게 만들기

블로그에 작은 디테일을 추가하며 내 입맛대로 꾸미는 건 생각보다 훨씬 재미있는 일 같다. 물론 html이라고는 용어도, 방법도 제대로 모르기 때문에 정말 사소한 거 하나 추가하는데도 몇 시간씩 걸리기도 한다. 며칠 동안 자동 목차 생성, 폰트 변경, 썸네일 규격 수정 등 수많은 강좌들을 따라해보았다. 그러다 실수로 전에 추가한 걸 날려 먹으면서 전에 봤던 강좌를 찾아 헤매고 또 찾아 헤매기를 반복... 이제부터라도 기록도 해볼 겸, 하나씩 공유해보고자 한다.

 

 

티스토리 공감 버튼 움직이게 만들기

 

티스토리 포스팅 끝부분에는 공감 버튼이 자리하고 있다. 눈에 확 띄는 디자인이 아니라서 그런지 못 보고 지나치는 사람도 많을 것이다. 이때 하트 모양이 두근두근 뛰는 것처럼 움직인다면 한 명이라도 공감을 더 누르게 하는 데 분명히 기여하리라고 생각한다. 굉장히 간단한 초보자용 팁이라 빠르게 끝낼 수 있다.

 

 

1. 블로그 관리 페이지 접속하기

- 관리 페이지에 들어가면 왼쪽에 각종 설정 메뉴들이 있다. 여기에서 [꾸미기] 영역 안에 있는 [스킨 편집]으로 들어간다.

 

 

2. html 편집 화면 들어가기

- 스킨 편집을 누르면 화면이 분할되어 왼쪽에는 내 블로그 미리보기, 오른 쪽에는 아래와 같은 화면이 뜬다. [html 편집] 버튼을 눌러준다.

3. CSS 편집 탭 들어가기

- 상단에 HTML, CSS, 파일업로드 세 가지의 탭이 있다. [CSS] 탭을 클릭한다. 공감 버튼 꾸미기는 CSS에만 코드를 추가하면 되기에 간편하다.

 

 

3. 코드 추가하기

- 아래 내용을 복사하여 붙여넣기한다.

/* 하트 공감 CSS 추가 */
.ico_like { 
	position: relative; 
	animation: ico_like 1s infinite; 
	margin:0 auto
}
.ico_like:before, .ico_like:after { 
	position: absolute;
	content: ""; 
	top: 0; 
	-webkit-transform-origin: 0 100%; 
	-o-transform-origin: 0 100%; 
	transform-origin: 0 100%; 
}
.ico_like:after { 
	left:0; 
	-webkit-transform-origin:100% 100%; 
	-moz-transform-origin: 100% 100%; 
	-ms-transform-origin: 100% 100%; 
	-o-transform-origin: 100% 100%; 
	transform-origin :100% 100%; 
}
@keyframes ico_like { 
	 0% { transform: scale( .75 ); }
	20% { transform: scale( 1 ); } 
	40% { transform: scale( .75); }
	60% { transform: scale( 1 ); }
	80% { transform: scale( .75 ); }
	100% { transform: scale( .75 ); }
}

 

- 스크롤을 아래로 끝까지 내려 맨 밑에 추가해주었다.

 

 

초보자용 참고 사항

해당 코드 첫 번째 줄에서 /* 하트 공감 CSS 추가 */ 이 부분은 메모와 같은 역할을 한다. /* 내용 */ 이런 식으로 써놓는 문구의 경우 편집에는 아무런 영향도 주지 않는다. 잠시 포스트잇 붙여놓는 거라고 생각하면 된다. 이러한 메모를 생략하게 되면 나중에 하나씩 추가한 것들이 늘어나기 시작하면서 엄청나게 헷갈려질 수 있다. 따라서 웬만하면 꼭 함께 추가해두는 것이 좋다.

 

 

4. 적용하기

- 우측 상단에 있는 [적용] 버튼을 눌러준 후 블로그를 확인해보면 콩닥콩닥 움직이고 있는 귀여운 공감 버튼을 확인할 수 있다. 이 포스팅의 아래 버튼이 그 결과물이다.

 

---

 

블로그를 하나하나 꾸며가고 있는 요즘, html에 대해서 하나도 모르는 상태로 하나씩 따라하다 보니 우여곡절이 많다. 분명 강좌에 나와 있는대로 했음에도 불구하고 제대로 작동을 안 하는가 하면, 멀쩡히 되다가 어느날 갑자기 오류가 나기도 한다. 그럴 때마다 폭풍 검색을 하며 최대한 고쳐나가고자 많은 노력을 기울였다. 하도 많은 강좌를 봐서 그런지 조금씩 코드들이 눈에 들어오기 시작하고 나름대로의 조합과 수정도 하고 있다. 물론 대충 감으로 코드를 하나씩 바꿔가며 적용해보고 확인하고, 또 적용하고 확인하고의 반복이지만 말이다. 처음에는 강좌에서 본 코드를 붙여넣는 것만 해도 너무 어렵고 헷갈리게 느껴졌는데 이제는 차차 익숙해져가고 있다. 앞으로 더 많이 배워나가고 싶다.