Thêm nút "In trang này" cho bài viết

Khi lướt blog/website bạn thường thấy có nút "In trang này" và thật sự hữu ích với công dụng của nó. Và mình sẽ hướng dẫn cách để thêm nút này vào bài viết, tất nhiên sẽ chỉ lựa chọn những phần nào bạn muốn cho độc giả in và ẩn những phần không cần thiết. Bạn thử demo ngay dưới bài viết này và chúng ta sẽ bắt tay vào việc luôn nha

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ày

Ngoà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(&quot;https://1.bp.blogspot.com/-NFYzZIufJpg/XPzKGAVQJ5I/AAAAAAAAAxo/zRci1iCM-hkp2AjRGyXrlhsJpT3auyxTgCPcBGAYYCw/s25/print.png&quot;) 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!