이번 글은 티스토리에서 배포중인 독도 광고 모금 좌측, 우측 배너를 한꺼번에 블로그에 달 수 있는 팁입니다.
현재 배포중인 좌/우측 배너를 그냥 복사해서 붙이게 되면 좌측이나 우측 중 하나의 배너만이 화면에 보이게 될 것입니다. (복사해서 붙인 순서로 볼때 아래에 복사된 소스 코드)
이런 현상에 발생되는 이유는
<a href="http://hyphen.daum.net/request/campaign/sub/dokdo.do?articleId=3&page=0 " title="독도 광고 모금 캠페인" target="_blank" id="tistorySticker">독도 광고 모금 캠페인</a>
<style type="text/css">
#tistorySticker {
position: absolute; left: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
<a href="http://hyphen.daum.net/request/campaign/sub/dokdo.do?articleId=3&page=0 " title="독도 광고 모금 캠페인" target="_blank" id="tistorySticker">독도 광고 모금 캠페인</a>
<style type="text/css">
#tistorySticker {
position: absolute; right: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black_Rt.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
<style type="text/css">
#tistorySticker {
position: absolute; left: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
<a href="http://hyphen.daum.net/request/campaign/sub/dokdo.do?articleId=3&page=0 " title="독도 광고 모금 캠페인" target="_blank" id="tistorySticker">독도 광고 모금 캠페인</a>
<style type="text/css">
#tistorySticker {
position: absolute; right: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black_Rt.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
위와 같이 주황색으로 굵게 표시된 부분이 배너를 다는 위치와 기타 배너 이미지의 위치, 크기 등 스타일을 지정해 주는 부분인데 이 부분이 좌/우측 배너가 같은 이름으로 사용하고 호출하여 발생되는 문제입니다.
따라서 아래와 같이 다른 이름으로 사용한다면 두개를 함께 블로그에 보일 수 있습니다.
<a href="http://hyphen.daum.net/request/campaign/sub/dokdo.do?articleId=3&page=0 " title="독도 광고 모금 캠페인" target="_blank" id="tistorySticker_left">독도 광고 모금 캠페인</a>
<style type="text/css">
#tistorySticker_left {
position: absolute; left: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
<a href="http://hyphen.daum.net/request/campaign/sub/dokdo.do?articleId=3&page=0 " title="독도 광고 모금 캠페인" target="_blank" id="tistorySticker_right">독도 광고 모금 캠페인</a>
<style type="text/css">
#tistorySticker_right {
position: absolute; right: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black_Rt.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
<style type="text/css">
#tistorySticker_left {
position: absolute; left: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
<a href="http://hyphen.daum.net/request/campaign/sub/dokdo.do?articleId=3&page=0 " title="독도 광고 모금 캠페인" target="_blank" id="tistorySticker_right">독도 광고 모금 캠페인</a>
<style type="text/css">
#tistorySticker_right {
position: absolute; right: 0; top: 0;
background: url('http://image.request.daum.net/v1/img/ftp/request/dokdo_kor_Black_Rt.gif') no-repeat; width: 132px; height: 132px; text-indent: -100em; display: block; overflow: hidden;
}
</style>
이상입니다. ^^