상세 컨텐츠

본문 제목

티스토리 블로그 댓글창에 사진넣기

▶ 똑똑한 블로그/블로그(Blog)

by 빨간꿈 reddreams 2013. 7. 30. 02:43

본문

반응형


티스토리 블로그 댓글창에 사진넣기 



예전 2011년도에 티스토리 댓글창에 사진을 넣는 포스팅을 한적이 있었지만 한달정도만 하고 없애버렸습니다. 이유인 즉, 블로그가 좀 지저분해 보였기 때문입니다. 이번에 다시 댓글창에 사진을 넣은 이유는 최근 라이브리 소셜댓글창을 적용해논 까닭에 '이 곳이 댓글창이다'라고 설명드리고 싶었고, 그리고 댓글이 너무 없어서 구걸을 좀 ㅠㅠ 아무튼 시작해보겠습니다. 






아래 보이시나요? 최근 변경한 티스토리 댓글창 입니다. 간단히 텍스트 문구와 귀여운 캐릭터를 넣어두었습니다. 왠지 불쌍하고 심심해 보이는 저 아이때문에 댓글하나 더 얻을 수 있을 것 같은 느낌입니다ㅎㅎㅎ 






이번 티스토리 댓글창 변경작업은 사진 1개가 아니라 2개로 적용했습니다. 즉, 최초 접속시 1번 이미지가 뜨게 되며, 코멘트 박스에 마우스 클릭이 이뤄지면 2번 이미지가 뜨게 되는 원리입니다.  물론, 코멘트 박스에서 글 작성시에는 이미지가 노출되지 않도록 설정해두었으니 글 작성에는 아무 불편함이 없을 것 입니다. 


댓글 창에 사용된 2개의 이미지 








# 대충 급조해서 그런지 폰트규격과 사이즈가 맞지 않습니다만;;; 

   일단 테스트용으로 적용해두었습니다;;




SKIN.HTML에서 rp_input_comment 를 찾으신 후 <textarea> 에서 </textarea>까지 아래 소스로 변경해주시면 됩니다. 





소스를 보겠습니다.


원래 티스토리 기본 소스 였습니다. 


<textarea name="[##_rp_input_comment_##]" rows="10" cols="50" class="textarea" onfocus="this.className='textarea_on'" onblur="this.className='textarea'" title="댓글을 남겨주세요!"></textarea>




현재 적용해둔 변경 소스입니다.  


 <textarea name="[##_rp_input_comment_##]" rows="10" cols="100" style="background:url(http://cfs.tistory.com/custom/blog/68/684395/skin/images/blog_comment_bg.png) no-repeat right; background-color:#FFFFFF;" onFocus="this.style.backgroundImage='';" onBlur="if(this.value==''){ this.style.backgroundImage='url(http://cfs.tistory.com/custom/blog/68/684395/skin/images/blog_comment_bg2.png)'; }" title="댓글을 남겨주세요^^"></textarea>

# 단, 기본 댓글 소스는 티스토리 템플릿, 테마에 따라 기본 소스 값이 달라질 수 있습니다. 


- rows는 위 아래, cols 는 좌우로 생각하시면 됩니다. (# 위 세팅이 안맞을 경우 CSS항목에서 세부 조정을 진행하셔야 합니다. )


- FFFFFF 는 글 작성시 배경색상입니다. 색상표에서 원하는 색을 찾아서 입력하시면 됩니다. 


- 2번째 이미지 위치에 아무것도 넣지 않을 경우 1개 이미지만 노출되므로 1개 사진으로 꾸미고 싶으신 분들은 2번째 url 값만 삭제하신 후 공백으로 남겨주시면 됩니다. 사진은 외부링크를 이용해도 되지만 왠만하면 위 내용처럼 이미지를 HTML 파일 업로드 기능을 이용하신 후 URL을 추출하셔서 사용하실 것을 추천합니다. 


- title= 항목의 멘트는 코멘트 영역으로 마우스 오버시 노출되는 마우스오버 멘트입니다. 



어떤가요? 쉽게 적용하셨기를 바랍니다.  적용하셨다면 댓글하나 남겨주세요^^ㅠㅠ


반응형

관련글 더보기

댓글 영역

  • 프로필 사진
    2013.07.30 08:16 신고
    그렇군요.. 저도 댓글이 별로 없는데.. 이미지 하나 달아볼까봐요.. ^^
    • 프로필 사진
      2013.08.02 00:10 신고
      ㅎㅎㅎ 아직까진 큰 반응은 없습니다 ㅠㅠ 오히려 소셜댓글 설치이후 소셜댓글이 한두개 늘어났네요 ㅎㅎㅎ
  • 프로필 사진
    2013.10.31 18:37 신고
    급해서 그런데 제 블로그는 댓글창이 접혀있거든요..ㅠ
    님 블로그 처럼 열려있게 하는 방법은 없을까요?ㅠㅠ
    • 프로필 사진
      2013.10.31 18:37 신고
      그리고 카테고리의 다른 글 이라는 것도 뜨게 못하나요..ㅠ
    • 프로필 사진
      2013.10.31 21:34 신고
      관리페이지에서 꾸리기 - 화면설정 - 화면출력 항목에 '펼침설정'이 있습니다. 여기서 댓글펼침을 체크하시면 댓글이 자동으로 펼쳐있게 됩니다^^
    • 프로필 사진
      2013.10.31 21:35 신고
      카테고리 다른글 목록 노출은 관리-플러그인-꾸미기- '카테고리글더보기'를 체크하시면 됩니다^^ 어렵지 않으니 금세 따라하실 수 있으실 겁니다!
    • 프로필 사진
      2013.11.02 11:08 신고
      완전 감사합니다~~~
  • 프로필 사진
    2014.04.11 12:41
    비밀댓글입니다
    • 프로필 사진
      2014.04.24 21:05 신고
      가장 간단한 방법을 알려드립니다.
      포토샵이나 이미지편집프로그램에서 해당 색을 스포이드로 지정해서 색상코드를 알아냅니다. 그다음에 소스에서 ctrl+f 로 색상을 찾으면 원하는 부분이 검색되실 것입니다. 아니면 해당위치의 소스를 전달해주시면 제가 찾아서 수정해드리도록 하겠습니다!
  • 프로필 사진
    2014.12.12 02:07 신고
    감사합니다. 어서프지만 덕분에 많은 도움이 되었어요
  • 프로필 사진
    2015.01.08 02:45 신고
    와, 이런 정보가 있네요. 감사합니다.
  • 프로필 사진
    2020.03.12 13:00 신고
    https://roachsblog.tistory.com/ 여기들어가시면
    댓글창나옵니다 이런식으로 만들고싶는데
    어디부터쪽에서 만든지 잘모르겠습니당
    댓글
    이름 비밀번호 비밀댓글 등록