블로그에 인쇄버튼 달기

Blog2011. 9. 14. 13:15byori

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

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

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


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


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

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

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

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

▶블로그에 인쇄버튼 달기

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

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

Print Friendly and PDF

티스토리의 경우


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


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

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


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



블로그 주인 사진Authorbyori
우리는 지구별에 불시착한 사차원 화성인, 어쩌면 지구별에 영영 적응을 못 할지도 몰라.
  1. 프로필사진Favicon of http://www.nofat.co.kr BlogIcon 노펫2011.09.15 10:37 + 

    이렇게도 가능하군요.
    좋은 정보 감사합니다.
    날잡아서 위치고민좀 해야겠네요.
    과연 프린트할 사람이 있을지..ㅜㅜ
    노펫.

  2. 프로필사진Favicon of https://life.wincomi.com BlogIcon 윈컴이2011.09.25 20:49 신고 + 

    좋은 정보 감사합니다!

  3. 프로필사진Favicon of http://www.gigumi.com BlogIcon 기구미2013.05.21 23:45 + 

    유용한 정보 감사합니다.
    프린터 때문에 한참을 고민 했는데.
    딱 이거네요^^

  4. 프로필사진Favicon of http://www.gigumi.com BlogIcon 기구미2013.05.21 23:52 + 

    그런데 두가지 질문이 있네요

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

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

    궁금합니다.

    • 프로필사진Favicon of https://www.byori.net BlogIcon byori2013.05.22 13:58 신고 + 

      안녕하세요
      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>

    • 프로필사진Favicon of https://www.byori.net BlogIcon byori2013.05.22 14:00 신고 + 

      한가지 주의할 점은 화면 출력에서 글 목록을 '한개'만 설정하셔야 합니다. 2개이상 설정하면, 아랫글 버튼을 누르면 맨 윗글만 표현 됩니다.

  5. 프로필사진Favicon of http://www.gigumi.com BlogIcon 기구미2013.05.22 22:53 + 

    답변 감사합니다.
    얼른 시도 해봐야겠네요
    안그래도 어제 여기저기 코드를 삽입하다 보니 우측정렬에 위치도 적당한 곳에
    붙혀넣었는데.. 글꼴은 어떻게 하지 못하겠더라고요ㅠㅠ
    그런데 이렇게 빠른 답변 주시니 너무 감사합니다.