Hôm nay namkna sẽ giới thiệu đến các bạn một thủ thuật mà các trang web ứng dụng khá nhiều và rất hữu ích cho người dùng trên blog/web. Đó là thêm tính năng in bài (Print) trên blog/web. Với tiện ích này người đọc có thể in bài trên blog của bạn một cách nhanh chóng.
Namkna sẽ giới thiệu cho các bạn 2 Style để các bạn có thể lựac họn.
Style 1: Style tạo hộp thoại print dạng Popup với giao diện đẹp.
» Tạo nút in bài viết đẹp cho blogspot
1. Đăng nhập vào tài khoản Blogger2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm đến dòng code sau (Ctrl F)
<div class='post-header-line-1'/>
6. Thêm code bên dưới vào ngay sau code vừa tìm được
<b:if cond='data:blog.pageType == "item"'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJfClzMJrDxk1ET45Hk0IwC-jFUqMUn6yiRAdpZGiLvzoBFWXQ4_66ZH7-giUSeB657gsgah_hNll3DCiAFPHVgjl1JQ1TH1xnWSEokhkY8otitutaAQ1MPlvEHzrnGQ48owon_5eZ_vv/s1600/print-this-namkna-ngoctra.png) left no-repeat; padding-left: 25px;'><a class='printfriendly' href='#' onclick='window.print(); return false;' title='In bài viết này'>In bài này</a></span></b:if>
7. Cuối cùng save template lại là xong
☼ Cách thực hiện
1. Đăng nhập tài khoản Blogger
2. Vào thiết kế và chọn chỉnh sửa HTML, nhấn (Mở rộng mẫu tiện ích)
3. Chèn code bên dưới vào sau thẻ <head>
1. Đăng nhập tài khoản Blogger
2. Vào thiết kế và chọn chỉnh sửa HTML, nhấn (Mở rộng mẫu tiện ích)
3. Chèn code bên dưới vào sau thẻ <head>
<style media='print' type='text/css'>
#linkbar-wrapper, #comments, #header-wrapper, .widget-content, #lower-wrapper, #header, #sidebar-wrapper,.sidebar, .comment-form,.post-footer,#blog-pager,.post-feeds,#backlinks-container,#navbar-section,.lowerbar-wrapper, #backbutton {display:none !important;}
#content-wrapper,#main-wrapper,#main {font-size:12px;float:none !important;overflow:visible !important;width:auto !important;}
#main a{color:#0000ff;text-decoration:none;}
</style>
- Trong đó: Phần code màu xanh chính là phần sẽ không xuất hiện trong bài in, nếu bạn muốn ẩn phần nào trên blog khi in thì bạn hãy tìm lệnh tương ứng và thêm vào vị trí như trên. Mỗi lệnh cách nhau bởi dấu phẩy (,).
4. Tìm đến dòng code sau (Ctrl F)
<div class='post-header-line-1'/>
5.Thêm đoạn code bên dưới vào sau nó.
<b:if cond='data:blog.pageType == "item"'> <span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJfClzMJrDxk1ET45Hk0IwC-jFUqMUn6yiRAdpZGiLvzoBFWXQ4_66ZH7-giUSeB657gsgah_hNll3DCiAFPHVgjl1JQ1TH1xnWSEokhkY8otitutaAQ1MPlvEHzrnGQ48owon_5eZ_vv/s1600/print-this-namkna-ngoctra.png) left no-repeat; padding-left: 25px;'><a href='javascript:window.print()'>In bài này</a></span> </b:if>
6. Lưu Template lại.
- Bên trên mình đặt code sau lệnh:<div class='post-header-line-1'/>Tức là đặt ngay bên dưới tiêu đề bài viết. Nếu bạn nào muốn đặt nút Print cuối bài viết thì đặt sau đoạn code sau:<data:post.body/>
Chúc thành công!
Nhận xét
Em chưa làm nhưng thấy hay thật Anh namkna ơi!
Trả lờiXóaCảm ơn Anh rất nhiều!
@Phạm Văn Phương không có gì, rất vui vì em đã ủng hộ anh. :3) :3) :3)
Trả lờiXóaNhìn rất đẹp & chuyên nghiệp!
Trả lờiXóaCảm ơn bạn rất nhiều!!! :3)
Mời các bạn ghé diễn đàn Kinh tế - Xã hội Người Bạc Liêu tại http://nguoibaclieu.com
Ủa anh thêm rồi nhưng mà sao nó không có nút này vậy nhỉ? Anh có 2 blog đều áp dụng thủ thuật này, nhưng chỉ có 1 cái là khả dụng thôi.
Trả lờiXóa