
Sử dụng CSS để lựa chọn phần để in
Bạn sử dụng CSS để cho hiển thị hoặc ẩn đi những nội dung khi in ra. Chúng ta chỉ cần in nội dung của bài viết còn phần tiêu đề website, sidebar, menu, footer đều không cần thiết thì ẩn đi bằng thuộc tính display:none. Để làm được điều này chúng ta cần phải xác định ID hoặc Class của các phần nàyNgoài ra chúng ta cũng định dạng cho phần in ra, thông thường chúng ta sẽ in chiều rộng của bài viết ra hết khổ ngang, vì thế ta xác định ID của phần bài viết và đặt cho chiều rộng là 100%
Ta có ví dụ bên dưới
<style type="text/css" media="print">
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager {display: none;}
.post,#content-wrapper,#main-wrapper,#main{width:100%}
</style>
Như vậy nghĩa là những thành phần có id và class là #header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager đều bị ẩn và những thành phần có id và class là .post,#content-wrapper,#main-wrapper,#main sẽ có chiều rộng là 100% khi click nút In
Chèn nút "In trang này" vào bài viết
Bạn copy và dán đoạn code bên dưới vào vị trí muốn hiển thị vào template<span style="background: url("https://1.bp.blogspot.com/-NFYzZIufJpg/XPzKGAVQJ5I/AAAAAAAAAxo/zRci1iCM-hkp2AjRGyXrlhsJpT3auyxTgCPcBGAYYCw/s25/print.png") left no-repeat; display: inline; padding-left: 25px;"><a href="javascript:window.print()" rel="nofollow">In trang này</a></span>
Nếu muốn bạn có thể thay đổi biểu tượng của máy in theo ý mình. Chúc bạn thành công!