blogger
blogger - 구글 드라이브로 파일 호스팅 구현
티스토리는 홈페이지를 꾸미기 위해 필요한 공간 20Mb을 개인별로 제공합니다. 적은 공간이지만 홈페이지나 블로그를 꾸미기에 충분한 공간입니다. 개인 공간을 이용해 css, js, 이미지를 업로드 해서 티스토리를 꾸밀 수 있습니다.
하지만 구글 블로거는 XML 파일 하나에 대부분의 코드가 삽입되어 파일 용량이 커질 뿐 아니라 사용자가 레이아웃을 수정하기에 어려움이 있을 수 있습니다. CSS, Javascript, XML 코드가 하나로 되어 있다고 상상해보세요.
외부 파일이 있다는 건 그만큼 레이아웃을 구현하기 훨씬 수월해질 수 있다는 것을 의미합니다. 다행이라면 조금만 생각해보면 티스토리처럼 외부소스를 이용할 수 있는 방법이 있습니다. 아마 일부는 눈치채셨을지 모르겠네요. 바로 구글 드라이브를 이용하는 것입니다.
네 Google 드라이브로 CSS, Javascript 파일 호스팅을 구현할 수 있습니다. <link…/> 나 <script …/> 의 형식인 내용을 XML 파일과 별도로 저장하여 호스팅할 수 있습니다.
먼저 해야 할 일은 XML 파일의 <style>…</style>이나 <b:skin>…</b:skin>의 내용을 텍스트 편집기에 붙여 넣고, 확장자 .css 로 저장하세요.
일부 사용자 정의된 테마에는 CSS 변수가 있을 수 있습니다. 이럴 때는 사용중인 실제 블로그에 접속하여 마우스 오른쪽 버튼을 클릭한 다음 페이지 소스 보기를 선택하여 렌더링된 스타일 시트의 모든 내용을 복사하여 텍스트 편집기에 붙여 넣기 하세요.
자바스크립트도 위와 같은 방법으로 텍스트 편집기에 붙여 넣기 한 다음 확장자 .js 로 저장합니다.
이제 구글 드라이브로 이동하여 호스팅할 파일을 업로드한 후 공유 옵션을 선택합니다. 공유 옵션은 ‘전체 공개’로 변경 및 링크를 복사한 다음 완료 버튼을 누르세요.
‘https://drive.google.com/file/d/공유 파일 ID/view?usp=sharing’ 에서 ‘공유 파일 ID’를 복사하여 아래 표에 예시된 곳에 붙여 넣은 다음 XML 파일 <head>와 </head> 사이에 붙여 넣기 하세요.
처음에는 누구나 어려울 수 있고, 단 번에 이해되지 않을 수 있습니다. 하지만 몇 번 하다 보면 아하!라는 감탄사가 나오지 않을까 싶습니다.
하지만 구글 블로거는 XML 파일 하나에 대부분의 코드가 삽입되어 파일 용량이 커질 뿐 아니라 사용자가 레이아웃을 수정하기에 어려움이 있을 수 있습니다. CSS, Javascript, XML 코드가 하나로 되어 있다고 상상해보세요.
외부 파일이 있다는 건 그만큼 레이아웃을 구현하기 훨씬 수월해질 수 있다는 것을 의미합니다. 다행이라면 조금만 생각해보면 티스토리처럼 외부소스를 이용할 수 있는 방법이 있습니다. 아마 일부는 눈치채셨을지 모르겠네요. 바로 구글 드라이브를 이용하는 것입니다.
네 Google 드라이브로 CSS, Javascript 파일 호스팅을 구현할 수 있습니다. <link…/> 나 <script …/> 의 형식인 내용을 XML 파일과 별도로 저장하여 호스팅할 수 있습니다.
먼저 해야 할 일은 XML 파일의 <style>…</style>이나 <b:skin>…</b:skin>의 내용을 텍스트 편집기에 붙여 넣고, 확장자 .css 로 저장하세요.
일부 사용자 정의된 테마에는 CSS 변수가 있을 수 있습니다. 이럴 때는 사용중인 실제 블로그에 접속하여 마우스 오른쪽 버튼을 클릭한 다음 페이지 소스 보기를 선택하여 렌더링된 스타일 시트의 모든 내용을 복사하여 텍스트 편집기에 붙여 넣기 하세요.
자바스크립트도 위와 같은 방법으로 텍스트 편집기에 붙여 넣기 한 다음 확장자 .js 로 저장합니다.
이제 구글 드라이브로 이동하여 호스팅할 파일을 업로드한 후 공유 옵션을 선택합니다. 공유 옵션은 ‘전체 공개’로 변경 및 링크를 복사한 다음 완료 버튼을 누르세요.
‘https://drive.google.com/file/d/공유 파일 ID/view?usp=sharing’ 에서 ‘공유 파일 ID’를 복사하여 아래 표에 예시된 곳에 붙여 넣은 다음 XML 파일 <head>와 </head> 사이에 붙여 넣기 하세요.
<!--// 외부 CSS 파일 //-->
<link
href='//drive.google.com/uc?export=view&id=공유 파일 ID'
rel='stylesheet' type='text/css'
/>
<!--// 외부 자바스크립트 파일 //-->
<script src='//drive.google.com/uc?export=view&id=공유 파일 ID'/>
처음에는 누구나 어려울 수 있고, 단 번에 이해되지 않을 수 있습니다. 하지만 몇 번 하다 보면 아하!라는 감탄사가 나오지 않을까 싶습니다.
![[JS] Promise 조합하기](https://4.bp.blogspot.com/-O3EpVMWcoKw/WxY6-6I4--I/AAAAAAAAB2s/KzC0FqUQtkMdw7VzT6oOR_8vbZO6EJc-ACK4BGAYYCw/w180/nth.png)
10 댓글
고맙습니다. 잘 됩니다.
답글삭제구글 블로그를 사용하시는 분이 많이 계시네요. ^^
삭제작성자가 댓글을 삭제했습니다.
답글삭제그럼 b:skin 안에 있는 CSS도 다음처럼 정리할 수 있나요?
답글삭제[b:skin]
[link rel="stylesheet" type="text/css" href="//drive.google.com/uc?export=view&id=공유 파일 ID"/]
[/b:skin]
실제 운영중인 블로그의 소스보기 한다음 style 태그 내의 코드를 복사하는 것이죠!
삭제CSS 코드를 정리하다가 보니 preload라는 것을 알게 되었는데,
답글삭제[link rel="preload" href="//drive.google.com/uc?export=view&id=공유 파일 ID"" as="style"/]
이것이 제 블로그엔 안 먹히는 것 같습니다. 혹시 하보니님 블로그엔 적용이 되나요?
자꾸 질문만 드려 죄송합니다. 구글 블로그 관련해서 활동하시는 분 만나기도 어렵고 한국어로 질문할만한 곳도 많지 않거든요.
구글 드라이브 속도가 좀 늦습니다. 속도때문일 수 있고, 순서 때문일 수 있으니 하나하나 적용해가며 답을 찾아야 하지 않을까 싶습니다.
삭제작성자가 댓글을 삭제했습니다.
답글삭제Download the Main Ad Code PHP file and upload it to the root of your website
답글삭제제가 php파일을 다운 받았는데, php 파일을 root of website에 업로드하려면 어떻게 해야 되나요??
서버 환경마다 루트가 다르므로 호스팅 관리자에 물어보는게 빠릅니다.
삭제