Blogger | 블로그스팟(blogger) 글 템플릿 추가하기

블로그를 시작한지 벌써 한 달 가까이 되어가는 것 같습니다. 그런데 아무래도 국내 환경과는 많이 달라서 마음만큼 진도가 나가지 않습니다. 마치 새로 이사를 와서 동내 파악도 하고, 집도 '이렇게 할까? 저렇게 할까?'하면서 이것저것 해보는 느낌랄까요...?
아무튼 여러가지를 시도해 보다가 시간을 많이 보냈습니다. 중간에 뭣도 모르고 애드센스 신청했다가 거절도 한 번 당해보구요.^^;;


사실 이 포스팅을 작성하기 전에 블로그를 네이버와 구글 웹마스터도구에 등록 시키는 방법을 작성할까 했는데, 그건 많이 나와 있더라구요. 그래서 이번엔 글 템플릿을 추가하는 방법을 알아보도록 하겠습니다. 저도 배워 나가는 중이라 전문적이지는 못 합니다. 하지만 조금이나마 시작하는 분들에게 도움이 되었으면 하는 바람입니다. :D

블로그 스팟의 글쓰기 환경은 어떨까?

블로그스팟 '글쓰기'는 네이버 등 국내 블로그와 비교해보면 아주 간결한 구조로 되어 있습니다. 그에반해 네이버는 여러가지 기능들이 집합해 있죠. 예를들면 레이아웃, 이미지, 영상, 표, 수식, 책, 영화, 음반 등을 삽입할 수 있고, 일정이나 투표, 다양한 글장식도 제공합니다. 또한 이미지 크기를 마음대로 조정하고 보정할수도 있습니다. 하지만 블로그 스팟은 기본적인 요소를 제외하고는 글머리 기호나 이모티콘, 맞춤법 검사, 점프 브레이크 정도가 전부입니다.  

그러나 HTML과 CSS를 이용하면, 네이버못지 않은 효과를 줄 수 있습니다. 물론 시각화 되어있어서 끌어다 쓸 수 있는건 아니기 때문에 불편한 점은 있습니다. 하지만 HTML언어와 CSS를 활용할 줄 안다면, 다양한 효과를 사용할 수 있으니까 알아두면 참 편리한 기능 입니다. 게다가 블로그스팟은 기본적인 컴퓨터 언어를 사용해서, 자체 기능을 사용하는 네이버보다 더 다양한 디바이스에 잘 작동할 수 있을 것 같습니다.  

글 템플릿이란? 
게시물 템플릿을 사용하면 새로운 게시물을 작성할 때마다 글쓰기 에디터에 텍스트나 코드가 표시되도록 서식을 미리 지정할 수 있습니다.

쉽게 말해서 글을 쓸 때, 고정된 문구라든지 자주 쓰는 효과 등의 서식을 미리 저장해두는 기능이라고 생각하시면 될 것 같습니다. 저 같은 경우는 제목란, 정리란, 코드삽입란, 고정문구란 등의 템플릿을 저장해 놓고 활용하려고 합니다.

블로그 스팟 글 템플릿 설정하는 방법

관리자페이지 메뉴에 '설정 > 글, 댓글 및 공유'를 누르면 '글 템플릿' 항목이 보입니다.
옆에 있는 '추가'버튼을 눌러 창이 활성화되면, 그곳에 서식코드를 넣고 '저장'을 합니다.
그리고 글쓰기를 누르면 밑에 그림처럼 아까 저장했던 서식이 나타납니다.

이렇게 서식을 저장해두면, 글을 작성할때마다 똑같은걸 매번 적지 않아도 됩니다. 복사해서 사용할수도 있구요. 나중에 애드센스 승인받으면 서식으로 저장해서 사용 할 수도 있겠죠!ㅎㅎ
설명란으로 쓰일 회색박스에는 영문과 한글이 각각 어떻게 보여지는지 보여드리기 위해, <겨울왕국> OST 가사를 적어 넣었습니다^^
'글쓰기'를 누르면 아까 붙혀 넣은 HTML언어가 웹상에 시각적으로 구현되어 나타납니다. 'HTML'은 그냥 소스코드 그대로 보여지는 것이구요. 제가 사용한 글 템플릿 소스는 밑에 적어 두었으니 예제로 적용해보세요.
인터넷에 '글 서식 태그'라고 검색하시면 글쓰기와 관련된 태그들이 많이 나오니, 활용하셔서 적용하시면 됩니다. 다만 거의 CSS를 이용해서 꾸며주어야 하는데, 아마 처음 CSS를 접하시는 분들은 어려울 수 밖에 없으실 것 같습니다. 저도 서식태그와 CSS를 구글에서 찾아가면서 적용하는 처지라 좋은 사이트를 알게되면 링크해두도록 하겠습니다. 이상 블로그 스팟 글 템플릿을 추가하는 방법이었습니다.

참고사이트와 사용된 코드

• 태그연습장&기본적인 HTML 배울 수 있는 곳'
  'HTML태그 연습장' 입니다. HTML 코드를 넣으면 어떻게 보여지는지 미리보기하고 테스트 할 수 있는 사이트입니다. 기본적인 HTML 코드와 서식을 공부할수 있으니 참고하세요!

본문

<!--부제란-->
<div style="
   border-left: solid 5px #27ae60; 
   background-color: #f5f5f5; 
   text-align:left; 
   padding: 8px;">
   <h2 style="
   padding:0;
   margin:0; 
   font-size:16px; 
   color:#717171;
   word-break:break-all;">
   부제를 넣으세요.</h2>
</div>

<!--회색박스-->
<div style="
background-color: #f5f5f5;
font-size: 14px;
padding: 16px 10px;
word-break:break-all;">
   <div> It's funny how some distance. Makes everything seem small. And the fears that once countrolled me. Can't get to me at all. It's time to see what l can do. To test the limits and break through. No right, No wrong, No rules for me. I'm free.<br />
참 재밌는게 뭐든 거리가 멀어지면 점점 작게 보이는 법이거든 한때 날 속박했던 두려움 조차도 날 괴롭힐 수 없어. 이제 내가 뭘 해야할지 보여줄 시간이야. 한계를 시험하고 뚫고 지나가겠어. 이제 내겐 옳고 그른것도, 규칙도 없어. 난 자유야.
<br /> 
- Frozen OST Let it go 중-
</div>
</div>

<!--세로라인-->
<div style="
border-left: 5px solid #27ae60; 
color: #888888; 
font-style: italic; 
margin-left: 0; 
padding-left: 5px;">
세로라인</div>

<!--코드 글자 그대로 보여주는 소스-->
<pre style="
overflow: auto; 
white-space: pre-wrap;
background:#2D3F50;
color:#FFFF;">
코드를 넣으세요</pre>

각자의 테마에 맞게 변경하여 사용하세요.

• padding: 요소 안 여백 / margin: 요소 밖 여백 (-left,-right가 붙으면 그 방향만 적용됩니다)
• font-size: 글자크기
• font-style: 기본(normal),기울이기(italic),비스듬히(oblique)
• color: 글자색
• background-color: 배경색
• 색깔은 '#'이 붙어있는 부분입니다. ('#컬러코드')

테마에따라 결과물이 달라질 수도 있습니다.

• 제가 사용하는 테마는 다운받은 것이라 자체적으로 각 태그에 대한 효과가 이미 저장되어 있는 상태입니다. 따라서 자신의 테마에 따라 보여지는 결과물이 달라질 수 있습니다.

※ 복사는 'Ctrl+c'를 눌러주세요!