어떤 블로그를 방문해서 댓글을 쓰려고 보면 박스 안에 그림이 있는 경우가 있다.
'어떻게 넣었을까? 신기하네? '
[blog.bsmind.co.kr의 댓글입력 박스]
Web2.0에 맞춰서 코딩이 되어 있기에 소스에서 댓글박스(textarea)를 찾기가 어려울 줄 알았다.
하지만 찾아보니까 쉽게 눈에 띄어서 내 블로그에 이미지를 넣었고 그 방법을 설명하려고 한다.
일단, 박스에 넣을 이미지를 구해야 한다.
blog.bsmind.co.kr의 댓글입력 박스의 이미지는 어딘가에서 퍼온 이미지이며, 원저작자가 누구인지 몰라서 허락을 받지 못한 이미지이다.
텍스트큐브의 댓글입력 박스의 높이는 약 126px이며, 티스토리의 댓글입력 박스의 높이는 130px 이다.
높이는 각자의 블로그마다 다를 수 있다.
관리자화면 -> 꾸미기 -> 스킨편집 화면으로 이동한다.
하단의 [파일 업로드]에서 구한 이미지를 업로드한다.
[텍스트큐브의 파일 업로드 부분]
파일명의 경로는 "./images/업로드파일명" 이다.
만약 파일명을 "comment_bgimage.jpg" 라고 해서 업로드했으면, 경로는 "./images/comment_bgimage.jpg" 가 된다.
이제 업로드한 파일을 [style.css]에서 댓글입력 박스에 적용하면 된다.
[style.css]에서 .tt-input-div textarea 부분이 댓글 입력 박스 부분이다.
눈으로 찾기가 어려우니까 Ctrl-f 해서 익스플로러의 [찾기]를 이용하면 편리하다.
조금씩 다를 수 있지만 대부분 아래와 같이 내용이 기재되어 있을 것이다.
.tt-input-div textarea {
width:75%;
height:120px;
overflow:visible;
}
여기에 아래와 같이 백그라운드 이미지로 넣으면 설정이 끝난다.
.tt-input-div textarea {
width:75%;
height:120px;
overflow:visible;
background:url(./images/comment_bgimage.jpg) no-repeat right;
background-color:#FFFFFF;
}
위에서 말한 것처럼 이미지 파일은 자신이 올린 이미지 파일명으로 넣어야 한다.
또한 올린 이미지에 맞게 박스의 배경색도 맞춰 주면 더 깔끔하다.
(background-color:#FFFFFF;)
[style.css 영역에 적용한 화면]
관리자화면 -> 스킨 -> "HTML/CSS 편집" 화면으로 이동한다.
텍스트큐와 마찬가지로 댓글입력 박스에 넣을 이미지를 [파일 업로드] 탭에서 업로드한다.
[티스토리의 파일 업로드 부분]
텍스트큐브와 마찬가지로 파일명의 경로는 "./images/파일명" 이 된다.
만약 파일명을 "comment_bgimage.jpg" 라고 해서 업로드했으면, 경로는 "./images/comment_bgimage.jpg" 가 된다.
이제 업로드한 파일을 [skin.html] 영역에 적용하면 된다.
텍스트큐브는 style.css 파일에 적용했지만, 티스토리는 [skin.html]에 적용을 해 보자
[skin.html] 편집영역에서 "##_rp_input_comment_##" 라고 된 부분을 찾는다.
티스토리는 댓글 입력 박스의 이름의 치환자를 "##_rp_input_comment_##"으로 사용한다.
눈으로 찾기가 어려우니까 Ctrl-f 해서 익스플로러의 [찾기]를 이용하면 편리하다.
조금씩 다를 수 있지만 대부분 아래와 같이 내용이 기재되어 있을 것이다.
<textarea name="" rows="10" cols="50"></textarea>
여기에 style 형식으로 이미지를 넣으면 된다.
<textarea name="" rows="10" cols="50" style="background:url(./images/comment_bgimage.jpg) no-repeat right; background-color:#FFFFFF;"></textarea>
끝~~!
트랙백 주소 :: http://blog.bsmind.co.kr/trackback/80
-
Subject: 하츠의 생각
Tracked from itry's me2DAY 2009/07/04 23:53 삭제[블로그팁] 댓글 박스에 이미지 넣기 - 티스토리/텍스트큐브 어떤 블로그를 방문해서 댓글을 쓰려고 보면 박스 안에 그림이 있는 경우가 있다. '어떻게 넣었을까? 신기하네? ' [blog.bsmind.co.kr의 댓글입력 박스] Web2.0에 맞춰서 코딩이 되어 있기..
-
Subject: 텍스트큐브블로그 상단메뉴바 바꾸기
Tracked from 소식통의 eNews 2009/07/07 15:35 삭제텍스트큐브 블로그를 개설하고 이리저리 html 손 보다보니... 블로그 상단 메뉴 선택바를 수정할 수 있더군요... 티스토리 블로그 역시 같이 수정가능합니다. 위와 같이... 자신의 카테고리에 맞춰 상단에서 중요 카테고리를 강조할 수가 있더군요.. 상단 메뉴의 카테고리를 클릭하면 내 카테고리의 글 리스트로 바로 이동이 됩니다. html에 보면 상단에 <il> ....... </li> 요런게 보입니다... 바로 고녀석들이 상단 메뉴의 방명록, 블로그..
-
Subject: 텍스트큐브 2.0에 타이틀용 물결 플래쉬 적용하는 방법 좀 알려주세요
Tracked from jiny 의 잡식 하루 2009/07/17 13:28 삭제ㅡ 이 코드는 민상k님이 만드신 거라는데요.. 텍큐 2.0 베타판의 본문 코드에 적용시키는 방법을 모르겠어요. 본문의 <h2><a href=""></a></h2> 부분을 <script language="javascript" src="./images/viewTitle.js" type="text/javascript"> </script> <script language="javascript"> showTitle("./images/", "viewTitle.s..
-
Subject: 티스토리 댓글박스에 나만의 이미지를 넣어보자!! -
Tracked from 내 마음의 문을 열어 2010/03/10 09:41 삭제티스토리에 관한 내용은 처음 포스팅 해보는것 같아요. 일단 티스토리 자체가 네이버와는 다른 개방형 블로그이긴 하지만,, 최소한의 틀은 있어서 이해하는데 조금 걸렸더랬죠. 더더군다나 다른 분이 만든 스킨을 썼더니.. 각종 포털싸이트에 돌아다니는 티스토리 응용법을 제 스킨에 씌우려고 했다가 몽창 날라갈뻔한걸 백업 습관때문에 어떻게 살렸는지;;ㄷㄷㄷ 이 글을 읽으시는 모든 분들은 반드시! Admin-html은 바로바로 백업해두시는 센스! 해도 떴으니 바로..
-
Subject: 내가만든 이미지 댓글상자에 넣기.
Tracked from Exa World 2010/06/27 15:46 삭제스킨 설정을 하면서 댓글 상자를 열어 두게 해놓았는데 댓글 상자가 공허한 부분으로 보여서 무언가 채우고 싶었습니다. 그래서! 제가 스스로 만든 이미지를 넣어보고자 그림을 그렸습니다. (플래시 CS4이용) 제 블로그 용이다 보니 크기가 작네요 ㅋㅋ;; 아래 파일로 받으실수 있어요. 제가 쓰는 건 (길이*높이) 261*51 이에요. 댓글상자그림.zip 적용하는 방법은 명섭이님의 글을 보고 했어요. http://blog.bsmind.co.kr/80 자세한..
댓글을 달아 주세요
핫핫, 빡셉니다.
후다닥
참고로 사용하신 이미지는 아마도 야마꼬라는 웹카툰의 작가가 그린 그림일거에요.
와우~ 감사합니다.
이러한 개념있는 이미지를 만드는 분이 누구인지 정말 궁금했었어요.
찾아보고 인사를 해야겠어요~~
감사합니다.
덕분에 저도 적용했습니다.
그림이 무난하기에 저도 같은 그림으로 ^^
명섭님과 야마꼬님 두 분께 감사드려야겠군요.
꾸벅
해피한 시간 되십시오.
예쁜 이미지로 구하셨네요^^;;
저보다는 이런 야마꼬님 같은 분이 존경스러울 따름이죠~
좋은 하루 되세요~~
좋은 정보이내요^^
더불어 좋은 아이디어 인거 같습니다 ㅎㅎ
아이모님의 댓글을 너무 늦게 읽어서 인사를 못했어요~~
감사합니다.^^;;
좋은 하루되세요~
와~ 좋은 정보 감사합니다! +_+
감사합니다^^
좋은 하루되세요~
와 좋은 정보 감사해요 ㅋ
감사합니다 키키님
좋은 저녁 되세요~~
님덕에 블로그 댓글 박스에 고양이 한마리 넣어뒀어요 ㅋㅋ 감사감사 ^-^/
감사합니다..너무나 찾고 있던 것이 속시원히 나와서..
금새 적용했네요^^
도움이 되셨다니 보람이 있네요~
제이투님 댓글박스 이미지 앙증맞게 넣으셨네요^^
좋은 하루되세요
너무 감사합니다 +_+
아무리해도 안되길래 검색해서 찾아 왔습니다
글보고 1분만에 성공했습니다~~
이렇게 하는거군요 html만 살짝 배운저로써는 css는 참 어렵네요
어렵다기보단 아무것도 모르겠어요 ㅎㅎ
좋은 포스팅 감사합니다^^
CSS도 자주보니 눈에 익더라구요.
좋은 하루되세요~
이 소스의 원작자가 하츠님이신가요?
저도 어디서 본 기억이 있어서 했는데..
원작자분이 어떤분인지 몰라서 링크를 못달았어요.
원작자분이면 말씀좀 해주세요 ^^
글은 제가 쓴 것이고요, 댓글상자의 이미지는 제것이 아니예요. 이미지 제작자가 누군신지 몰라서 그냥 쓰고 있네요^^;;
저도 제가 원하는 이미지로 잘 적용했네요
감사드립니다 ^^
멋진 애니를 넣으셨네요^^
애니라뇨 ^^;;
어쨌든 좋은 자료 감사드려요~
좋은 정보 감사드려요^,^
제가 만든 이미지는 커서 댓글쓰는분들을 고려못했지만 이미지넣는데 성공했어요~
ㅋ_ㅋ
소개까지 해주시고, 감사합니다^^
행복한 블로깅하세요~