티스토리 툴바

Daum
Tistory
로그인

티스토리 블로그에 크리스마스 장식 해보기

나이스팁/블로그 2011/12/20 20:58재아

블로그 상단에 크리스마스 장식을 달아보세요!  제 블로그에 보시는것처럼 블로그 상단에 트리 장식을 할수 있습니다.

작업도 간단하고 방법도 간단 합니다. 소스 제공은 티스토리 측에서 하고 있습니다.
사실 제가 블로그를 오래 하다보니 이런것도 기억을 하고 있습니다.


블로그에 장착 하는 방법은 간단 합니다.

▶ 블로그에 적용 하는 방법

아래 <배너 다는 방법>을 참고하여 블로그 상단에 크리스마스 트리 및 방울 장식을 달아보세요. 총 3종의 장식이 준비되어 있으며, 장식 종류에 따라 가로 사이즈가 각각 다릅니다. (장식을 달 경우 장식 뒤로 가려지는 배너나 링크는 클릭이 되지 않을 수 있습니다.)

※ 배너 다는 방법 (천천히 따라해 보세요!)
1. 배너를 달고 싶은 블로그의 관리자 화면으로 간 뒤, 스킨 > HTML/CSS편집으로 이동합니다.


2. 위 이미지에 보이는 것처럼 Skin.html이라고 보이는 영역에서 첫번째 <body> 아래에 
   배너의 HTML 코드를 넣어주세요!

* 예시 (빨간색이 배너가 보여지는 HTML 코드입니다.)
</head>
<body>
<style type="text/css">
#ChristmasDeco1 {
    background: url(http://cfs.tistory.com/static/sticker/s_17.png) repeat; text-indent: -1000em;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 70px;
}
* html #ChristmasDeco1 {
    background-image: none;
    background-repeat: none;
    width: 1300px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/static/sticker/s_17.png', sizingMethod='crop');
 }
</style>
<div id="ChristmasDeco1">Merry Christmas!</div>
<s_t3>
1) 반짝반짝 별 (1300px)
<style type="text/css">
#ChristmasDeco1 {
    background: url(http://cfs.tistory.com/static/sticker/s_17.png) repeat; text-indent: -1000em;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 70px;
}
* html #ChristmasDeco1 {
    background-image: none;
    background-repeat: none;
    width: 1300px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/static/sticker/s_17.png', sizingMethod='crop');
 }
</style>
<div id="ChristmasDeco1">Merry Christmas!</div>

2) 컬러 방울 (1411px)

<style type="text/css">
#ChristmasDeco2 {
    background: url(http://cfs.tistory.com/static/sticker/s_18.png) repeat; text-indent: -1000em;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 70px;
}
* html #ChristmasDeco2 {
    background-image: none;
    background-repeat: none;
    width: 1411px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/static/sticker/s_18.png', sizingMethod='crop');
 }
</style>
<div id="ChristmasDeco2">Merry Christmas!</div>

3) 리본트리 (1447px)

<style type="text/css">
#ChristmasDeco3 {
    background: url(http://cfs.tistory.com/static/sticker/s_19.png) repeat; text-indent: -1000em;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 70px;
}
* html #ChristmasDeco3 {
    background-image: none;
    background-repeat: none;
    width: 1447px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/static/sticker/s_19.png', sizingMethod='crop');
 }
</style>
<div id="ChristmasDeco3">Merry Christmas!</div>


위의 방법을 이용하여 좀 더 즐거운 크리스마스 분위기를 만들어 보세요!
저작자 표시 비영리 변경 금지

'나이스팁 > 블로그' 카테고리의 다른 글

블로그 및 블로거를 이용한 포토샵 강의를 진행 합니다..  (20) 2012/01/30
본문스크랩을 링크스크랩으로 기능 개선 하라!  (14) 2012/01/27
티스토리 블로그에 크리스마스 장식 해보기  (26) 2011/12/20
재아넷에서 [블로그명함 만들기] 이벤트를 합니다.  (18) 2011/12/11
블로그 사이즈 변화로 손해 보는것들...  (28) 2011/11/29
새롭게 바뀐 티스토리 이렇게 다시 바꾸면 더 좋지 않을까?  (19) 2011/10/27
포스팅이 유익하셨다면 추천 부탁드립니다. ^^
홈으로
Post by : 재아
TAG , , , , , , , , , , , ,
받은 트랙백이 없고 댓글 26개

여러분의 소중한 댓글입니다.

  1. BlogIcon 백전백승 2011/12/20 21:12
     수정/삭제 댓글쓰기 댓글주소

    달기도 어렵지 않으니 많이 할 것 같은데요.

  2. BlogIcon 윈컴이 2011/12/20 22:02
     수정/삭제 댓글쓰기 댓글주소

    기억하시고 계신다니, 대단하시네요.

  3. BlogIcon Yitzhak 2011/12/20 22:51
     수정/삭제 댓글쓰기 댓글주소

    재아님! 그나저나 명함 끝났어요? 기회를 한번 더 주시면 안될까요?ㅠㅠ

    • BlogIcon 재아 2011/12/20 23:07
       수정/삭제 댓글주소

      죄송하지만 신청 끝났구요!!지금 작업진행중입니다.ㅠㅠ

      내년에 다시 기회를 잡아보겠습니다.^^;

  4. BlogIcon 노지 2011/12/21 00:01
     수정/삭제 댓글쓰기 댓글주소

    오오 사람들이 좋아하겠습니다, ㅎㅎㅎ

  5. BlogIcon 별이 2011/12/21 00:36
     수정/삭제 댓글쓰기 댓글주소

    블로그에 크리스마스 장식이라.. 괜찮은걸요^^
    하루 마무리 잘하시고, 좋은꿈 꾸세요^^

  6. BlogIcon 원삼촌 2011/12/21 03:13
     수정/삭제 댓글쓰기 댓글주소

    이제 정말 크리스마스가 얼마 안남았네요^^ 슬슬 분위기가 나는 것 같습니다ㅎㅎ

  7. BlogIcon 도플파란 2011/12/21 08:24
     수정/삭제 댓글쓰기 댓글주소

    이제 성탄절이 얼마 안남았군요....

  8. BlogIcon 하늘엔별 2011/12/21 08:38
     수정/삭제 댓글쓰기 댓글주소

    장식할까 말까 망설여지네요.
    요즘 왜 이리 정신이 없는지... ^^;;

  9. BlogIcon MastmanBAN 2011/12/21 09:53
     수정/삭제 댓글쓰기 댓글주소

    안그래도 찾고 있었는데... 감사합니다. 바로 적용~~~ ㅋ

  10. BlogIcon Dr.NODISK 2011/12/21 12:05
     수정/삭제 댓글쓰기 댓글주소

    와 귀엽네요 ㅋㅋㅋ 간단하기도 하고!
    한번 해봐야겟어요 ㅎㅎㅎㅎ

  11. BlogIcon 마속 2011/12/21 14:45
     수정/삭제 댓글쓰기 댓글주소

    크흐~ 벌써 크리스마스로군요... ㅠㅠ

  12. BlogIcon 뉴론 2011/12/21 19:17
     수정/삭제 댓글쓰기 댓글주소

    크리스마스 장식트리가 이쁘네염 잘보고 가염.

  13. BlogIcon demun 2011/12/25 13:23
     수정/삭제 댓글쓰기 댓글주소

    좋은데요...크리스마스 느낌이 확 나네요...

댓글을 달아주세요!