next prev 버튼

게시자: 대문 demun 카테고리: Design 2011.01.18 21:53
블로그에 사용하기 좋은 next , prev 버튼을 배포합니다.
붙어있는  파일과 각각 떨어져있는 이미지 파일을 배포합니다.
붙어있는 이미지파일은 하나의 파일로 background-position을 이용하면 한장의 이미지로 이용할수 있어서 이렇게 배포합니다.

이미지의 크기는 150*50 으로 맞춘겁니다.

붙어있는 이미지

각각의 이미지
next

prev

포토샵에서 한컷.

이미지 파일은 PNG 파일이니 크기조정 가능합니다.
하나로 된것과 분리된것 모두 포함합니다.


신고

댓글

  1. 2011.12.08 00:34 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    대문님 안녕하세요..오랫만에 왔더니 스킨이 확 바뀌셨네요..메뉴부분 정말 잘 만드셨네요...역시 능력자 이십니다.^^
    대문님 올려주신 이미지 제 스킨에 적용할수 있을까요?

    • BlogIcon 대문 demun 2011.12.08 18:52 신고  댓글주소  수정/삭제

      일단 제가 지금보니 이미지가 별로군요.ㅎㅎㅎㅎ
      제가 psd 파일이 현재는 없어서 그냥 위의 이미지로 했습니다.

      원래는 이미지가 같은것으로 사용을해서 텍스트와 위치가 다 맞아야되는데...제가 해보니 이미지가 별로입니다.

      일단 이미지중에서 next1.png 파일을 업로드하세요.
      이미지의 위치가 바껴서 css 코드로 흰색이, 그리고 prev 가 왼쪽에 ... 그렇게 보이게 했어요.

      css 에서 페이징 부분을 검색하셔서 페이징 끝부분에 아래의 코드를 붙여넣으세요.

      그부분을 수정하지마시고 그냥 덮어쓰세요. 그래야 나중에 수정이 수월합니다.

      /* 추가된 페이징 코드
      ---------------------------------------------------------------
      이미지 next1.png 사용시 수정코드
      ---------------------------------------------------------------
      */
      .paging .left a,
      .paging .right a { height:50px; line-height:50px; width:150px; }
      .paging .left a.prev { background:url(images/next1.png) no-repeat -150px -50px; }
      .paging .left a.prev:hover { background-position:-150px 0; }
      .paging .right a.next { background:url(images/next1.png) no-repeat 0 -50px; }
      .paging .right a.next:hover { background-position:0 0; }

  2. 2011.12.09 00:28 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    대문님 감사합니다..^^ 아 근데 고민이군요..요 이미지를 넣으면 하나만 너무 튀어보일지 모르겠다는 생각이 드네요..ㅎㅎ
    다른 이미지도 시간나시면 만들어 주실꺼죠?..ㅎㅎ
    염치불구...ㅎㅎ