오늘 아침에 어느분 블로거에 보니 댓글창에 멋진 사진이 걸려있더군요. 그냥 갈려다가
그 멋진 댓글창에 사진이 멋있어서 방문했다고 끄적이고 나왔는데요.  한때 홈페이지 HTML주물럭 거리던
내가 요즘 머리아파서 관둔지 6년이 되어가는 그 HTML 소스를 찾아봤습니다.

블로그 댓글박스.. 배경이미지 달기!


블로거 뉴스에 검색해보니 이런 팁을 알려주시는 분이 계시더군요. 이 글을 바탕으로 저도 만들어 봤습니다

먼저 멋진 사진을 찾아봤습니다. 알프레드 아이젠슈테트의 사진을 골라봤습니다.

사용자 삽입 이미지

이 사진으로 로버트카파, 앙리 까르티에 브레송을 재치고 20세기 최고의 보도사진작가에 뽑히기도
했습니다. 2차대전 승전보가 울리면서  간호사와 수병이 키스를 하고 있습니다.


이 사진을 그냥 올리면 밋밋할것 같아 멋지게 한쪽을 흐리기 위해  포토샵을 꺼냈습니다

사용자 삽입 이미지

포토샵에서 그라데이션 툴을 선택합니다. 페인트통툴을 누르고 있으면 튀어나옵니다.

사용자 삽입 이미지
그럼 위와같이 그라데이션 툴을 선택한 모습이 위에 나옵니다. 다양한 패턴이 있으니 맘에 드시는걸 고르세요



사용자 삽입 이미지
그리고  왼쪽부터 시작해서 오른쪽으로 쭉 그어주십시요.


사용자 삽입 이미지

이렇게 변했네요. 이 사진을  업로드가 가능한 곳에 올리도록 하겠습니다.
전 다음 블로그에 있는 제 블로그에 사진을 올렸습니다.

그리고 그 올린사진을 우클릭하여 속성으로 들어가시면  저 사진의 절대경로가 나옵니다. 그걸 복사해
놓으십시요

사용자 삽입 이미지


그리고  스킨편집을 하기 위해 티스토리 관리자 모드로 들어가고  스킨 >> HTML/CSS로 들어갑니다

skin.html과  style.css가 있습니다. 스킨마다 수정하는곳이 다릅니다. 제 스킨같은 경우는  style.css에
댓글창 조정하는 곳이 있더군요.(아마 대부분 여기있지 않을까 합니다)
댓글수정하는곳을 찾다보면 .form_textarea라는 곳을 찾으십시요

사용자 삽입 이미지

그곳에 빨간색으로 된곳을 그대로 붙여 넣습니다. 그리고 파란색으로 칠해진 부분은  사진의 절대주소이니
각자 수정해서 적으십시요

background:url(http://cfs9.blog.daum.net/image/13/blog/2007/12/16/12/40/47649e3fb20a4&filename=1.jpg)
        no-repeat right ;

위에 적어 놓았으니 복사해서 쓰십시요. 다시 말씀드리지만 저 이미지 경로는 각자 자기것으로
바꾸십시요. 다 수정하셨으면 이제 저장하시고 나오시면 끝입니다



사용자 삽입 이미지

이렇게 댓글입력창에 사진이 들어갔네요.


한번 자신의 댓글창에 이미지나 사진을 넣어보세요 ^^



썬도그
하단 박스 

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. Favicon of http://agony00.tistory.com BlogIcon 까칠맨 2007.12.16 21:20 신고  댓글주소  수정/삭제  댓글쓰기

    안그댈도 궁금해서 미치기 직전이었던 스킬입니다. ㅎㅎ 감사...^_^

  3. Favicon of http://nisgeokr.tistory.com BlogIcon 별빛기차 2007.12.16 21:46 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 글과 사진에 이어 좋은 팁까지~~ 썬도그님~~ 고맙습니다. 헤헤^^*

  4. Favicon of http://touya.tistory.com BlogIcon とうや 2007.12.16 22:50 신고  댓글주소  수정/삭제  댓글쓰기

    오호 좋은정보 감사합니다. ^^

  5. Favicon of http://mgpro.tistory.com/ BlogIcon MacGeek Pro 2007.12.17 01:03 신고  댓글주소  수정/삭제  댓글쓰기

    오호~! 저에게도 역시 좋은 정보로군요~!
    저도 한번 시간 내서 따라해봐야 겠습니다. ^^;;

  6. Favicon of http://monomato.pe.kr BlogIcon monOmato 2007.12.17 02:38 신고  댓글주소  수정/삭제  댓글쓰기

    멋진 팁이군요 ^^ 감사합니다~

  7. Favicon of http://j4blog.tistory.com BlogIcon 재준씨 2007.12.17 11:20 신고  댓글주소  수정/삭제  댓글쓰기

    웃! 이런...멋진..저도 어디 한번 해볼까요? ^^ 좋은 글 감사드립니다.

  8. Favicon of http://www.soondesign.co.kr BlogIcon 이정일 2007.12.17 15:12 신고  댓글주소  수정/삭제  댓글쓰기

    멋진 팁입니다.
    한번 응용해봐야겠습니다.

  9. 대한민관 2007.12.17 20:58 신고  댓글주소  수정/삭제  댓글쓰기

    정말 유용한 팁이네요.
    저도 꼭 한번 해봐야 겠습니다.

  10. Favicon of http://joojuli.tistory.com BlogIcon 돌아온줄리 2007.12.19 00:23 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~
    저도 댓글창이 훤해 졌어요 ^^
    신나게 저도 적용해보고 신나게 트랙백 쏘고 갑니다 ^^*

    • Favicon of http://photohistory.tistory.com BlogIcon 썬도그 2007.12.24 17:50 신고  댓글주소  수정/삭제

      찾아갈꼐요 축하축하

    • Favicon of http://joojuli.tistory.com BlogIcon 돌아온줄리 2007.12.25 03:30 신고  댓글주소  수정/삭제

      댓글이미지 달고서 ie6에서 글자가 다 하얗게 보인다고 난리가 났었드랬습니당 ㅜㅜ
      제가 이미지 소스 복사 하다가 뭘 잘못 건드렸던 모양이에요.
      다시 원본파일로 덮어쓰기하구선 겁먹어서 이미지만 만들어 놓고 있답니다.
      그래도 썬도그님의 정보 덕분에 좋은경험도 하고 이미지작업도 해보고 ~~정말 감사드립니다 ^^*

  11. Favicon of http://aejune.tistory.com BlogIcon 훈남애준 2007.12.24 17:33 신고  댓글주소  수정/삭제  댓글쓰기

    히한하게도 제 스킨에는 form_textarea 가 없네요..
    정말 하고싶은데..ㅠㅠ

    --------
    후 비슷한곳 한곳한곳 다 찾아가면서
    미리보기 노가다로 겨우 찾아냈네요!

    정말정말 감사합니다^^

  12. Favicon of http://babycats.tistory.com BlogIcon 애기고양이 2008.01.18 14:49 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다 ^_^ 수정했습니다. 저도 form_textarea가 없었어요.
    textarea는 있더군요. 그래서 저도 미리보기의 힘을 빌려 성공했습니다.
    수고하세요~&& 1등 축하드려요 ^.^

  13. Favicon of http://lejewk.tistory.com BlogIcon 〃Rover〃 2008.02.22 20:04 신고  댓글주소  수정/삭제  댓글쓰기

    css에서 수정해봣는데 어쩔땐나오고 어쩔땐안나오고...

    ㅠㅠ 버그싫어힝;

  14. Favicon of http://adonish23.tistory.com BlogIcon 아도니쉬 2008.02.26 16:10 신고  댓글주소  수정/삭제  댓글쓰기

    잘 배우고 갑니다 ^^

  15. Favicon of http://applejadore.tistory.com BlogIcon 사과벌뢰 2008.07.14 22:05 신고  댓글주소  수정/삭제  댓글쓰기

    쉽게 설명되서 보구 해봤어염

  16. Favicon of http://www.jordanboo.com BlogIcon Jordan Shoes on Sale 2011.09.19 16:29 신고  댓글주소  수정/삭제  댓글쓰기

    아직 아바타도 못봤는데.. 꼭 보고싶지만 뉴욕엔 언제쯤 개봉할지.. ㅠㅠ

  17. Favicon of http://www.jordanboo.com BlogIcon Jordan Shoes on Sale 2011.09.19 16:29 신고  댓글주소  수정/삭제  댓글쓰기

    아직 아바타도 못봤는데.. 꼭 보고싶지만 뉴욕엔 언제쯤 개봉할지.. ㅠㅠ

  18. Favicon of http://www.bestmonclerhut.com BlogIcon Cheap Moncler 2011.09.19 16:42 신고  댓글주소  수정/삭제  댓글쓰기

    아직 아바타도 못봤는데.. 꼭 보고싶지만 뉴욕엔 언제쯤 개봉할지.. ㅠㅠ

  19. Favicon of http://www.usbestmoncler.com/ BlogIcon Moncler Jackets Sale 2011.10.11 11:17 신고  댓글주소  수정/삭제  댓글쓰기

    실제로도 여기저기 글들을 종합해보자면 그렇더군요. (물론 이것도 제 시선일 뿐이지만 말입니다!)

  20. Favicon of http://www.monclermenjacketsonline.com/ BlogIcon Moncler Sale Online 2011.12.03 10:21 신고  댓글주소  수정/삭제  댓글쓰기

    이 사진으로 로버트카파, 앙리 까르티에 브레송을 재치고 20세기 최고의 보도사진작가에 뽑히기도
    했습니다. 2차대전 승전보가 울리면서 간호사와 수병이 키스를 하고 있습니다.