1. 구글 블로그스팟의 기본 기능 이해
1) 블로그스팟의 특징
구글 블로그스팟은 1999년에 시작되어 2003년 구글에 인수된
무료 블로그 서비스입니다. 계정당 최대 100개의 블로그 생성이
가능하며, 사진 및 유튜브 동영상 첨부 기능을 제공합니다.
2) 파일 첨부 및 카테고리 생성
파일 업로드는 직접 지원되지 않아 구글 드라이브 링크를 활용해야
합니다. 카테고리는 태그 메뉴를 통해 생성할 수 있으며, 특정
기능 구현을 위해 CSS 코드 추가가 필요할 수 있습니다.
2. 코드 블록 스타일 변경 및 적용
1) YouTube 동영상 화면 비율 및 여백 설정
블로그스팟에 YouTube 동영상을 올릴 때 16:9 비율을
유지하고 상하단 여백 없이 재생되도록 설정할 수 있습니다. 이를
위해 특정 CSS 코드를 추가하여 스타일을 변경하는 방법이
있습니다.
2) CSS 코드 추가를 통한 스타일 변경
원하는 CSS 스타일 코드를 복사하여 브라우저에 붙여넣고 확인한
후, 라이브러리에서 필요한 스타일을 선택하여 복사할 수
있습니다. 이 코드를 블로그스팟 테마에 적용하면 동영상 재생
환경을 개선할 수 있습니다.
3. 블로그스팟 테마 편집 및 코드 추가
1) 테마 설정 및 HTML 편집 접근
구글 계정으로 로그인 후 블로거 관리자 페이지에서 '테마'
메뉴로 이동합니다. '내 테마 custom' 항목에서 '맞춤설정
▾'의 더보기 버튼을 누르면 'HTML 편집' 옵션을 통해 코드
수정이 가능합니다.
2) 코드 블록 추가 방법
HTML 편집 화면에서 제공되는 코드 영역에 원하는 코드를
삽입하고 저장합니다. 코드가 올바르게 닫히지 않아 오류 메시지가
나타날 경우, 태그를 추가하여 코드를 완성해야 합니다.
1. YouTube 동영상 비율 및 여백 설정
1) 화면 비율 및 여백 설정 방법
YouTube 동영상을 16:9 화면 비율로 유지하고 상하단
여백 없이 재생하도록 설정하려면, 구글 블로그스팟의 코드 블록
스타일 관련 CSS 코드를 추가해야 합니다. 해당 코드는 블로그
디자인을 개선하고 시각적인 요소를 최적화하는 데 도움을 줍니다.
2) 코드 추가 및 적용
먼저, 제공된 코드 블록의 스타일 주소를 복사하여 브라우저
URL에 붙여넣고 페이지 내 스타일을 확인합니다. 이후
라이브러리에서 필요한 '*. js' 스타일을 선택하여 복사한
뒤, 테마 설정에서 HTML 편집을 통해 해당 코드를
적용합니다.
2. 코드 블록 추가 설정 적용 방법
1) 테마 설정 메뉴 접근
Google 계정으로 로그인한 후, Blogger 관리 페이지
대시보드 좌측 상단의 '☰' 메뉴에서 '테마'를 선택합니다.
오른쪽 페이지에 활성화된 테마 항목 중 '내 테마
custom'의 '맞춤설정 ▾' 항목에 있는 더보기 버튼을
클릭합니다.
2) HTML 편집을 통한 코드 삽입
더보기 버튼 클릭 시 나타나는 폴다운 메뉴에서 'HTML 편집'
항목을 선택합니다. 이곳에서 새로운 CSS 코드나
JavaScript 코드를 추가하여 블로그 디자인이나 기능에
변화를 줄 수 있습니다.
3. 구글 블로그스팟 코드 블록 추가
1) HTML 편집 기능 활용
'테마' 메뉴의 '내 테마 custom', '맞춤설정 ▾'
더보기 버튼을 통해 'HTML 편집'으로 진입합니다. 이를 통해
사용자는 블로그의 핵심 구조를 직접 수정하고 필요한 코드를
삽입할 수 있습니다.
2) 코드 추가 및 오류 해결
다운로드 받은 코드를 추가한 후 저장 시 'org. xml. .
. . ' 또는 "end-tag """. ×' 메시지가 나타날
경우, 코드의 마지막 부분에 를 추가하여 코드를 정상적으로
닫아주어야 합니다. 유료 테마의 무료 버전 사용 시에는 코드
추가 및 수정에 제약이 있을 수 있습니다.
4. 포스팅 내 코드 블록 삽입
1) 포스팅 편집기 코드 삽입
Blogspot 포스팅 작성 시, 태그와 </pre>
태그 사이에 원하는 코드를 삽입합니다. 이 방법은 텍스트 기반의
코드를 시각적으로 명확하게 구분하여 보여주는 데 효과적입니다.
2) 언어별 코드 표시 설정
코드 블록 내에서 'language' 속성을 활용하여
'html', 'css', 'xml', 'php' 등 해당
코드의 프로그래밍 언어를 지정할 수 있습니다. 이를 통해 문법
강조 기능이 활성화되어 가독성을 높일 수 있습니다.
1. 블로거 코드 블록 적용하기
1) CSS 코드 추가를 통한 스타일 변경
블로거에서 코드 블록의 스타일을 적용하기 위해서는 먼저 CSS
코드를 추가해야 합니다. 해당 스타일 라이브러리의
JavaScript 코드를 복사하여 적용하면 반응형 코드 블록을
사용할 수 있습니다.
2) 테마 HTML 편집을 통한 코드 삽입
블로거 관리 페이지의 '테마' 메뉴에서 'HTML 편집' 항목을
통해 코드 블록을 추가할 수 있습니다. 다운로드 받은 코드를
삽입할 때 오류 메시지가 나타나면, 코드의 마지막 부분을
확인하여 제대로 닫아주는 것이 중요합니다.
2. 포스팅 내 코드 블록 활용
1) 유튜브 동영상 비율 및 여백 설정
유튜브 동영상의 화면 비율을 16:9로 유지하고 상하단 여백
없이 재생하도록 설정하는 것도 가능합니다. 이는 블로거의 포스팅
기능을 활용하여 미디어 콘텐츠를 보다 효율적으로 관리할 수 있게
합니다.
2) 언어별 코드 블록 적용
포스팅에 코드 블록을 추가할 때는 ` 태그 사이에 코드를
삽입합니다. language 속성에 html, css, xml,
php` 등 원하는 프로그래밍 언어를 지정하여 명확하게 구분할
수 있습니다.
3. 주의사항 및 추가 팁
1) 유료 테마 무료 버전의 제약
유료 테마의 무료 버전을 사용할 경우, 테마 자체에서 특정
코드의 추가 및 수정에 제약을 둘 수 있습니다. 이 경우 코드
블록 추가가 원활하지 않을 수 있으므로 테마의 제한 사항을 먼저
확인하는 것이 좋습니다.
2) 활용 및 콘텐츠 강화
블로거에서 코드 블록 기능을 효과적으로 활용하면 기술 관련
콘텐츠의 가독성을 높일 수 있습니다. 이를 통해 독자들에게 더욱
명확하고 전문적인 정보를 전달하여 콘텐츠의 질을 한층 더
향상시킬 수 있습니다.
구글블로그
라온픽 
