반응형
블로그를 하면서 초보자들은 대문의 멋진 배경이나 마음에 드는 스킨을 적용하고, 사이드바도 마음에 들도록 꾸며봅니다. 그래도 처음에는 아쉽지만 그런데로 눈에 익혀가면서 그렇게 사용할 수 밖에 없습니다. 그러나 차츰 블로그에 익숙해지기 시작하면서 이웃블로그를 방문해보면 참 신기한 장식들을 많이 볼 수 있습니다.
하지만 새로운 장식들을 보면서 신기하기만 할뿐 사실 따라하는것은 쉽지 않습니다. 글쓴이 역시 티스토리 블로그를 개설하면서 스킨을 마음에 들게 꾸미려고 많은 시간을 소비하기도 했습니다. 사실 컴퓨터를 어느정도 알고 있어도 스킨에 구성된 수많은 소스들의 구조를 전문가가 아니고서야 이해하기는 쉽지 않습니다.
때로는 사이드바에 한개의 장식을 달기위해 골치를 앓기도 하지만, 사실 설치형 블로그의 스킨소스를 보면 구성요소가 너무 많아서 때로는 무섭기도 합니다. 하지만 티스토리를 하면서 부족하나마 타 블로그에서 배우기도 하고 혼자 깨우치기도 하면서 스킨을 꾸미면서 때로는 성취감에 환호를 하는 즐거움도 있습니다.
이웃블로그를 방문하다보니 댓글창에 재미있는 아이콘도 보이고, 이쁜 그림으로 장식한것을 많이 볼수 있습니다. 처음에는 글쓴이도 그렇게 만들어 보고 싶어서 인터넷 검색으로 모든 정보를 수집해 보지만 각각 설명하는 방법도 여러가지 있고 소스를 수정하는 경로를 설명하고 있지만, 이해가 안가더군요.
각자 설명하는 방법도 틀리고 소스를 수정하는 경로도 차이가 있기 때문입니다. 하지만 부족한 실력으로 이렇게 저렇게 여러가지 방법을 동원해서 결국은 성공을 하는 날에는 환호를 치기도 했습니다. 얼마전 이웃 블로거가 댓글창에 그림 넣는 방법을 물어오지만 쉽게 댓글로 설명할 입장이 아니더군요.
◈ 우선 작업을 하기위해 준비물로는 움직이는 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="" rows="10" cols="50"></textarea> 라는 소스를 찾으면 됩니다.
소스중에 빨간색(./images/welcome08.gif) 부분이 조금전 업로드 해놓은 움직이는 아이콘 파일의 주소입니다. 백그라운드 이미지 주소를 사이에 넣어주면 댓글창에 적용됩니다. 혹시 소스가 제대로 적용되었는지 반드시 미리보기를 확인후 저장을 해야합니다.
◈ 위에서 설명한 몇단계의 과정을 거쳐서 댓글입력창에 welcome gif 파일이 적용된 모습입니다.
처음에 댓글창에 이미지 넣는 방법을 인터넷 검색을 통한 정보로, 시도해 보았지만 사실 설명하는 사람에 따라서 다르게 표현을 하기 때문에 쉽지는 않았습니다. 그리고 소스를 수정하는 방법도 skin.html 수정과 style.css 수정 어디를 하더라도 가능하지만, 쉽게 하는 방법은 skin.html 수정이 가장 쉬운듯해서 이렇게 적용해 봤습니다.
본 포스팅에서는 댓글창에 움직이는 아이콘 적용방법을 소개해 드렸지만, 여기에 조금만 응용하면 포토샵으로 개성적인 이미지 파일을 만들어서 업로드하면 멋진 댓글창을 꾸밀 수 있을겁니다. 그리고 본 포스팅은 글쓴이의 티스토리 스킨을 위주로 작성되었으니, 소스 수정후 제대로 적용되었는지 반드시 미리보기 후 저장해야 합니다.
하지만 새로운 장식들을 보면서 신기하기만 할뿐 사실 따라하는것은 쉽지 않습니다. 글쓴이 역시 티스토리 블로그를 개설하면서 스킨을 마음에 들게 꾸미려고 많은 시간을 소비하기도 했습니다. 사실 컴퓨터를 어느정도 알고 있어도 스킨에 구성된 수많은 소스들의 구조를 전문가가 아니고서야 이해하기는 쉽지 않습니다.
때로는 사이드바에 한개의 장식을 달기위해 골치를 앓기도 하지만, 사실 설치형 블로그의 스킨소스를 보면 구성요소가 너무 많아서 때로는 무섭기도 합니다. 하지만 티스토리를 하면서 부족하나마 타 블로그에서 배우기도 하고 혼자 깨우치기도 하면서 스킨을 꾸미면서 때로는 성취감에 환호를 하는 즐거움도 있습니다.
이웃블로그를 방문하다보니 댓글창에 재미있는 아이콘도 보이고, 이쁜 그림으로 장식한것을 많이 볼수 있습니다. 처음에는 글쓴이도 그렇게 만들어 보고 싶어서 인터넷 검색으로 모든 정보를 수집해 보지만 각각 설명하는 방법도 여러가지 있고 소스를 수정하는 경로를 설명하고 있지만, 이해가 안가더군요.
각자 설명하는 방법도 틀리고 소스를 수정하는 경로도 차이가 있기 때문입니다. 하지만 부족한 실력으로 이렇게 저렇게 여러가지 방법을 동원해서 결국은 성공을 하는 날에는 환호를 치기도 했습니다. 얼마전 이웃 블로거가 댓글창에 그림 넣는 방법을 물어오지만 쉽게 댓글로 설명할 입장이 아니더군요.
◈ 우선 작업을 하기위해 준비물로는 움직이는 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="" rows="10" cols="50"></textarea> 라는 소스를 찾으면 됩니다.
소스중에 빨간색(./images/welcome08.gif) 부분이 조금전 업로드 해놓은 움직이는 아이콘 파일의 주소입니다. 백그라운드 이미지 주소를 사이에 넣어주면 댓글창에 적용됩니다. 혹시 소스가 제대로 적용되었는지 반드시 미리보기를 확인후 저장을 해야합니다.
◈ 위에서 설명한 몇단계의 과정을 거쳐서 댓글입력창에 welcome gif 파일이 적용된 모습입니다.
처음에 댓글창에 이미지 넣는 방법을 인터넷 검색을 통한 정보로, 시도해 보았지만 사실 설명하는 사람에 따라서 다르게 표현을 하기 때문에 쉽지는 않았습니다. 그리고 소스를 수정하는 방법도 skin.html 수정과 style.css 수정 어디를 하더라도 가능하지만, 쉽게 하는 방법은 skin.html 수정이 가장 쉬운듯해서 이렇게 적용해 봤습니다.
본 포스팅에서는 댓글창에 움직이는 아이콘 적용방법을 소개해 드렸지만, 여기에 조금만 응용하면 포토샵으로 개성적인 이미지 파일을 만들어서 업로드하면 멋진 댓글창을 꾸밀 수 있을겁니다. 그리고 본 포스팅은 글쓴이의 티스토리 스킨을 위주로 작성되었으니, 소스 수정후 제대로 적용되었는지 반드시 미리보기 후 저장해야 합니다.
유익하게 보셨나요?^^ 손가락 모양을 클릭하면 추천됩니다.
반응형
'컴퓨터.카메라' 카테고리의 다른 글
| 티스토리 블로그에 나눔글꼴 간편하게 적용하는법 (25) | 2010.08.02 |
|---|---|
| 블로그 글꼴 변환용 EOT 파일 초간편으로 만드는법 (34) | 2010.07.30 |
| 블로그에 특정 이미지가 보이지 않는다면 네트워크 점검을..... (31) | 2010.07.06 |
| 똑딱이 카메라 내부 구조가 궁금하여 분해 했더니~~ (73) | 2009.02.12 |
| 하드디스크 꽉찬 컴퓨터,사진은 어디에 저장할까? (0) | 2009.02.06 |
| 하드디스크 구조가 궁금하여 분해 했더니~~ (0) | 2009.02.06 |
