[Letter 스킨] 05. 공감 버튼 꾸미기

블로그 구경을 하다가 공감 버튼도 꾸밀 수 있다는 걸 알았다!

바로 이거!

좋은데? 바로 적용해야지!

일단 CSS 편집화면으로 들어간다.

• 꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집

 

• CSS 편집

 

2. 공감 버튼 적용하기

• 움직이는 ♡ 만들기

CSS에서 적당한 위치에 아래 코드를 입력한다.

.ico_like {
  position: relative;
  animation: ico_like 1.5s 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( .85 ); }
  20% { transform: scale( .1 ); }
  40% { transform: scale( .85 ); }
  60% { transform: scale( .1 ); }
  80% { transform: scale( .85 ); }
  100% { transform: scale( .85 ); }
}

 

• 공감 유도 문구 삽입하기

HTML에서 편집해야 한다.

적당한 위치에 아래 코드를 입력한다.

<script> 
  $(document).ready(function() { var heartTag = '<div class="like_heart"><span class="heart_tooltip">이 글이 도움이 되었다면 ♡를 눌러주세요^-^</span></div>'; $(heartTag).insertBefore($('.container_postbtn').children().eq(0)); }); 
</script> 
<style> 
  .heart_tooltip {position:absolute;left:0;top:-8px;background:#FFC0D9;color:#F9F9F9;font-size:10pt;padding:6px 12px;border-radius:10px;box-shadow:3px 3px 10px rgba(0,0,0,0.1);} 
  .heart_tooltip::after {position:absolute;left:17px;bottom:-7px;width:0;height:0;border-top:7px solid #FFC0D9; border-bottom:7px solid none;border-right: 7px solid transparent;border-left: 7px solid transparent;content:" ";} 
</style>

 

3. 적용 모습

짠~

움직이는 하트는 이렇게!

신기하다ㅋㅋㅋㅋ

공감 문구는 이렇게!