댓글 쓰게 유혹하는 댓글창에 배경 사진( 이미지 ) 넣기


블로거를 힘내게 하는 것들 중에 하나가 바로 내 글을 읽어주신 독자로부터의 댓글일텐데요. 한 시간, 두 시간 공을 들여서 작성한 게시물에 댓글이 많이 달리게 되면 신나게 글을 작성 할 수도 있고, 간혹 댓글에서 더 없이 소중한 정보들을 얻기도 하는데요. 이전에 작성한 포스팅에서도 좋은글의 요소  중에 댓글이 많이 달리는 글이 있음을 언급했던 적이 있습니다.


많은 분들이 자신의 글에 댓글이 많이 달리기를 바라는데요. 댓글이 많이 달리도록 하는 여러가지 방법 중에서 댓글창을 이쁘게 꾸며 놓는 방법이 있습니다. 그 중에서도 댓글창에 댓글을 바라는 이미지를 배경 사진으로 넣어 놓으면 그냥 가려던 방문자분들도 관심을 보일 것입니다.


그냥 하얀색 입력창이었던 기존의 댓글창 대신에 귀엽게 댓글을 구걸하는 사진이나 댓글을 바라는 메시지등을 댓글창 배경 이미지로 지정을 해주면 방문자 분들의 댓글 참여율을 높일 수 있을 겁니다. ( 평범한 흰색 배경의 댓글 창은 시시하니까요. ^^ ) 오늘 티스토리 팁에서는 댓글창의 배경을 원하는 사진으로 꾸미는 방법에 대해서 알아보도록 하겠습니다.


댓글창에 배경 사진을 씌워 보자!!

댓글창에 배경 이미지를 씌우기 위해서 가장 먼저 필요한 준비물은 바로 사진입니다. 댓글창에 배경으로 설정해 두고 싶은 이미지를 준비해야 합니다. 제가 준비한 사진은 주인옆에서 구걸하는 개님의 사진인데, 거기에 "댓글 주세요~" 라는 글자를 입혀봤습니다. 일단 멋진 사진은 나중에 구하고 개님의 유머러스한 사진을 댓글창에 적용해 보겠습니다.


이 사진을 댓글창 배경으로 넣어 보겠습니다. 어떤 사진을 쓰던 상관 없으니 직접 하실 때 더 멋진 사진을 쓰시기 바랍니다. ( 너무 급조한 티 나죠 ㅋㅋㅋ )


관리자메뉴에서 [스킨]->[HTML/CSS 편집] 메뉴를 선택한 다음, "파일 업로드" 탭에서 (1) 파일 업로드버튼을 눌러서 사진을 업로드합니다. 그러면 (2) 아래 목록에 여러분이 올리신 파일이 등록된 것을 볼 수 있습니다. 업로드하신 파일을 선택하시면 좌측 미리보기 화면에 작은 화면으로 사진을 볼 수 있습니다.


위 사진의 빨간 화면이 업로드 된 사진인데요. 우클릭을 해서 속성(R)을 클릭해서 그림의 주소를 확인합니다.

참고

파이어폭스와 인터넷 익스플로러의 경우가 다른데요.



파이어 폭스의 경우 우클릭을 해서 "그림 정보 보기(F)"를 선택하시면 위와 같은 화면이 나옵니다. 여기서 위치라고 나와 있는 부분이 이 사진의 주소( URL )입니다.


인터넷 익스플로러의 경우 속성(R)을 들어가 보시면 "주소(URL)" 부분에 나와있는것이 사진의 주소입니다. 다른 웹 브라우져도 다르지 않을 겁니다. ㅎ


이 주소를 알아야 댓글창의 배경을 수정 할 수 있습니다. 메모장이나 다른 곳에 복사를 해 놓습니다.


다시 [HTML/CSS 편집] 부분으로 돌아와서 skin.html 을 클릭한뒤 [Ctrl] + F 를 눌러서 "##_rp_input_comment_##" 를 찾습니다. 아마 한 군데 밖에 없을 것인데 바로 이 부분이 댓글창을 의미합니다.


이런 코드가 있을 겁니다. 이제 이 부분을 바꿔줘야 합니다. 이제 아까 복사해 놓은 주소를 써야 할 때가 왔습니다.


위 소스의 빨간색 부분에 아까 복사해 놓은 주소를 써 넣습니다. 위 소스는 "댓글창 꾸미기" 파일에 있으니 다운받아 쓰세요 ^^
그리고 원래 있던 <textare>를 지우고 그 자리에 위 소스를 붙여 넣습니다.
그리고 미리보기를 하면,


위 처럼 댓글 창에 이미지가 들어간 것을 볼 수 있습니다. 이미지 크기에 따라 댓글창에 사진이 다 안 나올 수도 있습니다. 이럴 경우 rows="9" 부분과 cols="50" 부분을 조절해서 댓글창의 크기를 조절 할 수 있습니다. 확인을 하셨으면 [저장] 버튼을 누릅니다.

저는 일단 허접한 사진을 댓글창의 배경으로 설정했지만, 여러분은 더 멋진 사진, 더 어울리는 사진으로 댓글창을 꾸며보세요. ^^



아 그리고 위 소스코드에서 onClick 부분을 추가해서 댓글창을 클릭했을 때, 배경 사진이 없어지도록 했습니다. 클릭 후에도 배경사진을 그대로 유지하고 싶으시면 onClick="this.style.backgroundImage=''" 이 부분을 지우시면 됩니다. ^^


티스토리 팁 - 댓글 창을 위로 먼저 띄우는 방법


블로그를 하는 이유 중에 가장 먼저 꼽히는 것 중에 하나가 바로 내가 쓴 글을 읽어주는 독자와의 소통입니다. 내 글을 읽고 느낀 점이나 추가 정보, 논쟁 등을 다시 알려주는 피드백 시스템인데요. 흔히 댓글( 혹은 답글 ), 트랙백의 형태로 이루어집니다. 그 중에서 오늘의 티스토리 팁에서 살펴 볼 것은 댓글에 관한 것입니다.

여러 블로그들을 방문하다 보면 댓글 창의 위치가 어디에 나오느냐에 따라서 두 가지 형태로 분류 할 수 있습니다. 댓글의 리스트가 먼저 나오는 형태와 댓글 창이 먼저 나오는 형태가 있습니다. 선택한 스킨에서 기본적으로 위치를 지정해 놓은 경우도 있고 블로거가 임의로 댓글창의 위치를 변경한 경우도 있는데요.

[사진 : 티스토리 팁 - 댓글 창이 나중에 나오는 경우]

포스트에 달린 댓글의 리스트가 먼저 나오는 경우는 위와 같습니다. 어찌보면 가장 기본적인 형태인데요. 댓글의 리스트가 10개 미만이거나 감당 할 수 있는 정도의 갯수라면 상관이 없습니다. 오히려 댓글을 달기 위해 스크롤을 내리면서 다른 블로거의 댓글들을 보는 즐거움을 줄 수도 있지요.

하지만 댓글의 갯수가 10개, 20개가 넘어가게 되면 댓글을 쓰기 위해 내려야하는 스크롤의 양이 많아집니다. 흔히 "스크롤 압박" 이라는 단어를 많이 쓰는데요. 이렇게 되면 스크롤을 내리거나 "End" 키를 누르는 대신 열려있는 탭이나 윈도우 창을 꺼버리고 다른 곳으로 가는 경우가 많이 있습니다. 댓글이 많이 달리기를 바라는 분들에겐 안 될 일이죠. ㅎ

[사진 : 티스토리 팁 - 댓글 창이 먼저 나오는 경우]

반면 댓글 입력창이 먼저 나오는 경우는 위와 같습니다. ( "꽁보리밥" 님의 블로그 댓글창 부분 캡쳐입니다. ) 이 경우 댓글을 쓰기위해 내려야 하는 스크롤의 양이 매우 적기 때문에 조금이라도 댓글을 달고 싶으신 분이 계시면 쉽게 댓글을 달 수 있습니다. 다만 다른 블로거 분들의 댓글을 읽으려면 어짜피 스크롤을 내려야 하고, 자신이 단 댓글을 보기 위해서는 한참 스크롤을 내려야 하는 불편함이 있습니다. ( 이 점은 나중에 자바스크립트 프로그래밍으로 어찌 해 볼 수 있습니다만 ㅎㅎ )

아무튼 이렇게 두 가지 댓글창의 위치가 있습니다. 각각 장단점이 있구요. 그럼 오늘의 티스토리 팁에서는 댓글창의 위치를 임의로 바꾸는 방법에 대해서 알아 보도록 하겠습니다.


댓글창 위치 바꾸기

댓글 창의 위치를 바꾸기 위해서는 티스토리의 HTML/CSS 편집 기능을 이용해야 합니다. HTML 코드부분을 직접 수정해서 댓글 창의 위치를 조정해 볼 텐데요. 저의 경우는 기본 스킨이 댓글 창을 댓글 리스트 다음에 출력해 주고 있습니다. 이 댓글 창을 댓글 리스트 전에 먼저 출력하도록 바꿔 보도록 하겠습니다.


티스토리의 관리자 메뉴에서 [HTML/CSS 편집] 메뉴를 선택합니다.
[HTML/CSS 편집] 메뉴에 대해서 더 알고 싶으신 분은 다음 링크를 참조하시기 바랍니다.


[HTML/CSS 편집] 메뉴를 여시고 skin.html 부분을 살펴 봅니다.



티스토리의 스킨은 댓글 창을 구분해서 나눠 놓았는데요.


위 처럼 "<s_rp_input_form>" 라는 태그로 둘러 쌓여 있는 부분이 바로 댓글 쓰기 부분입니다. 댓글을 써 넣을 수 있는 <textarea> 부분과 쓴 댓글을 달아 놓을 수 있도록 하는 "확인" 버튼 등이 있습니다.

위 사진처럼 "<s_rp_input_form>" 부터 "</s_rp_input_form>" 까지의 부분을 잘라내기 합니다. ( 복사를 해서 위에다 붙여 넣으면 댓글을 써 넣는 부분이 2개가 되겠지요. 미관상 좋지도 않고 동작을 안 하는 경우도 있습니다. 잘라내기를 해서 붙여 넣도록 합니다. ㅎ )


이제 잘라낸 소스파일( 댓글 창을 표현하는 HTML 코드 )을 붙여 넣어야 합니다. 당연히 댓글 리스트를 나타내는 부분 위에 붙여 넣어야 댓글 리스트 위에 댓글 창이 나오는 형태로 바뀌겠지요. 댓글 리스트를 나타내는 부분은 다음과 같이 시작합니다.


댓글 리스트는 위와 같이 나타나구요. "..." 부분에 독자분이 남겨주신 댓글과 링크, 닉네임, 파비콘, 블로그 아이콘에 대한 정보가 들어갑니다. 소스 파일에서 "<div class="commentList">"를 찾아서 그 위에 잘라내기 했던 댓글창 소스를 붙여 넣기 합니다. 그러면 최종 적으로 다음과 같은 형태의 소스코드가 됩니다.


이제 [미리보기] 버튼을 이용해서 스킨이 어떻게 적용 되었는지 확인합니다.

주의

여기서 바로 [저장] 버튼을 누르시면 위험합니다. 스킨을 잘 못 편집했을 경우 예상과 다른 결과가 나오게 되는데, [저장] 버튼을 그대로 눌러버리면 스킨 편집의 결과가 바로 블로그에 반영되기 때문입니다.

반드시 [미리보기] 버튼을 눌러서 실제로 어떻게 적용되는지 확인을 하시기 바랍니다. ^^ 잘 못 하면 블로그 스킨 다 날아가는 수도 있습니다. ( 저도 몇 번 그런적이 있습니다 ㅜㅜ )

Before

After



댓글 입력 부분이 댓글 리스트 위로 올라간 것을 볼 수 있습니다.
마음에 안 드시면 위에서 했던 단계를 거꾸로 가시면 된까 간단합니다. ㅎㅎ
각자 자신의 블로그에 맞는 댓글 창 위치를 만들어 보세요 ^^



+ Recent posts