Phương pháp tạo nút in bài viết với trang xem trước cho Blog bao gồm 3 bước: tạo bố cục cho trang Print Preview tức là khi bấm Ctrl + P, tạo...
Phương pháp tạo nút in bài viết với trang xem trước cho Blog bao gồm 3 bước: tạo bố cục cho trang Print Preview tức là khi bấm Ctrl + P, tạo trang xem trước trước khi bấm Ctrl + P và đặt nút in trong bài viết.
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.
Bình luận