티스토리 팝업 띄우기를 만들어 봅니다
준비물은 팝업 내용을 미리 만들어 놓아야겠죠.
텍스트보다는 이미지로 만들면 사이즈가 정해져 있기에
사용자가 크기 조절을 하더라도 줄 바꿈이 일어나지 않습니다.
이미지를 만들고 그 이미지를 넣은 html 문서가 필요합니다.
이미지는 웹에서 볼 수 있는 장소에 올려야 하는데
개인 호스팅 계정이 있으면 사용하면 되고
없다면 티스토리 비공개로 발행합니다.
html 문서를 작성해서 이미지와 문서를 같이 넣고
주소를 가져오는 방법입니다.
비공개 페이지라도 주소를 가져와서 사용하는 것은
전혀 문제가 되지 않습니다.
<!-- html 문서 내용입니다. -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 팝업 설정 </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<table border="0">
<a href="이동할 주소"><img src="비공개 발행한 이미지 주소.jpg"></a>
</table>
</BODY>
</HTML>
주소만 확인해서 넣고 html로 저장합니다.
이미지만 보여준다면
<img src="비공개 발행한 이미지 주소.jpg"> 이렇게만 넣으면 됩니다.
위 문서를 비공개 페이지에 넣고 문서 주소도 복사합니다.
이제 티스토리 관리 화면 / 스킨 편집 / html로 들어갑니다.
이 위치에 아래 소스를 넣습니다.
<!-- 팝업 설정 시작 -->
<script language="javascript">
function OpenWindow() {
window.open("비공개 페이지에 넣었던 문서 주소","_blank","top=100,left=200,width=400,height=300,resizable=1,scrollbars=no");
}
</script>
<!-- 팝업 설정 끝 -->
</head>
위의 위치는 <head></head> 사이에 넣습니다.
<body onLoad="OpenWindow()">
body에 넣는 위치는 이미지대로 하면 됩니다.
팝업을 확인합니다.
팝업 크기와 나타나는 위치는 임의로 수정해서 사용하면 됩니다.
비공개 페이지에서 가져온 이미지 제대로 나오죠.