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

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


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

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

 이 방법을 이용하기 위해서는 제이쿼리(jQuery)를 블로그 스킨에 업로드하던지 구글 등 각종 서버에서 활용하여야 합니다. 만약 블로그 스킨에 업로드해서 사용하시겠다는 분들은 아래 링크로 이동하셔서 최신 파일을 받으시면 됩니다.
> 제이쿼리(jQuery) : http://jquery.com/
 ▼ 스킨에 저장해서 사용하시겠다는 분들은 내려받은 jQuery 를 [HTML/CSS 편집] - [파일업로드] 메뉴에서 업로드 해주시면 됩니다.


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

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


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


 이제 본격적으로 라이브리 플러그인 위치를 바꾸기 위한 소스 등을 알려드리도록 할게요. 소스를 좀 더 편하게 활용하실 분들은 위 텍스트(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) 플러그인을 설치하고자 하는데 원하는 위치에 적용되지 않는 문제 때문에 사용을 못하신 분이 계시다면 이제 간단하게 위치를 조정해 보세요 ^^
LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon 링크정보 2012.01.15 10:25 신고

    위치 조정때문에 라이브리를 사용하지 않는데, 방법이 의외로 쉬웠네요.
    근데 플러그인 버전으로 바꿨더니 전에 직접 소스를 넣어서 사용하던 라이브리에서 쓴 댓글들이 다 사라졌어요.

  3. BlogIcon 노지 2012.01.15 10:26 신고

    음...크기 조절 CSS는 없네요...
    함께 첨부해실 수 있으신지...?ㅎ;

  4. BlogIcon 개똥치우는남자 2012.01.15 18:12 신고

    감사합니다. 저도 이게 불만이라 티스토리댓글을 감춤으로 하고 사용했는데 설명해주신거 보고 라이브리 댓글 위치를 아랫쪽으로 내렸네요.

  5. BlogIcon milaero 2012.01.16 02:45 신고

    오 괜찮은 방법이네요 ㅎㅎ;;
    티스토리에서 치환자로 지원해주었으면 좋겠다고 생각했는데 말이죠..

  6. BlogIcon proactol reviews 2012.01.16 03:25

    잘보고 갑니다. 저도 적용해봐야겠어요 :)

  7. BlogIcon 로렌씨 2012.01.16 06:11 신고

    오..이런 방법도 있었네요^^전 기존댓글창은 숨기설정하고 그자리에 라이브리 플러그인만 사용중입니다..저도 한번 적용해봐야겠어요~좋은하루되시길

  8. BlogIcon 야야곰 2012.01.16 07:55 신고

    전 며칠째 사이트에 xe에 적용하려다 실패했어요 너무 어렵게 설명을 해 놓아서 적용이 안됩니다. 티스토리는 그것에비하면 양반이더라구요 티스토리 적용이 아주 쉬웠거든요 그리고 요즘은 플러거인으로 더욱 쉬워졌구요 그런데 여긴 위치까지 조절하시는군요 놀라워요 대단해요

  9. BlogIcon 노펫 2012.01.16 22:47 신고

    제가 찾던 바로 그 정보네요~
    저도 쓰다가 내렸는데..
    이거 보고 재도전의 희망이 생겼습니다.
    언능언능 해봐야겠어요~
    잘 될른지..
    노펫.

  10. BlogIcon 리사이드 2012.01.16 22:58 신고

    정보감사합니다! 근데 왜 제 닉네임이 제대로 표시되지 않을까요 ㅜㅜ

  11. BlogIcon 노펫 2012.01.17 07:57 신고

    감사합니다. 성공적으로 적용으 마쳤습니다.
    덕분에 코드에 대한 이해도 넓혔습니다.
    고맙습니다. 블로그팁에 주옥같은 포스팅이 많네요.
    오늘 밤에 다시와서 '또 적용할 거 없나~' 하고
    밀방해야겠습니당..^^
    노펫.

  12. BlogIcon 노지 2012.01.19 16:43 신고

    몇 번의 시험을 거쳐서 겨우 딱 붙였답니다. 감사해요 ^^ ㅎㅎㅎ

  13. BlogIcon 서민당총재 2012.01.19 23:46 신고

    아~ 라이브리 뭔가 아쉽습니다.
    장문의 댓글은 제대로 노출되지 않는 경우도있구요
    조금더 다듬는다면 정말 좋을텐데말이죠 ^ ^

  14. BlogIcon sweetchip 2012.01.23 13:10 신고

    이야 좋은 정보 감사합니다^^
    나중에 라이브리가 직접 개선을 안해준다면 이방법을 한번 시도해봐야겠습니다
    즐거운 설 명절 보내세요^^

  15. BlogIcon zook 2012.01.26 12:41 신고

    알려주신데로 해봤는데 여전히 변경이 되질 않는군요 ㅠㅠ

  16. BlogIcon mestarKim 2012.01.26 23:35 신고

    제이쿼리 업로드하고, /헤드위에 업로드하고, 제 블로그 댓글 태그는 comment 라서
    아래와 같이 /바디 위에 넣었으나 이동이 되질 않습니다.ㅜㅜ
    <script type="text/javascript">$(".comment").before($("#livereContainer"));</script>

    • BlogIcon LiveREX 2012.01.26 23:45 신고

      정확하게 표시하고 싶으신 위치가 어딘지는 모르겠지만
      블로그를 FireBug 로 살펴보니 articleBtmWrap 인 듯 한데요? 정확히 어디를 원하시는지를 몰라서..

    • BlogIcon mestarKim 2012.01.27 00:06 신고

      네네 감사합니다.
      제 블로그에서는 tag가 나와있는 윗 공간에 라이브리를 위치 시키고 싶습니다.

      <script type="text/javascript">$("#articleBtmWrap").before($("#livereContainer"));</script>

      이렇게 했는데도 안되네요^^ 어렵습니다;;

    • BlogIcon mestarKim 2012.01.27 00:09 신고

      질문 수정 합니다 ^^ [카테고리 글 더보기 플러그인]과 [라이브리 플러그인] 사이에 다음뷰 인기글, 최신글 을 넣고 싶은데 도와주실 수 있으실 까요 ^^?

    • BlogIcon LiveREX 2012.01.27 01:44 신고

      간단하죠~ 카테고리 더보기 플러그인의 경우는 기본적으로 article 안에 포함되어 있으니...

      1. article 바로 뒤쪽으로 div id 및 class 를 조합하여 좌우 크기 등을 지정하고 그 안에 다음뷰 목록 소스를 넣는다.

      2. 지정한 div id 값 바로 위에 라이브리 창을 넣으려고 하는거니까 <script type="text/javascript">$("#div id 값").before($("#livereContainer"));</script> 처럼 소스 추가해주면 되겠네요.

  17. BlogIcon 흉내쟁이 2012.01.31 12:33 신고

    오홍홍.. 이렇게 쉽고 간단한 방법이 있었군요...
    css로 어거지로 위치조정하고 쓰던 플러그인들을 쉽게 재배치 할수 있겠군요.
    많은 도움 되었습니다.

  18. BlogIcon 흉내쟁이 2012.01.31 13:18 신고

    아 그리고 저는 <script type="text/javascript">$(".commentTitle").before($("#livereContainer"));</script>와 같이 알려준 방식대로 하면 작동하지 않아 일반적으로 jquery 사용할때처럼 <script type="text/javascript">$(document).ready(function(){ 안에 넣어 사용하였습니다. 그나저나 jquery가 점점 늘어나 로딩이 장난아니군요;

  19. BlogIcon 씨디맨 2012.02.04 15:27 신고

    jquery 임포트는 안해도 동작하니 해더에 넣는건 생략해도 될듯. 해드폰 축하 나는 어쩌다보니 자전거 당첨됬다는 ;; 뭘 해서된건지 그냥 당첨된건지 잘 모르겠지만 ㅋ;

  20. BlogIcon beomjinkim 2012.02.08 18:20

    아...용자님이시여..

  21. BlogIcon Cooltime 2012.04.01 01:03 신고

    덕분에 위치를 수정했습니다.
    감사합니다.

댓글을 남겨주세요 :)




submit