Tạo nút print cho blogger

0
Hôm nay mình 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à mình sẽ giới thiệu đến các bạn cách để đưa tiện ích này vào blogger, 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. Thủ thuật này không quá phức tạp, chỉ với vài bước đơn giản thì bạn có thể thiết lập được tính năng print cho blog của mình. Bạn có thể xem demo để thấy rõ tính năng này.



☼ 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>
 
&lt;style media='print' type='text/css'&gt;
#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;}

&lt;/style&gt;

Chỉnh sửa code: 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. Tiếp đến bạn chèn nút print vào bài đăng code print có dạng
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie21mZn1vpEJRPetr8Av9MMu-KfcPXoio6lqPYe63BUNKGiSflZnvdUEQIIpT9c8CDrKMEn8DAPrD3PSUTsbFV2BLTKT0ccixdrgt4CcgnHU5WU8P8HyZLpdi23nV4HNhHGmKE9_dESGKe/) left no-repeat; padding-left: 25px;'&gt;&lt;a href='javascript:window.print()'&gt;In bài này&lt;/a&gt;&lt;/span&gt;
&lt;/b:if&gt;


Tùy chọn vị trí nút print

A. Nếu bạn muốn đặt nút Print sau tiêu đề bài đăng, bạn chèn code ở bước 4 như bên dưới


&lt;div class='post-header-line-1'/&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie21mZn1vpEJRPetr8Av9MMu-KfcPXoio6lqPYe63BUNKGiSflZnvdUEQIIpT9c8CDrKMEn8DAPrD3PSUTsbFV2BLTKT0ccixdrgt4CcgnHU5WU8P8HyZLpdi23nV4HNhHGmKE9_dESGKe/) left no-repeat; padding-left: 25px;'&gt;&lt;a href='javascript:window.print()'&gt;In bài này&lt;/a&gt;&lt;/span&gt;
&lt;/b:if&gt;
B. Nếu muốn đặt nó sau bài đăng

&lt;data:post.body/&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;span style='float:right;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie21mZn1vpEJRPetr8Av9MMu-KfcPXoio6lqPYe63BUNKGiSflZnvdUEQIIpT9c8CDrKMEn8DAPrD3PSUTsbFV2BLTKT0ccixdrgt4CcgnHU5WU8P8HyZLpdi23nV4HNhHGmKE9_dESGKe/) left no-repeat; padding-left: 25px;'&gt;&lt;a href='javascript:window.print()'&gt;In bài này&lt;/a&gt;&lt;/span&gt;
&lt;/b:if&gt;


Chúc bạn thành công
Nguồn: Traidatmui.com

0 nhận xét:

Đăng ký: Đăng Nhận xét (Atom)