블로그 꾸미기_크리스마스 트리_눈내리는 효과 js

 

이번 포스팅은 티스토리 블로그를 꾸미는 방법중에 하나를, 소개할까 합니다.

 

블로거마다 각자의 방법으로, 블로그를 꾸미는 방법과 항목이 다양하게 있습니다.

 

그중에서도 좀 이른감이 있긴하지만, 크리스마스 시즌의 느낌을 주는 2가지를 포스팅해보려고 합니다.

 

하나는 블로그 이름 옆에 크리스마스 트리를 넣는 것과, 두번째는 블로그에 눈내리는 효과를 주는 자바스크립트입니다.

 

 

1. 블로그 이름옆에 크리스마스 트리 넣기

 

행운월드의 블로그이름 옆에 보면, 반짝거리는 크리스마스트리가 보입니다.

블로그이름 옆에 트리이미지를 넣는 방법은 아래와 같습니다.

 

우선 넣고싶은 트리 이미지를 이름옆에 어울리는 사이즈로 미리 만들어 둡니다.

 

애니메이션효과를 주고 싶다면, 이미지를 작업하고, 배경은 투명하게 한후 확장자를 gif로 합니다.

 

기왕이면 배경 레이어를 안보이게 하는 방법으로 이미지파일을 만들어 놓습니다.

 

gif 파일이나 png 파일로 만들면 됩니다.

 

그리고, 만들어 놓은 이미지 파일을 호스팅에 올리거나, 티스토리 스킨의 파일올리는 곳에 올립니다.

 

티스토리 스킨의 파일올리는 곳의 경로는 아래와 같습니다.

 

( 티스토리 관리자 > 꾸미기 > 스킨편집 > html편집 > 파일업로드 > +추가 > 업로드된 파일에서 > 오른쪽버튼 > 링크주소 복사 )

 

티스토리 관리자  html편집의 css에서 #header h1의 맨 하단에 background css를 추가하고 저장합니다.

(각자 사용하고 있는 블로그 스킨에 따라서, #header h1가 아닐수 도 있습니다.)

 

 

 

css 코드는 아래와 같습니다.

background: url(https://hhgongjang.cafe24.com/img/cmtree.gif) no-repeat left 106px top 10px;

 

위의 css 코드에서 url은 background 이미지의 경로이고, no-repeat는 background를 반복되지 않게 한번만 보여지게 하겠다는 하겠다는 것이고, left 106px top 10px은 background 이미지의 정렬을 left와 top으로 하고, left에서는 106px을 top에서는 10px만큼 공간을 두겠다는 의미입니다.

 

 

2. 블로그에 눈내리는 효과를 주는 자바스크립트

 

블로그에 눈내리는 효과를 주는 자바스크립트는 아래와 같습니다.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://hhgongjang.cafe24.com/blog/jquery.flurry.js"></script>
<script>
      $( document ).ready( function() {

        $('body').flurry({height: 2000,speed: 40000,small: 20,
    large: 50,});
    
      });
    </script>

 

눈내리는 효과를 주고 싶은 포스팅에, 위의 코드를 붙여넣기 합니다.

 

여기서, 위의 코드를 보면, 첫번째 코드는 상관이 없지만, 두번째 코드는 별도로 올리고 싶은곳에 올리고, 경로를 입력해야 합니다. 눈내리는 효과가 담긴 파일입니다. 필자가 직접 코딩한 것은 아니고, 검색해서 다운로드 받아서 수정을 한 것이니, 각자의 스타일대로 수정해 보세요. 파일은 별도로 다운로드 받을 수 있게 아래에 링크 남기겠습니다.

 

jquery.flurry.js

0.01MB

 

위의 코드를 열어보시면, 하단부분에 눈 색상과 모양을 수정할 수 있는 부분이 있습니다.

 

 

그리고, 티스토리 본문에 입력하는 자바스크립트 코드의 $('body').flurry({height: 2000,speed: 40000,small: 20,
    large: 50,});으로 눈 내리는 전체 사이즈와 눈의 크기와 눈을 내리게 하고싶은 특정한 위치를 지정할 수 있습니다.

 

위의 코드대로 현재 이 포스팅의 상단부분에 눈이 내리고 있으니, 확인해 보세요.