티스토리 라이브리 플러그인, 위치 변경 방법

라이브리(LiveRE) 플러그인, 원하는 위치로 변경 안되나?!

 라이브리(LiveRE) 플러그인, 개선되어야 할 부분은? 포스팅을 통해 티스토리에 라이브리(LiveRE) 플러그인 설치가 가능해졌다는 소식을 전해드리면서 관련하여 수정/보완되면 좋겠다는 부분을 이야기 했었는데요.
 위 링크글에서도 언급했었지만 티스토리 블로그에 라이브리 플러그인을 설치하면 특정 블로그의 경우 원하는 위치에 플러그인이 설치되지 않는 문제점이 있습니다. 이 문제 때문에 라이브리 플러그인의 장점에 끌려 설치를 하려다가 바로 내리시는 분들도 꽤 많더군요.

 저 역시도 같은 문제를 경험했지만 라이브리 위치를 변경하여 지금과 같이 원하는 위치에 적용했는데요. 이와 관련하여 질문하시는 분들이 많아서 포스팅으로 정리하여 소개를 하고자 합니다.
 참고로, 사실 처음에는 다른 방법을 생각해서 소개를 하려고 했는데... 하노비님께서 윈컴이님 포스팅을 알려주셔서 보니 더 편리한 방법이 있더군요. 이에 힌트를 얻어 그 방법을 알려드리고 합니다.

라이브리 플러그인, 위치 바꾸는 방법

 이 방법을 이용하기 위해서는 제이쿼리(jQuery)를 블로그 스킨에 업로드하던지 구글 등 각종 서버에서 활용하여야 합니다. 만약 블로그 스킨에 업로드해서 사용하시겠다는 분들은 아래 링크로 이동하셔서 최신 파일을 받으시면 됩니다.

> 제이쿼리(jQuery) : http://jquery.com/

 ▼ 스킨에 저장해서 사용하시겠다는 분들은 내려받은 jQuery 를 [HTML/CSS 편집] - [파일업로드] 메뉴에서 업로드 해주시면 됩니다.

 그리고는 해당 파일에 대한 주소(URL)를 추출해서 사용하시면 되는데요. 이것보다는 아마 아래 방법이 더 수월하실겁니다 ^^

▼ 위에서 언급한 것처럼 구글(Google) 등 각종 서버에서 사용하는 방법인데요.

 블로그에 업로드하거나 할 필요 없이 원하는 서버의 URL 을 이용하시기만 하면 됩니다. 개인적으로는 블로그 페이지 로딩 속도 등을 고려했을 때 구글 서버에서 이용하시는 것을 권합니다.

 

라이브리_플러그인_위치변경.txt

 이제 본격적으로 라이브리 플러그인 위치를 바꾸기 위한 소스 등을 알려드리도록 할게요. 소스를 좀 더 편하게 활용하실 분들은 위 텍스트(TXT) 파일을 저장해서 사용하세요.

▼ 텍스트 파일을 열어보면 아래와 같이 3가지 태그가 기록되어 있을 겁니다.

▼ 제일 위에 있는 소스는 좀전에 설명드린 jQuery 에 대한 소스입니다.

 skin.html 에서 </head> 를 찾아 그 위에 그대로 복사 - 붙여넣기 하시면 되겠네요. 만약 블로그 스킨에 업로드해서 사용하겠다는 분이라면 URL 부분을 자신의 블로그에 업로드한 파일의 URL 을 추출해서 작성하시면 됩니다.

[중요] 다음으로, 텍스트 파일에 있는 아래 2개의 소스에 대한 것인데요. 소스가 2개지만 원리만 아시면 하나로도 충분히 활용이 가능합니다.
<script type="text/javascript">$(".class값 또는 #id값").before($("#livereContainer"));</script> 를 예로 들어 설명드리자면...

 여기서 사용자가 직접 수정하실 부분은 노란색으로 표시한 '.class값 또는 #id값' 과 초록색으로 표시한 before 부분입니다.

 우선, 노란색 부분에 대한 소개부터... 이는 라이브리(LiveRE) 플러그인을 위치시키고 싶은 기준이 되는 값인데요.

▼ 제 블로그를 기준으로 댓글 타이틀 위로 라이브리를 위치시키고 싶다고 가정해보죠.

 파이어폭스(Firefox)의 FireBug 와 같은 부가기능을 이용하면... 위 이미지처럼 해당 영역에 대한 태그를 확인할 수 있는데요. 제 블로그에서 댓글 타이틀 태그는 <div class="commentTitle">....</div> 네요.

 여기서 commentTitle 값을 추출하여 위에서 노란색으로 말씀드린 값을 변경하는 겁니다. 즉, 본문을 기준으로 한다면...
<script type="text/javascript">$(".commentTitle").before($("#livereContainer"));</script> 가 되는거죠. 간단하죠? ^^

 단, 주의하실 점은 만약 원하는 영역이 태그가 <div id=...> 이라면 노란색에 부분에 작성할 코드 앞에 점(.)이 아닌 샾(#)을 입력하셔야 합니다.

▼ 라이브리(LiveRE) 댓글창의 태그가 <div id="livereContainer">...</div> 이므로 $("#livereContainer") 소스가 사용된 것과 같은 원리입니다.

 마지막으로, 초록색 부분의 before 에 대한 것인데요. 텍스트 파일에 있는 소스를 잘 살펴보시면 before 와 after 가 사용된 것 외에는 저장되어 있는 소스가 동일한 것을 알 수 있을 겁니다.

 이렇게 생각하시면 편합니다. 기준이 되는 노란색 부분의 값의 위에 라이브리 댓글창을 놓고 싶다면 before 코드를, 아래에 놓고 싶다면 after 코드를 사용하시면 됩니다. 이해되시나요? ^^

▼ 이런 원리로 해서 소스를 완성시켰다면 이 태그를 skin.html 에서 </body> 바로 위에 추가해 줍니다.

▼ 이제 수정한 스킨을 저장한 뒤 다시 블로그로 돌아와 확인을 해보면 라이브리 플러그인이 원하는 위치로 이동한 것을 확인할 수 있을 겁니다.

 캡쳐한 이미지와 글을 이용해 상세하게 소개를 하려다보니 글이 길어지긴 했는데... 막상 해보시면 그렇게 어려운 과정은 아니라 왠만하면 쉽게 적용하실 수 있을 겁니다.

 라이브리(LiveRE) 플러그인을 설치하고자 하는데 원하는 위치에 적용되지 않는 문제 때문에 사용을 못하신 분이 계시다면 이제 간단하게 위치를 조정해 보세요 ^^