티스토리 블로그 글 본문 TOP 제목 을 이뿌게 작성하자... ( 스크립트 이용편 )

포스팅 글 본문 상단에 글 제목을 이뿌게 꾸며보자... 티스토리 블로그 ( CSS 이용편 ) ☞ [바로가기]

 

위 링크를 가시면, 글 제목을 이뿌게 꾸미는 방법에 대해서 포스팅했었는데요. CSS 클래스를 이용해서 하는 방법으로 작성했었죠. 스크립트를 이용해서 100%는 아니지만, 자동으로 글 제목을 본문에 넣을 수 있는 방법에 대해서 고민을 많이 했지만, 티스토리 블로그가 그리 호락 호락 하진 않더군요...^^ 일단 스크립트를 이용한다고 해서 모든 것을 스크립트로 해결되진 않습니다. HTML, CSS, Javascript 모두가 어울러져야지 완벽한 효과가 나오기 마련이죠..ㅎㅎㅎ

 

위 링크된 포스팅된 글을 읽으셨다고 생각하고, 설명을 시작하도록 하겠습니다. 시간 5분 드리죠...

.

.

.

.

.

자~ 그럼 시작해볼까요?

 

■ 스크립트를 작성해보자...

 

<!-- 본문 상단에 글 제목 삽입하기 시작 -->
<script type="text/javascript">
var article_rep_title = document.getElementById('my_article_rep_title');
article_rep_title.innerHTML = 
"<div class='my_article_rep_title'>[샵샵_article_rep_title_샵샵]</div>";
</script>
<!-- 본문 상단에 글 제목 삽입하기 끝 -->

 

여기서 가장 중요한 것은 샵은 # 으로 바꿔서 저장해야 한다는 점입니다. 한글로 샵이라고 표시한 이유는 티스토리 예약어이기 때문에 포스팅할 때 보이지 않아서 한글로 억지로 바꿔서 표현한 것입니다.

스크립트에 대해서 살짜쿵 설명해보도록 할까요?

 

var article_rep_title = document.getElementById('my_article_rep_title');

- my_artical_rep_title 이라는 ID 를 가지고 있는 Element(태그) 객체를 가져옵니다.

- 그 정보를 article_rep_title 이라는 변수에 저장합니다.

 

article_rep_title.innerHTML = "<div class='my_article_rep_title'>[샵샵_article_rep_title_샵샵]</div>";

- [샵샵_article_rep_title_샵샵] 은 티스토리 예약어로서 글 제목을 의미합니다.

- "(따옴표) 안의 태그 내용을 article_rep_title 값으로 저장합니다. 

 

스크립트 내용이라 조금 어려울 수 있는데요. 이해하기 힘들다면, 일단 id 를 이용해서 무엇을 한다고만 생각하시면 됩니다. 그럼 다음 Chapter ~

 

■ 스크립트 위치가 중요하다.

HTML/CSS 중 skin.html 에서 article_rep_desc 로 찾게 되시면, 아래 이미지 빨간 테두리를 발견하실수 있는데요. 찾으신 구문 발 밑에 스크립트를 복사하시면 됩니다.

 

 

[샵샵_article_rep_desc_샵샵] 빨간색 부분이 바로 우리가 작성하는 본문(HTML, CSS, Javascript) 이 대체되는 티스토리 예약어가 되시겠습니다. 그래서 우리가 작성하는 스크립트는 본문 밑에 있어야 합니다. 그 이유는 다음 Chapter 에서...ㅎㅎㅎ

 

■ 본문 상단에 태그만 복사하자.

CSS 의 my_article_rep_title 클래스 내용은 저번 글에서 저장을 했고, 이번에 스크립트를 정상적으로 저장했다며, 1차적인 작업은 끝났습니다. 지금까지 보시면서, 또 어렵다고 탄성을 자아내시는 분들의 모습이 상상이 되는 듯 합니다. 하지만, 중요한것은 스크립트를 HTML/CSS 에서 복사, 저장이 끝이라는 거죠... ^^

 

그럼 마지막 단계인 본문 작성을 해보도록 하죠.

 

 

HTML모드에서 이미지와 같이 한줄만 작성해주시면 됩니다.

 

<div id="my_article_rep_title"></div>

 

본문 상단에 스크립트 한줄을 복사하게 되면, 우리가 원하는 제목을 이뿌게 스타일링해서 표시해주게 됩니다. 스크립트를 [샵샵_article_rep_desc_샵샵] 아래 위치하는 이유는 id가 my_article_rep_title 인 div 태그가 있는 상태에서 스크립트로 Control 을 해야하기 때문이죠. 설명 해놓고도 어렵네요...ㅋㅋㅋ 일단 아래 이미지와 같이요..^^

 

 

■ 간단하게 정리?

1. 스크립트 작성

2. 관리페이지의 HTML/CSS 에서 CSS, Script 를 복사

3. 본문에 한줄 복사 

 

뭐,,, 3가지만 하시면 되는데요. 한가지 테스트 하지 못한 것이 있습니다. 포털 사이트에 노출이 많이 되기 위한 방법으로 본문에 제목을 한번 더 작성하는 방법을 사용하시는 분들이 계시는데요. 이 방법은 스크립트로 본문에 제목을 삽입하는 방식이기 때문에 어떤 식으로 노출이 되는지 저도 궁금하긴 합니다...^^ 그래서 하루 있다가 테스트를 해보니 실제 본문에는 제목에 대한 부분이 없기 때문에 본문 내부에 제목은 노출이 되지 않네요. 

위 이미지처럼 본문 내용을 스크립트로 수정을 했지만, 실제로는 노출이 안되는 것을 확인했습니다. 

■ 그러면 이런 방법은 어떠한 경우 사용할까?

이렇게 검색 노출도 되지 않는 내용을 굳히 본문에 하나씩 추가할 이유는 무엇일까? 정답은 하시고 싶은 대로 하면 된다는 것입니다. ㅎㅎㅎ 일단 이 방법은 제목을 무조건 본문에 추가하고 싶지 않은 분들이라면, 유용할 것 같은데요. 광고를 본문에 복사하는 것과 같이 제목을 본문에 복사하는 방법이기 때문에 제가 하고 싶을 때 추가할 수 있다는 장점이 있긴 하네요. 하지만, 본문에 매번 복사해야 한다는 불편함이 있기 때문에 다음 시간에는 간단하게 무조건 본문 상단에 제목 박스가 나올 수 있는 방법에 대해서 포스팅하도록 하겠습니다. 그 방법이 엄청 Simple 하긴 하네요... ㅋㅋㅋ

 

블로거들이 쉽게 돈 버는 CPA 광고를 할 수 있는 리더스CPA ☞ [바로가기]

블로거들이 무료 이미지를 얻을 수 있는 블로거머니 ☞ [바로가기]

 

이상, 초매였습니다.