H : T : M : G : A : W

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

Posted at 2013. 7. 30. 02:43 | Posted in ▶ 똑똑한 블로그/블로그(Blog)


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



예전 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= 항목의 멘트는 코멘트 영역으로 마우스 오버시 노출되는 마우스오버 멘트입니다. 



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


    Comments

티스토리 댓글


  1. 그렇군요.. 저도 댓글이 별로 없는데.. 이미지 하나 달아볼까봐요.. ^^
  2. 급해서 그런데 제 블로그는 댓글창이 접혀있거든요..ㅠ
    님 블로그 처럼 열려있게 하는 방법은 없을까요?ㅠㅠ
  3. 비밀댓글입니다
    • 2014.04.24 21:05 신고 [Edit/Del]
      가장 간단한 방법을 알려드립니다.
      포토샵이나 이미지편집프로그램에서 해당 색을 스포이드로 지정해서 색상코드를 알아냅니다. 그다음에 소스에서 ctrl+f 로 색상을 찾으면 원하는 부분이 검색되실 것입니다. 아니면 해당위치의 소스를 전달해주시면 제가 찾아서 수정해드리도록 하겠습니다!
  4. 감사합니다. 어서프지만 덕분에 많은 도움이 되었어요
  5. 와, 이런 정보가 있네요. 감사합니다.
  6. https://roachsblog.tistory.com/ 여기들어가시면
    댓글창나옵니다 이런식으로 만들고싶는데
    어디부터쪽에서 만든지 잘모르겠습니당
    댓글
    이름 비밀번호 비밀댓글 등록

Name __

Password __

Link (Your Website)

Comment

SECRET