Thêm tiện ích cho phép in từng bài viết một

Nếu bạn đọc đuợc một bài viết hay và muốn in để đọc lại sau này thì có lẽ mọi người sẽ nghĩ ngay đến chức năng in của trình duyệt đang sử dụng. Nhưng có 1 điều là nó sẽ in tất cả các thành phần của blog như tiêu đề, sidebar và các thành phần khác của blog, đó là điều mà ta không muốn chút nào. Để thuận tiện hơn cho bạn bài viết này sẽ huớng dẫn cách thức làm sao thiết lập để chỉ in nội dung bài viết và phần nhận xét ( comment ) của blog mà thôi.

Công việc đầu tiên là bạn phải sao lưu template của mình đề phòng việc cần dùng đến.
Tiếp theo bạn vào Layout > Edit HTML, tìm đến tag: </head> rồi dán đoạn mã sau lên phía trên truớc thẻ </head>.


<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>


Bấm Save để lưu lại.
Tiếp tục bây giờ chúng ta đến công đoạn thêm liên kết "Print this post". Bạn vào trang Edit HTML, bấm chọn Expand Widget Templates
Rồi tìm đến đoạn mã sau:

<p><data:post.body/></p>

Dán 1 trong 3 đoạn mã sau vào ngay phía dưới. 3 đoạn mã này sẽ hiển thị 3 kiểu khác nhau cho bạn lựa chọn.

Kiểu 1:
Print this post

Đoạn mã:

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>




Kiểu 2:


Đoạn mã:

<b:if cond='data:blog.pageType == "item"'>
<form> <input type="button" value="Print This Page" onClick="window.print()" /> </form>
</b:if>




Kiểu 3:
Print this post

Đoạn mã:

<b:if cond='data:blog.pageType == "item"'>
<span style='background: url(http://i188.photobucket.com/albums/z33/anhhung1570/neo-print.png) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Print this post</a></span>
</b:if>


Cuối cùng bấm Save để hoàn tất. Chúc bạn mắn.

Hung Nguyen

Tôi là 1 amateur blogger. Tôi lập blog này để viết mọi thứ về Google. facebook

4 Comments

  1. Hi anh Hùng!
    widget in tài liệu này rất hay cho blog, như thế người đọc đỡ phải mất công bôi đen nội dung.
    Mình đã thử áp dụng code này nhưng không thành công. Sau khi save template khong thấy báo lỗi gì nhưng khi view blog thì chỉ thấy được homepage. Khi mở các link đến từng post riêng thì không hiển thị bài viết. Anh Hùng có thể xem lại giúp được không?
    Nhân đây hỏi anh luôn: có code nào để người in có thể chọ option in cả ảnh cả bài viết hoặc chỉ in bài viết mà không in ảnh không? (để tiết kiệm mực in ^^). Cám ơn anh nhiều

    ReplyDelete
  2. @cookingandEmi: Thực ra đoạn mã trên không đúng khi dán vào giao diện, em đã chỉnh lại rồi chị làm lại nhé. Trước đây em làm đoạn mã trên hiển thị sai nên bị lỗi như vậy.
    Mới cả em còn ít tuổi, sinh viên năm cuối thôi, chưa lấy vợ thì chị cứ gọi là "em" thôi chứ gọi bằng "anh" nghe kỳ quá.

    ReplyDelete
  3. Bổ sung: Hiện em vẫn chưa biết cách để người in có thể chọ option in cả ảnh cả bài viết hoặc chỉ in bài viết mà không in ảnh.

    ReplyDelete
  4. hi hi, không xem profile của em nên cứ gọi anh cho ..chắc ^^. Chị làm được rồi. Thank em nhé

    ReplyDelete
Previous Post Next Post