티스토리 블로그 꾸미기 중 댓글 입력창에 관한 글을 작성했었죠.

티스토리, 댓글입력창 꾸미기
[블로그 꾸미기] 댓글 입력창 꾸미기 2

이번에는 보통 댓글 입력창이 댓글 아래에 위치하고 있기때문에 글을 발행 후, 많은 댓글이 달리는 블로그라면!!! 새로운 댓글을 달기 위해서는 마우스 휠을 엄청 돌려야겠죠;;;ㅋ

이런 문제로 인해, 댓글 입력창을 댓글 윗부분에 위치한 블로그도 많이 볼 수 있습니다.

저같은 경우에는 다른 블로그의 댓글도 읽어볼때가 있기때문에, 댓글 입력창이 상단에 위치하고 있다면 댓글을 모두 읽고 다시 댓글을 작성하기 위해 상단으로 이동을 해야겠죠 ^^

그래서, 오늘은 댓글 입력창으로 바로 이동할 수 있는 버튼을 추가하는 방법을 설명드리겠습니다.^^

■ 댓글 입력창 바로가기 버튼 이미지 만들기


댓글 입력창으로 이동하는 버튼이라는 것을 다른 분들이 알아야 하기 때문에 눈에 띄는 이미지를 만드는 것이 좋겠죠^^ 아니면 일반 텍스트로 바로가기라는 것을 인식시켜주는 것이 중요하겠죠!!!

저는 그렇게 댓글이 많이 달리지 않기때문에 스킨에 어울리는 이미지를 만들었습니다 ^^;;
작아서 잘 보이진 않네요;;;

자신이 원하는 이미지를 업로드하면 준비 완료!!!

■ HTML/CSS 수정하기

찾기(Ctrl+F)를 통해 버튼을 추가할 곳과 댓글 입력창을 수정해야겠죠 ^^


▶ 댓글 입력창 수정하기 - 찾기(Ctrl+F) → rp_input_comment 검색

<textarea id="comment" name="[##_rp_input_comment_##]" rows="6" cols="50"></textarea>

⑴ id="comment" 추가
⑵ comment는 자신이 편한 이름으로 변경하시면 됩니다.

※ textarea로 검색할 경우, 방명록과 댓글입력창 2곳이 검색됩니다. 그렇기 때문에 rp_input_comment 를 꼭 확인하셔야 합니다.


▶ 바로가기 버튼 추가하기 - 찾기(Ctrl+F) → actionTrail 검색

<div class="actionTrail">
    <a href="#tb" onclick="[##_article_rep_tb_link_##]" title="Trackback" class="tb"><s_tb_count>Trackback <span class="cnt">[##_article_rep_tb_cnt_##]</span></s_tb_count></a>
    <a href="#rp" onclick="[##_article_rep_rp_link_##]" title="Comment" class="rp"><s_rp_count>Comment <span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count></a>
    <a href="#comment" title="Comment Write" class="write">Comment Write</a>
 </div>

⑴ href="#comment" 는 textarea의 id 값과 동일해야합니다.
⑵ title=""에 쓰인 문구는 버튼에 마우스 오버했을 경우 툴팁으로 문구를 보여줍니다.

▶ CSS 수정하기

.actionTrail {position:relative;padding-bottom:10px; }
.actionTrail a.write{position:absolute;top:0;right:0;padding-left:19px; background:url(images/write.jpg) no-repeat 5px 2px }

■ 완성 된 모습


저는 그렇게 눈에 띄진 않네요 ^^;;;
한번씩 클릭해보시면 댓글 입력창으로 바로 이동하는 모습을 보실 수 있습니다~
신고
Posted by 별군

댓글을 달아 주세요

  1. 댓글 달고 바로 테스트 해봐야겠는데요 ㅎㅎㅎㅎ
    유용한 정보 잘배우고 갑니다 ^^

    2010.07.23 11:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 이동단추가 있으면 편하긴하죠.
    저는 스크롤바 옆에 이미지 버튼으로 만들었습니다.

    2010.07.23 13:54 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 와우~ 한번 구경가야겠습니다 ^^

    2010.07.23 13:56 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 좋은팁이네요~ 스킨 상단이나 스크롤 부분에 포함된다면 더 편리할 듯..

    2010.07.25 16:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 항상 유용한팁에 도움받지요..많은 분들이 다양하게 꾸며주셔서..관심 갖고 있는데 아직 적용은

    2010.07.26 08:07 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • ^^ 많은 분들이 html/css 수정이 어려우셔서 적용 못하시는 분들도 많이 계시더라구요~

      2010.07.26 09:41 신고 [ ADDR : EDIT/ DEL ]
  6. 좋은 방법입니다.

    이 방법으로 다르게도 응용할수 있겠네요^^;

    고맙습니다~. 나중에 기회되면 해봐야겠네요^^;//

    2010.08.08 11:23 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바