작업실

그누보드5 아미나ASR 테마에 구글 캘린더 설치하기

컨텐츠 정보

본문

 

 

위와 같이 그누보드5에 구글 캘린더를 넣는 방법입니다.

 

 

1. 소스 생성하기

 

 

 

구글 캘런더에 들어가서 위와 같이 캘린더 설정에 들어갑니다.

 


 

위와 같이 '이 캘린더 추가하기' 오른쪽에 있는 색상, 크기 및 기타 옵션 사용자설정을 클릭합니다. 

 

밑에 있는 코드를 그대로 넣어도 되지만 커스텀할 여지가 많아 옵션 클릭을 추천합니다.

 


 

위와 같이 여러가지 설정을 할 수 있습니다. 

 

참고로 너비와 높이는 반응형으로 설정되어 큰 의미는 없습니다.

 

다 설정한 뒤에 오른쪽 위에 있는 HTML 업데이트를 클릭 후 소스를 긁습니다.

 

그 중에서 src="블라블라" 블라블라의 내용만 따옵니다.

 

예를 들어 

 

https://www.google.com/calendar/embed?src=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx%40group.calendar.google.com&ctz=Asia/Seoul

 

위와 같은 형식이죠.

 

 

2. php 문서 생성하기

 

내용은 밑의 코드를 참조하시거나 첨부파일을 참고하시면 됩니다.

 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가 
?>
<style>
.embed-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe,
.embed-container object,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="embed-container">
<object id="calendar_google" width="800px" height="600px" data="구글달력주소">
<iframe src="구글달력주소" width="800" height="600" frameborder="0"></iframe></object>
</div>
<br>

 

1번에서 추출한 주소를 구글달력주소에 넣으면 됩니다.

 

 

3. 문서 등록하기

 

그누보드 관리자 모드 -> 아미나 스킨 -> 문서 설정 -> 일반문서 등록 -> 등록그룹(원하는 그룹 지정하기) -> 문서ID (calendar_google) -> 문서파일(calendar_google) -> 메뉴명(구글 캘린더) -> 등록

 

위와 같이 등록이 됩니다.

 

 

4. 메뉴 순서 설정하기

 

그누보드 관리자 모드 -> 아미나 스킨 -> 메뉴설정 -> 넣은 그룹의 오른쪽에 서브메뉴 클릭하여 순서 지정

 

위와 같이 그룹의 메뉴 순서를 설정할 수 있습니다.

 

 

이제 해당 메뉴를 눌러보면 정확하게 표현되는 것을 볼 수 있습니다.

 

저는 new-basic 테마라서 반응형 부트스트랩이지만 폰에서도 정확하게 반응형으로 나오는 것을 볼 수 있습니다.

 

모바일에서도 당연히 잘 나오구요 ^^

관련자료

댓글 3개 / 1페이지

선구자님의 댓글

요즘 아미나도 되련지 모르겠습니다.
생각이 나서 구글에 검색했는데 우성군님 홈피로 연결되네요
Total 157 / 12 Page
RSS
소셜로그인 5종 탑재하였습니다. 댓글 2

구글, 페이스북, 트위터, 네이버, 카카오톡 5종이면 거의 모든 인터넷 사용자들을 만족시킬 수 있겠죠? ^^네이버는 도사님 작품이라 올리진 못하…

그누보드5 아미나ASR 테마에 구글 캘린더 설치하기 댓글 3

위와 같이 그누보드5에 구글 캘린더를 넣는 방법입니다.1. 소스 생성하기구글 캘런더에 들어가서 위와 같이 캘린더 설정에 들어갑니다.위와 같이 '…

그누보드5 아미나ASR 테마에 네이버 캘린더 설치하기 댓글 14

네이버 캘린더의 공유기능을 이용하여 그누보드5에 캘린더를 표시하는 방법을 알아보겠습니다.1. 소스 생성하기http://blog.naver.com…

new-basic 테마에서 반응형 가로 스크롤 완벽 해결 방법 댓글 2

부트스트랩 반응형을 위한 media all을 수정하여 완벽하게 해결했습니다.브라우저 크기를 아무렇게나 조절해도 완벽하게 반응하네요 ^^당연히 스…

ASR테마에서 가로 스크롤 안보이게 하는 방법 댓글 6

특정 해상도에서 가로 스크롤이 생겨 보기 좋지 않은데요.임시적으로 가로 스크롤을 안보이게 할 수 있습니다./테마루트/colorset/Basic/…

소셜로그인 아이콘팩

현재 제 홈페이지에 적용 중인 아이콘팩입니다.출처는 관련 링크에 있으니 PSD 파일 받고 싶은 분은 참고하시구요.네이버는 아이콘팩에 맞게 수정했…

최근글


새댓글


알림 0