Tạo nút in bài viết với trang xem trước cho Blog
Để tạo thêm tính chuyên nghiệp, mang lại sự thẩm mỹ cho bố cục bài viết và tất nhiên cũng vô cùng quan trọng người ta thường chèn nút in có thể bên dưới tiêu đề hoặc dưới cùng bài viết. Nó có tác dụng khi người đọc muốn in bài có thể xem trước nội dung trước khi bấm in trang.
Thông thường khi muốn in một trang nào đó trên web cách nhanh nhất là bấm tổ hợp phím Ctrl + P để hiện trang Print Preview. Tuy nhiên nếu bạn tạo trang bố cục bài viết xem trước giống như những trang tin tức tạp chí như vậy trông chuyên nghiệp hơn.
Cách làm ở đây có 3 vấn đề như sau thứ nhất bạn phải tạo bố cục cho trang Print Preview tức là khi bấm Ctrl + P và thứ hai là tạo trang xem trước trước khi bấm Ctrl + P và cuối cùng đặt nút in trong bài viết.
Tùy theo mỗi theme được thiết kết có id, class khác nhau do đó ở đây mình chỉ hướng dẫn phương pháp làm còn css bạn thay vào cho phù hợp
1. Tạo nút in bài viết
Tạo CSS cho nút in
.printBtn {
float:right;
cursor:pointer;
}
.printBtn:before {
font-family: fontawesome;
content: '\f02f';
float: left;
background: #005A89;
width: 25px;
vertical-align: text-bottom;
text-align: center;
color: #fff;
height: 18px;
line-height: 18px;
font-size: 14px;
border-radius: 3px;
}
Đặt nút in vào bài viết
<div class='printBtn'/>
2. Tạo trang xem trước
Cách thực hiện sử dụng jquery thêm class trước tiếp và gọi nút in ví dụ
<script>
//<![CDATA[
$(".printBtn").click(function() {
$('#taskbar,.header-right,.sidebar-wrapper,.breadcrumbs,.post-social,.knc-menu-nav,.related-post,#related-posts,.keywords,.social-sharing-widgets,.fb-comments,.ads_Gg,#comments,#PopularPosts1,#PopularPosts2,#HTML4,.footer-wrapper,#footer,.ads-right, .ads-left').css('display','none')
$('body').css('background-color','#fff')
$('.header-wrapper').css('border-bottom','2px solid #ccc')
$('.main-wrapper').css('border','none')
$('.box').css('width','100%').css('float','none')
$('.post-metaDescription,.related-post,.post-body').css('padding-left','0')
$('.print').css('display','block')
});
//]]>
</script>
Thêm đoạn mã HTML để tạo nút IN TRANG (CTRL+P)
Tạo CSS
#printBtn {
// Viết css
}
.print{
display:none;
}
Đặt đoạn mã HTML trong trang xem trước
<div id='printBtn'>
<a class='print' href='javascript:void(0);' onclick='javascript:window.print();' rel='nofollow' title='In bài viết này'>In trang (Ctrl+P)</a>
</div>
3. Tạo bố cục cho trang Print Preview
Thêm CSS
@media print {
// Viết css vào đây
#printBtn {display: none} // Ẩn nút IN TRANG (CTRL+P)
}
Cách viết css các bạn kiểm tra phần tử xem class và điều chỉnh cho phù hợp.
Chưa có bình luận nào, hãy là người đầu tiên!