반응형
블로그를 하면서 초보자들은 대문의 멋진 배경이나 마음에 드는 스킨을 적용하고, 사이드바도 마음에 들도록 꾸며봅니다. 그래도 처음에는 아쉽지만 그런데로 눈에 익혀가면서 그렇게 사용할 수 밖에 없습니다. 그러나 차츰 블로그에 익숙해지기 시작하면서 이웃블로그를 방문해보면 참 신기한 장식들을 많이 볼 수 있습니다.

하지만 새로운 장식들을 보면서 신기하기만 할뿐 사실 따라하는것은 쉽지 않습니다. 글쓴이 역시 티스토리 블로그를 개설하면서 스킨을 마음에 들게 꾸미려고 많은 시간을 소비하기도 했습니다. 사실 컴퓨터를 어느정도 알고 있어도 스킨에 구성된 수많은 소스들의 구조를 전문가가 아니고서야 이해하기는 쉽지 않습니다.

때로는 사이드바에 한개의 장식을 달기위해 골치를 앓기도 하지만, 사실 설치형 블로그의 스킨소스를 보면 구성요소가 너무 많아서 때로는 무섭기도 합니다. 하지만 티스토리를 하면서 부족하나마 타 블로그에서 배우기도 하고 혼자 깨우치기도 하면서 스킨을 꾸미면서 때로는 성취감에 환호를 하는 즐거움도 있습니다.



이웃블로그를 방문하다보니 댓글창에 재미있는 아이콘도 보이고, 이쁜 그림으로 장식한것을 많이 볼수 있습니다. 처음에는 글쓴이도 그렇게 만들어 보고 싶어서 인터넷 검색으로 모든 정보를 수집해 보지만 각각 설명하는 방법도 여러가지 있고 소스를 수정하는 경로를 설명하고 있지만, 이해가 안가더군요.

각자 설명하는 방법도 틀리고 소스를 수정하는 경로도 차이가 있기 때문입니다. 하지만 부족한 실력으로 이렇게 저렇게 여러가지 방법을 동원해서 결국은 성공을 하는 날에는 환호를 치기도 했습니다. 얼마전 이웃 블로거가 댓글창에 그림 넣는 방법을 물어오지만 쉽게 댓글로 설명할 입장이 아니더군요.

◈ 우선 작업을 하기위해 준비물로는 움직이는 gif 파일 사이즈는 340×170을 준비했습니다.



◈ 블로그 스킨의 html/css 소스를 수정하면 제대로 적용이 되었는지 반드시 미리보기를 해야합니다.
스킨 - 화면출력설정에서 '댓글을 기본으로 펼침'을 선택해야 미리보기에서 댓글창을 볼 수 있습니다.



◈ html/css 편집메뉴 바로 옆에 파일 업로드를 클릭하면, 우측에 파일업로드 작업버튼이 보입니다. 파일업로드를 하려면 업로드할 파일을 찾을 수 있는 창이 뜨면, 저장된 경로를 찾아서 선택해줍니다. (업로드할 파일의 이름은 'welcome08'이라는 파일을 선택해서 업로드 했습니다.)


◈ 업로드파일 목록을 보면 스킨을 구성하고 있는 수 많은 파일들이 보이지만, 최근에 업로드한 파일은 아래쪽에 있습니다. 업로드된 파일명을 확인해 보시면 images/welcome08.gif 라는 이름으로 저장되어 있는것을 확인해 둬야합니다.


◈ 다음은 html/css 편집 메뉴로 돌아와서 이미지 주소를 추가할 위치를 찾아야 합니다. skin.html에서 댓글창 소스를 찾기위해 Ctrl + F 를 누르면 검색창이 나타납니다. 검색창에 textarea 라고 검색어를 넣으면 skin.html 소스 아래쪽 1/3 지점에,

<textarea style="background-image:url(./images/welcome08.gif);background-repeat:no-repeat;background-position:right" name="[##_rp_input_comment_##]" rows="10" cols="50"></textarea> 라는 소스를 찾으면 됩니다.

소스중에 빨간색(./images/welcome08.gif) 부분이 조금전 업로드 해놓은 움직이는 아이콘 파일의 주소입니다. 백그라운드 이미지 주소를 사이에 넣어주면 댓글창에 적용됩니다. 혹시 소스가 제대로 적용되었는지 반드시 미리보기를 확인후 저장을 해야합니다.



위에서 설명한 몇단계의 과정을 거쳐서 댓글입력창에 welcome gif 파일이 적용된 모습입니다. 

처음에 댓글창에 이미지 넣는 방법을 인터넷 검색을 통한 정보로, 시도해 보았지만 사실 설명하는 사람에 따라서 다르게 표현을 하기 때문에 쉽지는 않았습니다. 그리고 소스를 수정하는 방법도 skin.html 수정과 style.css 수정 어디를 하더라도 가능하지만, 쉽게 하는 방법은 skin.html 수정이 가장 쉬운듯해서 이렇게 적용해 봤습니다.


본 포스팅에서는 댓글창에 움직이는 아이콘 적용방법을 소개해 드렸지만, 여기에 조금만 응용하면 포토샵으로 개성적인 이미지 파일을 만들어서 업로드하면 멋진 댓글창을 꾸밀 수 있을겁니다. 그리고 본 포스팅은 글쓴이의 티스토리 스킨을 위주로 작성되었으니, 소스 수정후 제대로 적용되었는지 반드시 미리보기 후 저장해야 합니다.



유익하게 보셨나요?^^ 손가락 모양을 클릭하면 추천됩니다.

반응형

Posted by 행복한 털보작가

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. Favicon of http://killerich.com BlogIcon killerich 2010.06.04 13:36 신고  댓글주소  수정/삭제  댓글쓰기

    저도 이거 적용해야겠네요^^ 잘 공부하고 갑니다^ㅡ^

  3. Favicon of https://leeesann.tistory.com BlogIcon pennpenn 2010.06.04 15:02 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보입니다
    나중에 한번 시도해 보렵니다.

  4. 2010.06.04 21:19  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. Favicon of https://totobox.tistory.com BlogIcon 『토토』 2010.06.05 09:04 신고  댓글주소  수정/삭제  댓글쓰기

    제가 시도하기에는 역시 쉽지 않군요..
    시도하려다 질문생겼습니다.
    제창에는
    <textarea name=" " rows="10" cols="50"></textarea>
    이렇게 뜨는데요... 어디에 이미지를 넣어야 할까요?
    질문 받아주시면 감사하겠나이다 ^^

    • Favicon of https://boskim.tistory.com BlogIcon 행복한 털보작가 2010.06.06 03:23 신고  댓글주소  수정/삭제

      토토님이 찾으신 skin 소스는 아마도 방명록 소스인듯 합니다.
      댓글창 소스를 찾을려면 textarea style 까지 검색어를 넣어서 검색하고
      skin 소스 스크롤바를 내리면 전체의 2/3지점에 있으니 다시 한번 찾아보시기 바랍니다.

    • Favicon of https://totobox.tistory.com BlogIcon 『토토』 2010.06.06 18:57 신고  댓글주소  수정/삭제

      감사합니다
      제 창에서는 textarea까지는 있는데 style를 넣으니까
      일치하는 항목이 없다는군요.
      스킨은 아찌님꺼랑 똑같은데 말예요....

  6. Favicon of https://toyvillage.net BlogIcon 라이너스™ 2010.06.05 12:03 신고  댓글주소  수정/삭제  댓글쓰기

    이야~ 정말 멋진 팁인데요^^
    좋은글 잘보고갑니다.
    날씨가 맑고 화창하네요.^^
    행복한 주말되세요^^

  7. Favicon of https://blog.jaea.net BlogIcon 재아 2010.06.05 16:06 신고  댓글주소  수정/삭제  댓글쓰기

    제 블로그에는 ; 벌레가 있다죠~~;;

  8. Favicon of https://jsapark.tistory.com BlogIcon 탐진강 2010.06.05 16:15 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 팁이군요.
    여기 댓글 창이 멋진 이유네요
    주말 잘 보내세요

  9. Favicon of http://sys610.tistory.com BlogIcon 꽁보리밥 2010.06.05 18:08 신고  댓글주소  수정/삭제  댓글쓰기

    시간되면 해보고 싶지만 전 단순한 게 좋아요..ㅎㅎ
    즐거운 시간 되세요.^^

  10. Favicon of http://naeng-e.tistory.com BlogIcon 냉이' 2010.06.07 08:40 신고  댓글주소  수정/삭제  댓글쓰기

    와~~아찌님 멋져요~
    냉이도 한번 해봐야겟어요.

  11. Favicon of https://leeesann.tistory.com BlogIcon pennpenn 2010.06.07 19:51 신고  댓글주소  수정/삭제  댓글쓰기

    시도하다가 실패했습니다.
    두번째 그림인 파일업로드를 해도
    welcome 08, 블로그서명, 서명파일 창이 뜨지 않습니다.
    cfs,tistory.com을 검색해도 이상한 것만 있군요~

    뮌가 잘 못된 듯 합니다.

    • Favicon of https://boskim.tistory.com BlogIcon 행복한 털보작가 2010.06.07 20:14 신고  댓글주소  수정/삭제

      업로드할 파일이 어디에 저장되어 있는지 찾는 창입니다.
      현재 보이는 창에는 제가 가지고 있는 파일의 이름입니다.
      파일업로드를 클릭하면, 뜨는 창에서 펜펜님이 업로드할 파일이 어디에 있는지 찾으셔서 클릭하면 업로드되지요.

  12. Favicon of https://imifi.tistory.com BlogIcon 생활 속 꿀팁 2010.07.11 11:54 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다 ^^

  13. Favicon of https://yourfriend77.tistory.com BlogIcon 카트라이거 수작 2010.08.31 22:18 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~~
    전 오늘 해보려고 합니다!!

  14. Favicon of https://tomyoun1112.tistory.com BlogIcon 로나루 2010.10.13 16:10 신고  댓글주소  수정/삭제  댓글쓰기

    좋은팁 감사합니다.

  15. Favicon of https://soul-stitch.com BlogIcon 니들우먼 2010.11.26 23:11 신고  댓글주소  수정/삭제  댓글쓰기

    맞아요~~털보아찌님 방법이 쉬워요.+_+
    style css로 가면 스킨마다 다른 부분이 많거든요.^^

  16. Favicon of https://himilhaud.tistory.com BlogIcon 미요♪ 2010.12.10 01:02 신고  댓글주소  수정/삭제  댓글쓰기

    포스팅 덕분에 댓글 창에 사진 잘 넣었어요~~ ^-^

    혹시 댓글창 크기 조절 하는 방법을 아시나요?
    높이를 조금 더 높이고 싶어서요.

    감사합니다.

  17. Favicon of https://blackheartman.tistory.com BlogIcon 눈꽃아이리스 2011.07.03 16:37 신고  댓글주소  수정/삭제  댓글쓰기

    좋은팁이네요 정말 감사감사해용 잘쓰겠습니다.~~

  18. Favicon of http://www.airyeezysalesonline.com/ BlogIcon Nike air yeezys 2012.01.09 16:57  댓글주소  수정/삭제  댓글쓰기

    다음 블로그에서 댓글이 300개 넘을때 저는 임시 대피했습니다.악플로 스트레스 받기도 해서~~ 요즘 티스토리가 메인에 노출되는날은 관리자승인 ...

  19. Favicon of https://bwessay.tistory.com BlogIcon 시간과 빛이 만나는 곳 2012.08.24 00:10 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다. 감사합니다.^^

  20. 문도영 2015.10.28 16:46  댓글주소  수정/삭제  댓글쓰기

    <font color="blue"> 잘읽었습니다. 감사합니다~ </font>

  21. Favicon of https://imaesblog.tistory.com BlogIcon Cacka IMae 2020.03.12 12:56 신고  댓글주소  수정/삭제  댓글쓰기

    https://roachsblog.tistory.com/ 여기들어가시면
    댓글창나옵니다 이런식으로 만들고싶는데
    어디부터쪽에서 만든지 잘모르겠습니당
    댓글
    이름 비밀번호 비밀댓글 등록