구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)
width="1000"
height="500"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UU4yBEgJVsCY7TfuH6OqGPwIzKrVpZxbxhLm0aQFdqvLKeaAGlV5vf7F-5aZm816gFXtREIRKLanmnQ4FTw5hskwCwKRQnIAtsiTAQVp3jDGQNeUpX4SJ9G58U1ne7kEV4NHqrsy0t4/s0/calender-in-blogger-02.png"
/>
구글 캘린더를 이용하면 웹사이트에 달력을 추가할 수 있습니다.
데스크톱뿐만아니라 모바일 앱으로 연동하여 일, 주, 월 단위로 자신의 일정을 쉽게
관리할 수 있습니다. 이 포스팅에서는 구글 블로그 사이드바에 달력 위젯을
추가하는 방법에 대해 알아봅니다. 아래 단계를 따라 천천히 살펴보세요.
alt="Google Calendar icon"
width="76"
height="76"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi69M18ZXmD20GnAGW4F49orzDgOJqx_pIhWLEHiAV667Jsf5pZ1K_zshcVrHw6q-xg7Md2gpe1EHEh-8BO54XMKPO4A7Ran-AjswM3Biu-oeveP8RKKZByBh_GzbtxvlzcPP8ulItzuMo/s0/Google_Calendar_icon.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
STEP 1. 구글 캘린더 접속
먼저 구글 계정으로 로그인 합니다. 이미 로그인되어 있다면 구글 캘린더
홈페이지로 바로 이동됩니다.
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
width="440"
height="490"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNL0H-hOmm084a8HwRHZNnB8Qos0FJNSjBEVK6UKLmetIoS8j8WONs2H12Ue0jDI71xra4EbsghliZQFsz-EAdFOlWBz8cv3OhodjTTFNxcRhczfJgEiYmsqO57Id78DoTEpvH3sKYycI/s0/google-calendar-login.PNG"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
로그인을 완료하면 다음과 같이 캘린더가 로드됩니다. 우측 상단에서 주, 일, 월
단위로 일정을 살펴볼 수 있습니다.
class="lazy"
width="1024"
height="768"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8fypErtDX8GLfaD_g78bDeRrx3Z5QH0nj7HTvfO0RlzagwcAInTdU1YngDvTyX5lX1ffXr5-qSmKF5_Em6GPefE-L-GDmWcXmh6Mm5B1hUKeHIg01QNMLz5mTuZb6h3bUHXYanA_G9_0/s0/google-calendar-home-04.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
STEP 2. 달력 맞춤 설정하기
블로그에 달력을 넣기 전에 맞춤 설정을 해야 합니다.
페이지의 좌측 중앙 약간 아래에 내 계정 이름, 생일, 알림, Tasks 메뉴가
있습니다. 그 중에서 내 계정 이름에 마우스를 올리면 더 보기 아이콘이
나타납니다. 이 아이콘을 클릭하고 설정 및 공유 페이지로 이동합니다.
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5u9QuVSkB-y3aeUIKRQTVQs9750Zlbvcj_SIkqVh4mVeWbhKNVN791aSOyB-3tOKWdpJsyAuMSbVpxoVCb_tYeA2D8NHGMlPcSqFYsZchWfBZapDwgKCrhDyQON1Nkwx7fAuUHn3hxPk/s0/google-calendar-custom-02.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
title="구글 캘린더 맞춤 설정1"
/>
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNzSE5x0YdGnheZd0C3gQwjT_zgfXbQddcHzSn3g622gV9MTzPW04Orb74bwDIe7U8QF9frKuWtMm69UWUhwDAMdMrcFXhKzpVmsHJ0biMm1M73n3ELkmcVLzPk7VcPtrp38HgWSkhKyQ/s0/google-calendar-custom-04.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
title="구글 캘린더 맞춤 설정2"
/>
설정 및 공유 페이지에서 캘린더 통합 메뉴를 찾습니다.
class="lazy"
width="1024"
height="768"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rI2YNbBU0xqHLdc0sw8JbHEZJU_uCuS8zMR3VDoyL5iPjveO6AK0JH6TXmRUIVjppU4cCojB7o7uO6O7AjVLrKtaIhr_BeC3D3MuPsl44suRrReUm8IQZpOS6a2OmaYsVA_WSrXOMdA/s0/google-calendar-iframe-01.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
스크롤을 내려서 찾아도 됩니다.
캘린더 통합 메뉴의 하위 메뉴 중 맞춤 설정 버튼을 누르면 캘린더를 꾸밀
수 있습니다.
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
width="1024"
height="768"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiibgkRuHGIx40Yz0-w-DKOqFHKe2QYTC7GsLBXbiYkkGtaD56IDA_BOp5jtP6_YIybS51RF3caReAvlFC0VBYGUDOTovq0-2-GKEcXV1fX9bj6UGCIL2FrLQS42rs41Z7ou9Ee-FUD-h0/s0/google-calendar-iframe-02.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
width="1024"
height="768"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHEWt6yy-lsWsIAgGn9n9_EIxhDGbmdHgO_KWZmK081mqJrSHRRkdPQH3xgmpQlXRy_KykJHPFNV3nMqfbZUKVMLliKvn1MTsvgfRhlJ13fBb-NKLadwC3UxoKn8RGCtXjCpbwnTSxEXQ/s0/google-calendar-custom-05.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
좌측 메뉴에서
제목, 표시할 버튼, 가로 세로 크기, 배경색, 테두리 유무, 기본 탭 등 을
설정할 수 있습니다. 자신의 블로그 테마에 어울리도록 꾸밉니다.
사이드바에 삽입하기 위해 위젯 크기를 300x300으로 많이 줄였지만
800x600처럼 크기를 크게 해도 상관없습니다.
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
width="1031"
height="572"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_6KOBDmFoo-5m6KOdXjPB_pZ0XEeTEO9ZCGgc22S8Md2N065eTiTQ0g_421qdN2jmzMvimMgKg6zpAK126miAcz39z0SfUi25HVpumABKRIQbBqJUYRwmlUn0Nm61LPdX665Jmc563w/s0/google-calendar-custom-06.PNG"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
STEP 3. Blogger에 추가하기
iframe 삽입 코드를 복사합니다.
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
width="1143"
height="794"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihO_rYtMPW7S5fiktg4KguXVe6t0EqNo_so_21cd0d5sbqrFzNB6LRAS1TZjlg8IsObnYLz9WD2qp96EG3vjuZrxOAkrEbnqnOMzC6a2aoeCkadmzg-vs6-nuMOmnGTytVADI-6EtJkZM/s0/google-calendar-custom-08.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
Blogger 대시보드 > 레이아웃 > 사이드바 섹션에서 + 버튼을 눌러
HTML/자바스크립트 가젯을 추가합니다.
alt="구글 블로그 html 달력 위젯 - 구글 캘린더(Google Calendar)"
width="788"
height="488"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMjRz8Pedm3xgEwy3r1VhSCRWpw628z70zqKw89LMBgQfVC1cTJRVsmppTMtEcTLHt4XnANAS_-29wXUoeJ11_H_LD2LxV-_LAyG3NUV2yebOEUY6YT97FAWj6RLty5FCBwFARPOKb8o/s0/add-gadget-htmljs.png"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
복사한 iframe 삽입 코드를 붙여 넣고 저장 버튼을 누릅니다. 블로그 홈페이지에서
변경된 사항을 확인하십시오.
style="border-width:0"
width="425"
height="425"
frameborder="0"
scrolling="no"
>