반응형
블로그 상단에 크리스마스 장식을 달아보세요!
제 블로그에 보시는것처럼 블로그 상단에 트리 장식을 할수 있습니다.
작업도 간단하고 방법도 간단 합니다.
소스 제공은 티스토리 측에서 하고 있습니다.
사실 제가 블로그를 오래 하다보니 이런것도 기억을 하고 있습니다.
2008년에 티스토리측에서 블로그에 크리스마스 분위기를 낼수 있도록 준비를 한게 있습니다.
공지사항을 보시면 되는데요
관련 글 입니다. http://notice.tistory.com/1216
블로그에 장착 하는 방법은 간단 합니다.
위의 방법을 이용하여 좀 더 즐거운 크리스마스 분위기를 만들어 보세요!
제 블로그에 보시는것처럼 블로그 상단에 트리 장식을 할수 있습니다.
작업도 간단하고 방법도 간단 합니다.
소스 제공은 티스토리 측에서 하고 있습니다.
사실 제가 블로그를 오래 하다보니 이런것도 기억을 하고 있습니다.
2008년에 티스토리측에서 블로그에 크리스마스 분위기를 낼수 있도록 준비를 한게 있습니다.
공지사항을 보시면 되는데요
관련 글 입니다. http://notice.tistory.com/1216
블로그에 장착 하는 방법은 간단 합니다.
▶ 블로그에 적용 하는 방법
아래 <배너 다는 방법>을 참고하여 블로그 상단에 크리스마스 트리 및 방울 장식을 달아보세요. 총 3종의 장식이 준비되어 있으며, 장식 종류에 따라 가로 사이즈가 각각 다릅니다. (장식을 달 경우 장식 뒤로 가려지는 배너나 링크는 클릭이 되지 않을 수 있습니다.)
※ 배너 다는 방법 (천천히 따라해 보세요!)
1. 배너를 달고 싶은 블로그의 관리자 화면으로 간 뒤, 스킨 > HTML/CSS편집으로 이동합니다.
2. 위 이미지에 보이는 것처럼 Skin.html이라고 보이는 영역에서 첫번째 <body> 아래에
배너의 HTML 코드를 넣어주세요!
※ 배너 다는 방법 (천천히 따라해 보세요!)
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>
</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>
#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>
#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>
#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>
위의 방법을 이용하여 좀 더 즐거운 크리스마스 분위기를 만들어 보세요!
반응형
'나이스팁 > 블로그' 카테고리의 다른 글
| 블로그 목표 달성 플러그인으로 달려보자~ (38) | 2011.01.15 |
|---|---|
| 블로그에서 뷰애드를 내리게 된 이유는.. (58) | 2011.01.05 |
| 블로그 주인에게 이메일 보내기 버튼 만들기 (38) | 2010.11.23 |
| 블로그 이메일 주소 아이콘으로 하는 방법 (26) | 2010.11.17 |
| 블로그 댓글창 배경색상 글씨색상 글씨크기 조정하기 (22) | 2010.11.15 |
 |
 |
|
|||||
 |
 |
 |
|||||
 |
|||||||
 |
|||||||
 |
|||||||
| 공감 | |||||||
 |
|||||||
 |
 |
 |
 |
||||
 |
 |
||||||
 |
|||||||
 |
 |
 |
|||||
 |
|||||||
|
|
|
|
|
|
|
|
|
 |
 |
 |
 |
 |
 |
 |
