1. 구글 블로거, 코드 블록으로 콘텐츠를 더욱 풍부하게
1) 코드 블록, 왜 필요할까요?
개발자나 기술 관련 콘텐츠를 다룰 때, 코드 예시는 필수입니다.
구글 블로거는 기본적으로 코드 블록 기능을 제공하지 않기에,
CSS 코드를 추가하여 이를 구현해야 합니다. 이를 통해
가독성을 높이고 방문자에게 명확한 정보를 전달할 수 있습니다.
2) 코드 블록, 어떻게 설정할까요?
구글 블로거에 코드 블록 기능을 추가하는 것은 생각보다 어렵지
않습니다. 몇 가지 간단한 설정을 통해 누구나 쉽게 적용할 수
있습니다. 지금부터 그 방법을 자세히 알아보겠습니다.
2. 구글 블로거의 다양한 기능 활용하기
1) 풍부한 콘텐츠 작성을 위한 첨부 기능
구글 블로거는 사진, 유튜브 동영상 등 다양한 형식의 콘텐츠를
포스팅에 첨부할 수 있는 기능을 제공합니다. 다만, 파일 업로드
기능은 지원되지 않아 구글 드라이브 링크를 활용해야 합니다.
2) 카테고리 및 태그 활용법
카테고리는 태그 메뉴를 이용하여 생성할 수 있습니다. 이를 통해
방문자는 원하는 정보를 더욱 쉽고 빠르게 찾을 수 있으며,
콘텐츠 분류를 체계적으로 관리할 수 있습니다.
3. 코드 블록 추가 설정 가이드
1) 테마 설정 및 HTML 편집
구글 계정에 로그인 후 블로거 관리 페이지에서 '테마' 메뉴를
선택합니다. 이후 '내 테마 custom'의 '맞춤설정 ▾'에서
더보기 버튼을 클릭하여 'HTML 편집' 항목을 선택합니다.
2) 코드 블록 삽입 및 저장
HTML 편집 화면에서 필요한 코드를 삽입하고 저장합니다. 만약
저장 시 오류 메시지가 나타난다면, 코드의 마지막 부분을
확인하여 수정해야 합니다.
1. 유튜브 동영상 화면 비율 및 여백 설정
1) 화면 비율 유지
16:9 화면 비율을 유지하며 유튜브 동영상을 삽입할 수
있습니다. 이를 통해 시청자는 콘텐츠를 더욱 몰입감 있게 감상할
수 있습니다.
2) 상하단 여백 제거
동영상 재생 시 상단과 하단에 불필요한 여백을 제거하여 화면을
꽉 채우도록 설정할 수 있습니다. 이는 영상 콘텐츠의 시각적
집중도를 높여줍니다.
2. 코드 블록 스타일 적용 방법
1) 스타일 코드 복사
먼저, 제공되는 코드 블록 스타일의 '주소'를 복사하여 브라우저
URL에 붙여넣어 스타일 페이지에 접속합니다. 여기서 필요한
'*. js' 스타일을 선택하여 복사합니다.
2) 테마에 적용
구글 계정으로 로그인 후, 블로거 관리자 페이지의 '테마'
메뉴에서 '내 테마 custom' > '맞춤설정 ▾' >
'HTML 편집'을 선택합니다. 이곳에 복사한 스타일 코드를
추가합니다.
3. 코드 블록 추가 및 설정
1) HTML 편집
블로거 관리자 페이지의 '테마' > '내 테마 custom' >
'맞춤설정 ▾' > 'HTML 편집' 메뉴로 이동합니다.
이곳에서 새로운 코드 블록 관련 설정을 추가할 수 있습니다.
2) 코드 저장 시 오류 해결
코드를 저장할 때 "org. xml. . . . 이하 중략. .
. , "end-tag """. ×" 와 같은 메시지가
나타난다면, 코드의 마지막 부분에 를 추가하여 태그를 올바르게
닫아주어야 합니다.
4) 유료 테마 무료 버전 제약
유료 테마의 무료 버전을 사용할 경우, 해당 테마 자체에서
코드의 추가 및 수정에 제약이 있을 수 있습니다. 이 경우 코드
블록 추가가 원활하지 않을 수 있습니다.
4. 포스팅 내 코드 블록 삽입
1) 코드 삽입 위치
포스팅 작성 시, ''와 '' 태그 사이에 삽입하고자 하는 코드
내용을 입력합니다. 이 부분이 실제 코드 블록으로 표시될
영역입니다.
2) 언어 지정
코드 블록의 'language' 부분에 'html',
'css', 'xml', 'php' 등 해당 코드의 프로그래밍
언어를 명확하게 지정합니다. 이는 코드 하이라이팅 및 가독성을
높여줍니다.
1. 코드 블록 스타일 설정
1) CSS 코드 적용
블로그스팟의 포스팅에 코드 블록 스타일을 적용하려면, 먼저
제공된 CSS 코드를 복사하여 테마의 HTML 편집 부분에
삽입해야 합니다. 이 코드를 통해 코드 블록의 디자인을 원하는
대로 변경하고 가독성을 높일 수 있습니다.
2) 반응형 디자인
추가된 CSS 코드는 다양한 기기에서 코드 블록이 최적의 비율로
보이도록 반응형 디자인을 지원합니다. 이를 통해 사용자들은
모바일 환경에서도 코드를 깔끔하게 확인할 수 있습니다.
2. 테마 HTML 편집 방법
1) 테마 설정 접근
구글 계정에 로그인한 후, 블로거 관리자 페이지에서 '테마'
메뉴로 이동합니다. '내 테마 custom' 설정에서
'맞춤설정' 메뉴의 더보기 버튼을 클릭하여 HTML 편집 항목을
선택할 수 있습니다.
2) 코드 블록 삽입
HTML 편집 화면에서 제공된 코드 블록 구조에 맞춰 필요한
코드를 삽입합니다. 코드 작성 시 'language' 부분에
프로그래밍 언어를 명확히 지정하면 구문 강조 기능이 올바르게
작동합니다.
3. 실천 방안 및 주의사항
1) 코드 블록 활용
이 포스팅에 제시된 방법을 통해 블로그스팟에서도 코드 블록을
효과적으로 활용할 수 있습니다. 이는 개발 관련 콘텐츠의
가독성을 크게 향상시켜 독자들에게 더 나은 경험을 제공할
것입니다.
2) 제약 조건 확인
유료 테마의 무료 버전을 사용할 경우, 테마 자체에서 코드 추가
및 수정에 제약을 둘 수 있습니다. 이러한 경우, 코드 블록
삽입이 원활하지 않을 수 있으므로 테마의 제한 사항을 미리
확인하는 것이 중요합니다.
구글블로그
라온픽 
