[Blogger] Tạo button in bài viết blogspot

Nhìn tiêu đề bài đăng chắc cũng không cần vòng vo nhiều nữa. Các browser hầu như đã tích hợp tính năng in, và nếu như bạn là 1 tay viết lách chuyên nghiệp, chất lượng bài đăng của bạn cao thì việc thêm button in bài viết là hết sức cần thiết !

Điều quan trọng cần nói đến ở đây không phải là tạo ra button (vì một số browser có thể gọi tính năng in qua phím tắt - thường là Ctrl+P hoặc right click), mà là css bạn thiết lập, thành phần nào bị ẩn đi, thành phần nào được in ra, đó mới là trọng tâm bài viết.

Việc bạn tạo button để người dùng có thể tương tác ngay mà không cần phải nhớ phím tắt hoặc các tùy chọn dài dòng của mỗi browser cũng giúp bạn ghi điểm rất nhiều trong mắt khách thăm website.

Tích hợp fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tạo button, dán code HTML vào vị trí bạn muốn nó hiển thị

<a class='print-art' onClick='window.print()' rel='nofollow' title="Print now"><i class='fa fa-print'></i></a>

Viết CSS cho button

.print-art{color:#fff;padding:5px 8px;border-radius:2px;background:#010101;font-size:15px;cursor:pointer}
.print-art:hover{-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease;background:#fff;color:#111;border-color:#111;border-style:solid;border-width:1px}

Và cuối cùng là thành phần quan trọng nhất, bạn cần xác định sẽ ẩn đi thành phần nào, sẽ in ra thành phần nào bằng cách thiết lập CSS

@media print {
  #id,.class {display: none !important}
  #id,.class {width: 100% !important;max-width: 100% !important}
}

Không quá khó khăn khi bạn đã là 1 blogger đúng không :)
+ #id,.class {display: none !important}: thay các id, các class tương ứng thành phần bạn không muốn nó được in ra
+ #id,.class {width: 100% !important;max-width: 100% !important}: đây là nội dung sẽ được in ra

Lấy id và class như nào thì bạn hãy tham khảo chị google cách xem id hoặc class bằng F12 thần thánh nhé

Sau đây là kết quả với blog của tôi

+ Với Chrome và các brower nhân chrome

+ Edge và IE

+ Firefox thì hơi cùi khi không có chế độ preview bản in

Như vậy qua bài viết bạn đã tạo được cho mình thêm 1 chức năng cực cool cho website rồi.

Chúc bạn thành công nhé !