구글 블로그에 HTML 태그 코드 쉽게 입력하는 방법

티스토리와 구글 블로그를 동시에 관리하고 있습니다. 둘 다 극명한 차이점이 느껴지는군요. 아무래도 티스토리를 오래 사용해서 그런건지는 몰라도, 또한 티스토리가 한국인에게 많이 유리한 플랫폼이어서 그런지 확실히 다양한 기능들이 있어요. 그에 반해 구글 블로거(Blogger)는 아직도 갈 길이 멉니다.

이따금씩 웹코딩 강좌글을 올리는데 이때가 가장 큰 차이점을 느낄 수 있습니다. 티스토리에는 자체적 코딩 입력 시스템이 있는데 구글 블로그에는 없어요. 그래서 별도로 플러그인을 설치하거나 수동으로 입력해야 하는데 다행히도 이런 문제를 손쉽게 해결해주는 고마운 플랫폼이 하나 있습니다.

소개 및 사용법

컬러스크립터

바로 위의 사이트입니다. 컬러스크립터(ColorScripter)라고 하는 플랫폼입니다. 간편하게 이용 가능합니다. 본문에 삽입하고자 하는 코드를 그대로 입력만 하면 됩니다.

그리고 언어 부분에서 해당 코드에 맞는 언어를 선택해주면 됩니다. 자동으로 기본설정이 되어있지만 컬러 테마를 적용시키기 위해서는 왠만하면 수동으로 맞춰주는게 좋습니다. 모두 완료되었다면 HTML복사 버튼을 누릅니다.

출력된 태그를 그대로 모두 복사하여 구글 블로그에 붙여주기만 하면 됩니다.

1

<a href="https://s.click.aliexpress.com/e/_Dms115x" target= "_blank" style="display:block; text-align:center;"><img src="https://ae01.alicdn.com/kf/S9bb88565101949918edd6de200b8ff6eO.png" alt="알리익스프레스" /></a>

cs

그러면 이렇게 편리하게 코드를 블로그 본문에 넣을 수 있습니다. 완전 간단하죠?

환경설정

아마 처음 컬러스크립터를 사용하시면 코드가 자동 줄바꿈이 되지 않아서 가로 스크롤이 생겼을 것입니다. 또한 가로 크기가 본문에 꽉 채워져 있지 않았을 겁니다. 이런 경우는 수동으로 기능 조작을 해줄 필요가 있겠습니다. 다음의 CSS 코드를 스킨에 입력 후 저장합니다.

1 2 3 4 5 6 7 8 9

/* 가로 사이즈 100% 확장 */ div.colorscripter-code > table.colorscripter-code-table {     width: 100%; } /* 자동 줄바꿈 */ div.colorscripter-code > table.colorscripter-code-table tr td:nth-child(2) > div > div {     white-space: normal !important; } Colored by Color Scripter

cs

이제 다시 코드를 살펴보시면 현재 보고 계시는 제 블로그의 본문에 있는 코드처럼 완벽하게 적용이 되었을 것입니다. 오늘 내용 끝.