H : T : M : G : A : W

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

Posted at 2011.03.02 05:01 | Posted in ▶ 똑똑한 블로그/블로그(Blog)


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


1. 댓글창의 사이즈를 확인 한 후 본인이 원하는 이미지를 제작. 

댓글창의 사이즈는 각각의 블로그마다 조금씩 다르게 적용하는 경우가 있으니 
화면캡쳐프로그램을 이용해서 댓글영역의 정확한 사이즈를 확인합니다.
 
제 블로그의 댓글창크기는 660*168로 기본사이즈입니다.  
일단 짤방사진을 이용해서 아래처럼 댓글창 이미지를 급조하였습니다.





2. 제작한 이미지 업로드 및 주소확인

저는 개인계정이 있기때문에 계정에 만든 사진을 업로드하였는데 계정이 없으신 분들은
[html/css편집]에서 [파일업로드]로 사진을 올린 후 업로드된 파일목록에서 방금올린 사진파일을 찾은 후 [마우스 우클릭]-[속성]을 통해서 주소를 확인해줍니다.



3. html/css 편집에서 소스삽입.

ctrl+F 키를 이용해서  "##_rp_input_comment_##   <- 내용을 찾습니다. (한군데밖에 없습니다)

위 내용이 포함된 소스   <textarea~~> 에서부터   </textarea>까지를 아래의 소스로 바꿉니다.


<textarea style="background-image:url(본인이만든사진주소);background-repeat:no-repeat; background-position:center" onClick="this.style.backgroundImage=''" name="[##_rp_input_comment_##]" rows="10" cols="50"></textarea>

* 위 빨간글씨에는 당연히 사진주소를 입력해주시면 됩니다.
* 위 소스는 onClick 이벤트를 통해서 댓글창에 마우스를 클릭하면 사진이 없어지도록 한 것입니다.
* 위소스는 방명록에서도 동일하게 적용됩니다.



완성된 작품을 한번 볼까요?
ㅠㅠ 우측으로 살짝 여백이 존재하네요ㅎㅎ 다시 만들어야겠습니다~










  • Blog Comment()
  • SNS Comment
  • Trackback(0)

티스토리 댓글


  1. ygb
    다른블로그나 지식인에 있는걸로 해도 안되서 많이 고민햇는데 한방에 해결했네요~ 고맙습니다~ 근데 혹시 텍스트 넣기도 있나요?? ^^

Name __

Password __

Link (Your Website)

Comment

SECRET

SNS 댓글

작성해주신 댓글은 SNS 계정에 남지 않습니다.

Trackback