반응형
블로그 상단에 크리스마스 장식을 달아보세요! 제 블로그에 보시는것처럼 블로그 상단에 트리 장식을 할수 있습니다.
작업도 간단하고 방법도 간단 합니다. 소스 제공은 티스토리 측에서 하고 있습니다.
사실 제가 블로그를 오래 하다보니 이런것도 기억을 하고 있습니다.
블로그에 장착 하는 방법은 간단 합니다.
위의 방법을 이용하여 좀 더 즐거운 크리스마스 분위기를 만들어 보세요!
작업도 간단하고 방법도 간단 합니다. 소스 제공은 티스토리 측에서 하고 있습니다.
사실 제가 블로그를 오래 하다보니 이런것도 기억을 하고 있습니다.
블로그에 장착 하는 방법은 간단 합니다.
▶ 블로그에 적용 하는 방법
아래 <배너 다는 방법>을 참고하여 블로그 상단에 크리스마스 트리 및 방울 장식을 달아보세요. 총 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>
위의 방법을 이용하여 좀 더 즐거운 크리스마스 분위기를 만들어 보세요!
반응형
'나이스팁 > 블로그' 카테고리의 다른 글
| 블로그 및 블로거를 이용한 포토샵 강의를 진행 합니다.. (20) | 2012.01.30 |
|---|---|
| 본문스크랩을 링크스크랩으로 기능 개선 하라! (14) | 2012.01.27 |
| 재아넷에서 [블로그명함 만들기] 이벤트를 합니다. (18) | 2011.12.11 |
| 블로그 사이즈 변화로 손해 보는것들... (28) | 2011.11.29 |
| 새롭게 바뀐 티스토리 이렇게 다시 바꾸면 더 좋지 않을까? (19) | 2011.10.27 |
 |
 |
|
|||||
 |
 |
 |
|||||
 |
|||||||
 |
|||||||
 |
|||||||
| 공감 | |||||||
 |
|||||||
 |
 |
 |
 |
||||
 |
 |
||||||
 |
|||||||
 |
 |
 |
|||||
 |
|||||||
|
|
|
|
|
|
|
|
|
 |
 |
 |
 |
 |
 |
 |
