'Print' 태그의 글 목록 :: 벼리지기 마당

블로그에 인쇄버튼 달기

Posted by byori
2011.09.14 13:15 Blog

▶블로그의 내용을 어떻게 인쇄할까? 

보통의 방법이라면 CNTL + P 나, 브라우져의 인쇄버튼을 눌러, 블로그 내용을 따로 출력을 합니다.
그러나 의도하지 않게 광고나 메뉴 혹은 기타 프레임 등이 출력의 걸림돌이 되곤 합니다.

게다가 긴 프레임에 걸려 필요없는 부분까지 여럿 용지를 빼먹어 버리기까지 한다면 자원낭비일 수 있습니다.


블로그에 인쇄버튼을 누르면, 다음과 같이 본문내용을 깨끗이 출력할 수 있습니다.


1) Print, PDF, Email  : 출력 형태입니다. 종이로 인쇄를 할 것인지, 전자문서로 남길 것인지, 이메일로 전달 할 수도 있습니다.

2) 글씨의 크기를 조정할 수 있습니다.

3) 이미지 없이 출력물을 만들 수 있습니다.

4) 필요없는 구절을 제거 하여 인쇄물을 만들 수 있습니다.

▶블로그에 인쇄버튼 달기

Print friendly 서비스를 이용합니다. 
별도의 로그인 가입절차가 필요 없습니다.

자신의 블로그의 적당한 위치에 스크립트 소스를 붙여주기만 하면 끝입니다.
  

Print Friendly and PDF

티스토리의 경우


#_article_rep_desc_#
의 바로 위줄에 적용합니다.


▶인쇄버튼을 이용한 출력물

결과는 원하는 내용만 깨끗이 나왔습니다. 


 출력후 광고가 출력됩니다만, 좋은 서비스를 이용하는 값이라 여기고 사용하시면 좋겠습니다.



이 댓글을 비밀 댓글로
  1. 이렇게도 가능하군요.
    좋은 정보 감사합니다.
    날잡아서 위치고민좀 해야겠네요.
    과연 프린트할 사람이 있을지..ㅜㅜ
    노펫.
    • 누가 제 블로그 프린트해서 볼 사람이 있을련지요 ㅜ.ㅡ;;;
  2. 좋은 정보 감사합니다!
  3. 유용한 정보 감사합니다.
    프린터 때문에 한참을 고민 했는데.
    딱 이거네요^^
  4. 그런데 두가지 질문이 있네요

    1. 프린트 아이콘 우측정렬이 되지 않네요. 방법이 궁금합니다. 정렬을 우측으로 했는데요 그러네요

    2. 프린트 되는 글꼴은 어떻게 지정하나요?

    궁금합니다.
    • 안녕하세요
      1) 질문에 대해서 div 태그에 속성을 <div class='pfButton' style='float:right;'> 처럼 주었습니다.

      2) 질문에 대해서는 http://www.printfriendly.com/button
      화면에서 '사용자 CSS'를 설정합니다.
      URL은 ./style.css를 입력하시고,

      html css 편집기에서
      style.css 맨 하단에 아래를 붙어 줍니다.
      =======================================
      /* This will align images to the left */

      #printfriendly img{
      float:left;
      margin-top: 12px;
      margin-right: 12px;
      }

      /* Changes font family and size */

      #printfriendly {
      font-family: Arial;
      font-size: 14px;
      }

      /* Changes header color */

      #printfriendly h1, #printfriendly h2, #printfriendly h3, #printfriendly h4 {
      color: Green;
      }
      ==============================================

      그리고 마지막으로 HTML의 적당한 위치에
      Print button 코드를 붙어 넣으면 될 거 같습니다.




      <div class='pfButton' style='float:right;'>
      <script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = './style.css';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_gry_l.png" alt="본문을 인쇄합니다"/></a>
      </div>
    • 한가지 주의할 점은 화면 출력에서 글 목록을 '한개'만 설정하셔야 합니다. 2개이상 설정하면, 아랫글 버튼을 누르면 맨 윗글만 표현 됩니다.
  5. 답변 감사합니다.
    얼른 시도 해봐야겠네요
    안그래도 어제 여기저기 코드를 삽입하다 보니 우측정렬에 위치도 적당한 곳에
    붙혀넣었는데.. 글꼴은 어떻게 하지 못하겠더라고요ㅠㅠ
    그런데 이렇게 빠른 답변 주시니 너무 감사합니다.

티스토리 툴바