티스토리, 댓글의 HTTP 링크가 클릭 되도록 수정

아래 그림처럼 댓글에 http로 시작하는 주소에 마우스를 올리면 클릭이 되며 해당사이트를 새창으로 볼수 있다 참고로 본문 글쓰기시에도 URL를 선택하지 않아도 알아서 자동링크가 생성되나 스킨이 바뀌거나 하면 다시 수정할 수도 있으니 참고할 것.


티스토리, 댓글의 HTTP 링크가 클릭되도록 수정.


티스토리 블로그의 경우 댓글이나 방명록에 http로 시작하는 주소를 입력하면 본문과 같이 자동링크 설정이 안된다.

사이트 - http://blog.kjslab.com/16 를 참고, autolink.jsjquery-1.9.1.js 스크립터를 이용한 댓글 자동링크 설정방법을 적용해 본다.



설정방법은 간단하다.


일단, 첨부파일을 다운로드 받고 티스토리에 파일을 업로드 한다.


autolink.zip

jquery-1.9.1.zip


티스토리 skin.html을 열어 그림과 같이 <title> 위에 


<Script Type="Text/Javascript" Src="./Images/Autolink.Js"></Script>

<Script Type="Text/Javascript" Src="./Images/Jquery-1.9.1.Js"></Script>

를 삽입한다.




skin.html 파일 맨 아래에 그림과 같이 


<script type=text/javascript>autolink($('#container'));</script>

를 삽입한다. 

단, #container 이름은 티스토리 블로그스킨마다 다르니 본인 스킨에 맞게 수정하여 입력한다.



묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 28

*

*

    • 저도 이거 해놔야 하는데 생각만 하고 미루기만 하고 있었는데 이참에 추가해야겠네요..

    • 댓글에 주소입력시 링크가 자동으로 되는게 생각보다 편하길래 추가했는데, SONYLOVE님도 이 기회에 추가해 놓으시면 편하실거예요. 환절기 건강 조심하세요.

    • 비밀댓글입니다

    • 위의 설명대로 js파일 업로드 하시고

      <!-- 추가 - 댓글 autolink -->
      <script type="text/javascript" src="./images/autolink.js"></script>
      <script type="text/javascript" src="./images/jquery-1.9.1.js?ver=1.9.1"></script>
      <script type="text/javascript"> autolink($('#container')); </script>

      </html>끝나는 바로 위에 넣으시면 됩니다

      블로그 찾아가서 소스보기해서 js파일 클릭하니 404에러가 뜨는것 봐서는 js파일이 업로드가 안되었던지 아니면 경로가 잘못되었던지 하지 않을까싶네요

    • 404에러 원인은 대/소문자 구분 때문에 그렇습니다.
      업로드된 js파일 대/소문자 구분해 주면 됩니다. 링크를 소문자로 변경해서 접근하니 정상동작 확인했습니다 ^^

    • 알려주신 방법으로 해결했습니다.
      직접 소스 분석도 해주시고, 정말 감사합니다~

    • 기존에 있던 것을 공유하는 것이라... 해결되셨다니 다행입니다.
      잘 모르는 저에게 질문해 주셔서 제가 더 영광이죠 ^^

    • 안녕하세요. http://mysnowbear.tistory.com 을 운영하고 있는 '눈곰'이라고 합니다.
      묘한오빠님께서 안내해주신대로 java script 파일을 티스토리에 업로드하고, 코딩들을 붙였는데요. 제 블로그에서는 댓글에서 http://..로 시작하는 주소들이 자동 클릭이 되지 않습니다. 혹시 왜그런지 한번만 살펴봐주실 수 있을까요? 감사합니다 ㅠㅠ

    • 찾아주셔서 감사합니다. 아래와 같이 답변을 참고하시면 될것 같네요 ^^

      id 는 스타일을 지정할 때 한 가지만 지정해서 쓰는 이름. (표기방식은 #이름)
      하나의 문서에 고유한 id 하나밖에 쓸 수 없습니다.

      class 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름. (표기방식은 .이름)

      ID, CLASS 이름은 자유롭게 지으면 되지만 숫자로 시작해선 안 됩니다.

      <nav class="navbar navbar-fixed-top">
      <div class=container>



      html에서 <div id=container> 로 변경하셔야 하고 style.css에서도 #container 선언을 해주셔야 합니다

      저의 경우 </html> 바로 위에 아래와 같이 한번만 해주시면 됩니다.

      <!-- 추가 - 댓글 autolink -->
      <script type="text/javascript" src="./images/autolink.js"></script>
      <script type="text/javascript" src="./images/jquery-1.9.1.js?ver=1.9.1"></script>
      <script type="text/javascript"> autolink($('#container')); </script>

      블로그를 보시니 <html> 시작에도 넣으시고 </html> 마지막에도 2중으로 넣으셨던데 그러면 블로그 속도가 느려지지 않을까싶네요

    • 친절한 답장 감사합니다. 혹시 css에서 #container 선언을 어떻게 하는지도 알려주실 수 있을까요?

      단순히 css에다가 #container 를 한 줄만 써주면 되는건가요?

    • id, class 에 대해 찾아보셔야 할듯합니다.

      "이건 여기다 넣어라"라고 말씀드리지 못하는 이유는 bootstrap도 사용하신것을 보아 JS끼리 충돌이 생길수도 있기 때문이고 skin파일 어떻게 구현될지 가늠하지 못하기 때문입니다.

    • 제가 알고 있기로는 css는 폰트의 색깔이나 폰트 사이즈, border의 크기나 border radius를 정하는 곳인데요. 제가 보통 css에서 사용했던건 class라서 .(class name)이런식으로 썼구요.

      그래서 #container 선언하는 것도 class 사용했던거랑 비슷하게 하면 될 것 같은데요.

      선언 내용을 무엇으로 하면 되는지 여쭈어 본 것입니다!

      혹시 길잡이를 알려주신다면 더 찾아서 제 블로그에 꼭 이 기능 적용해보겠습니다. 조금만 더 도와주신다면 정말로 감사하겠습니다!

    • 설명드리면 skin에서 div id=container 라고 하셨다면 css에서 .container 가 아니고 #container 라고 변경해야 한다는 말입니다
      그에 맞게 수정을 하셔야되겠습니다

    • 지금 옆자리 친구의 도움으로 찾아보니 굳이 autolink($('#container'))라고 써줄 필요가 없는 것 같은데요? div class=container처럼 class로 정의가 되어있으니 autolink($('.container'))로 하면 잘 작동하더라구요. 왜 class->id로 바꾸라고 권유하셨는지 여쭈어봐도 될까요?

    • id 는 스타일을 지정할 때 한 가지만 지정해서 고유한 id 하나밖에 쓸 수 없는 이름,
      class 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이기 때문입니다.

      일반 스킨이나 반응형 스킨이나 나중에 관리가 용이하게 하기 위해서 그렇습니다.

    • 안녕하세요. 제가 찾던 기능이라 글 설명대로 모두 따라 했는데 잘 안됩니다. 혹시나 댓글 영역을 감싸는 div 클래스 명을 모두 넣어보면서 테스트해봤는데도 적용이 안되더라고요. 지금 사용하고 있는 스킨은 html에 container라는 id가 없습니다. body 하단에 들어가는 스크립트에서 #container는 무슨 영역이며 이런 경우는 어떻게 해결할 수 있을지 여쭤봐도 될까요? 초면에 번거로운 질문 죄송합니다 ㅠ

    • 스크립터 대소문자 구분하셨는지... 스크립터 경로는 잘 설정하셨는지... 궁금하네요

    • 타이틀 위에 들어가는 소스는 모두 소문자로 바꿨고 파일 모두 업로드 했고 다 확인했어요. 지금 이것 저것 만져보고 있습니다.

    • cont...는 따로 설정하기 귀찮아 div 레이아웃의 가장 큰 테두리에 지정했다고 생각하시면 됩니다.

    • 엇! 방금 말씀하신 댓글을 보고 container를 body의 id로 바꿨더니 바로 적용됐어요!

    • 테스트 해보니까 잘 됩니다. 이제 css 만지는 일만 남았네요. 좋은 글 감사합니다!

    • 뭔지 모르지만 도움이 되셨다니 ^^

이전 글

다음 글