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

Copy

.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

Copy

<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ụ

Copy

<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

Copy

#printBtn {

    // Viết css

}

.print{

    display:none;

}

Đặt đoạn mã HTML trong trang xem trước

Copy

<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

Copy

@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.

Tags: themetin tức