본문 바로가기
▶ Special/○ 블로그(Blog)

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

by 빨간꿈 2013. 7. 30.


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



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






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






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


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








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

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




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





소스를 보겠습니다.


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


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




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


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



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


반응형


댓글