구글 블로그에 팝업을 만드는 방법, 위치
블로그에 팝업이 필요할까 싶은 생각도 듭니다. 팝업은 방문자의 눈에 가장 확실하게 보이는 방법이지만, 원하지 않는 방문자에게는 거추장스럽고 불편하게 만들 수 있습니다. 팝업이 아닌 조금 더 부드럽고 자연스러운 방법이라면 공지로 발행하는 방법이 있습니다.
하지만, 팝업이 필요한 곳도 있습니다. 이번에 가게 홍보용으로 만든 섬네일 뷰어용으로 만든 블로그에서는 공지로 띄울 수도 없습니다. 팝업을 만드는 코드는 간단한 것부터 복잡한 소스가 있습니다. 흔히 사이트에 들어가면 많은 팝업을 만납니다. 방문자 입장에서는 귀찮을 정도의 팝업이지만, 코드를 만들기까지는 복잡합니다. 오늘은 그만 보기 등의 버튼을 넣기도 쉬운 것이 아닌데, 다행이라면 많은 분들이 골치 아픈 소스를 무료로 제공하고 있습니다. 맘에 드는 것을 골라 선택하면 됩니다. 그런데 구글 블로그에서는 아무리 좋은 소스를, 분명히 확인한 코드인데도 구글 블로그에만 넣으면 나오지 않습니다.
간단한 팝업 소스라고 하면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Popup Example</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<title> 팝업 설정 </title>
</head>
<body>
<table border="0">
<a href="이동할 주소"><img src="이미지.jpg"></a>
</table>
</body>
</html>
이 소스를 popup.html 파일 저장합니다. 호스팅에 넣어도 되고 티스토리라면 비공개 저장을 하고 그 주소를 활용하면 됩니다.
<!-- 팝업 설정 시작 -->
<script language="javascript">
function OpenWindow() {
window.open("popup.html 저장 경로","_blank","top=100,left=200,width=400,height=300,resizable=1,scrollbars=no");
}
</script>
<!-- 팝업 설정 끝 -->
이 소스를 복사해서 <head></head> 사이에 넣습니다. 그리고 <body>를 찾아 <body onLoad="OpenWindow()"> 이렇게 수정합니다. 티스토리라면 이렇게 하면 팝업이 올라옵니다.
텍스트를 넣고 싶다면 이미지 넣는 자리에 원하는 문구를 적어도 됩니다. 아마 깔끔하게 만들려면 조금 궁리해야 하지 않을까 합니다만, 그래도 팝업은 올라옵니다.
구글 블로그에서 팝업을 나오게 하기 위한 방법이 있는데요, 긴 시간이 걸렸습니다. 먼저 소스를 보여드리겠습니다. 소스는 총 3가지로 나누어집니다.
1. js 파일입니다.
// popup.js 파일
$(document).ready(function () {
// 페이지 로드 후 3초 뒤에 팝업을 보여줍니다.
setTimeout(function () {
$('#popupContainer').fadeIn();
}, 3000);
$('#closePopupButton').click(function () {
$('#popupContainer').fadeOut();
});
});
// popup.js 파일
// 페이지 로드와 동시에 팝업을 보여줍니다.
window.onload = function () {
document.getElementById('popupContainer').style.display = 'block';
};
// 팝업 닫기 버튼 클릭 시
document.getElementById('closePopupButton').onclick = function () {
document.getElementById('popupContainer').style.display = 'none';
js 파일은 두 가지입니다. 먼저 것은 페이지가 열리고 3초 후에 팝업이 올라옵니다. 그 아래 소스는 페이지가 열리면 팝업이 바로 올라옵니다. 원하는 한 가지만 사용하면 되겠습니다. 물론 시간을 알리는 3000을 수정해서 사용할 수도 있습니다. 3000은 3초를 말합니다.
2. css 파일입니다.
/* 팝업 컨테이너 스타일 */
#popupContainer {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
#popupContent {
text-align: center;
}
#closePopupButton {
margin-top: 10px;
padding: 5px 10px;
cursor: pointer;
}
위의 두 가지 파일을 popup.css와 popup.js 파일로 저장합니다. 그리고 구글 블로그 스킨에서 불러오는 코드입니다.
<!-- 외부 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="https://저장경로/popup.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://저장경로/popup.js"></script>
<!-- popup.html 파일을 불러오는 코드 -->
<div id="popupContainer">
<!-- popup.html 파일의 내용 -->
<h2>Popup Title</h2>
<p>This is the content of the popup.</p>
<button id="closePopupButton">Close</button>
</div>
이 코드를 구글 블로그 스킨 <body></body> 사이에 넣습니다. <body> 사이에는 상당히 많은 코드가 있습니다. 어느 곳이나 <body> 범위가 될 수있습니다. 구글 블로그 스킨 코드 맨아래에 </body>가 있습니다. 처음에는 편하게 넣었는데, 팝업이 나오지 않습니다. 몇 군데 넣었는데 이번에는 팝업은 나오는데 블로그에서 저장한 이미지의 섬네일이 사라져버립니다. 아예 나오지 않습니다. 상품 홍보용 블로그이기에 메인 페이지에서 섬네일이 나오지 않는다면 팝업을 사용할 필요가 없는거죠. popup.css 코드가 구글 블로그 스킨 이미지를 처리하는 코드와 충돌이 일어나는 것은 아닌가 생각이 들지만, 해결할 수 있는 실력은 없습니다.
아쉽지만 마지막에는 포기하고 다른 방법을 찾았습니다. 레이아웃에서 게시판 제목 윗부분에 위젯을 하나 생성해서 알림판용으로 사용할까도 생각했는데요, 그러다 마지막으로 한 번 더 적용해 보았습니다. 이번에는 바로 아래에 외부 파일을 불러오는 코드를 넣었습니다. 그랬더니 섬네일도 이상 없이 팝업이 나오네요.
바로 이 자리입니다. 팝업 코드는 어느 위치에서도 상관이 없을 것 같았는데, 코드 순서에 따라서 영향을 받는 것 같네요. 그래서 팝업 코드를 제일 먼저 실행될 수 있게 아래에 넣었습니다. 구글 블로그는 정책상 팝업이 허용이 안 된다는 글도 보았지만, html 기반에서는 사용자가 원하는 소스를 넣고 만들어 꾸밀 수도 있다고 들었기에 시도를 해보았는데요, 결국 해냈습니다. 그것도 다름이 아닌 위치가 문제였네요. 팝업이 열리는 시간과 닫히는 시간까지 조정되는 팝업을 찾아보겠습니다. 구글 블로그에서 팝업 창을 띄우는 것이 까다로왔지만, 사실 html 기반이라면 어느 곳에도 이 코드를 사용하면 됩니다.
그리고, 구글 블로그 스킨에서 오류가 나는 코드 한 줄이 있는데요,
<link href="https://경로/popup.css" rel="stylesheet" type="text/css">
이 코드 한 줄을 넣으면 </link> 닫는 것이 빠졌다는 오류 알림이 나옵니다. <link>는 그 자체로 닫는 역할을 합니다. </link>를 넣지 않아도 되죠. 하지만, 수정하지 않으면 저장되지 않습니다. </link>를 넣고 저장한 후에 다시 코드를 보면 </link>가 없어지고 <link> 내부 순서가 바뀌어 있는 것을 확인할 수 있습니다. 구글 블로그에서 해달라는 대로 <link href="https://경로/popup.css" rel="stylesheet" type="text/css"></link>이렇게 넣고 저장하면 됩니다.
그리고 이 페이지에서도 팝업 창을 보여드리겠습니다. 게시글에서 팝업은 쉽습니다. 외부 파일 불러오는 코드 전체를, html 보기 화면에서 넣으면 됩니다. 팝업은 정해진 위치에 노출되니 어느 곳이든 편한 자리에 넣으면 됩니다.
** 게시글에 팝업 코드르 넣으니 코드가 잘못되었다고 나오는데 결과는 어떻게 보일지 모르겠습니다. 스킨에는 위의 경로 넣었을 때는 아무런 오류없이 정상적으로 팝업 창을 확인했습니다. 팝업 창은 3초 후에 올라옵니다. 지금 이 게시판에서는 </link>는 없어도 됩니다.
The popup opens like this.