How to Make a Print Button on the Top Right of Blogger Posts

How to Make a Print Button on the Top Right of Blogger Posts - One of the widgets that must be on blog sites is the print button, especially websites that contain educational content. Not only the print button, css @media print is also recommended for availability on the website, and even some seo scoring tools such as "All-in-one SEO Tool" require css @media print on every website to be more user friendly. ). And in this tutorial I will explain how to make / install the print button on the top right of blogger posts and how to set thumbnail print with css @ print media.

The steps are very easy, first let's look at the material we use to make the print button below;

CSS Print Button

.topmeta .pull-right > *{float:right;display:block;height:25px;line-height:25px;}
.topmeta a{text-align:center;color:#fafafa;font-size:15px;text-decoration:none;padding:0 5px;background-color:#009678;width:25px;margin:0 2px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;position:relative;cursor:pointer}
.topmeta a:active{bottom:1px}
.topmeta a:hover{background-color:#353535}

Place the print button css above the code]]> </ b: skin> or above the code </style>.

HTML Print Button

<b:includable id='top-meta' var='post'>
<div class='topmeta'>
<div class='pull-right inner'>
<a class='button_print' onClick='window.print()'><i class='fa fa-print'/></a>
<a class='button_email' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&postID=" +data:post.id+ "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><i class='fa fa-envelope'/></a>
</div>
</div>
</b:includable>

Copy all the print button html code above then install or place it in the main widget section or in your blog template widget code collection, see the sample image below;

How to Install the Print Button on Blogger Post

Note: Icon print "fa fa-print" changes according to the type of awesome fonts on each site, for example if the awesome font that you use v 3.2.1 then "fa fa-print" is replaced with "icon-print". If there isn't an awesome font available on the site page, please add the above </head> tag code below;

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Switch (HTML Print Button)

<b:include data='post' name='top-meta'/>

This code is used to display the print button widget that was installed in the previous step. If only the css and html code of the print button are installed, the print button widget is still in standby. So to display the print button on the top right of the post, attach the code (switch) right above the <data: post.body /> code, for example;

<b:if cond='data:blog.pageType == "item"'>

Code Here....

<data:post.body/>

Save and see the results, installation of the print button as above is only for blog posts only, if you want to display the print button on the static page (static page) then also attach the print button switch above the <data: post.body /> code inside static page tag;

<b:if cond='data:blog.pageType == "static_page"'>

Code Here...

<data:post.body/>
<b:else/>

After the print button is successfully installed, we will now set the css @media print, without the css @media print, the print button can still be used, but the print thumbnail displayed is in full view. So the role of css @media print is to set the print thumbnail to fit the user's needs (displaying only the title and post page) on the print thumbnail.

Css Thumbnail Print

@media print{
...... style css here...
}

Fill in the css print thumbnail settings for your site and place the css @media print code above the code]]> </ b: skin> or </style>, for example I attach the css thumbnail print to my site below;

@media print{
#top-head,#topnav,#nav,.breadcrumbs,.post-headera.meta,#sidebar-wrapper,#blog-pager,.post-footer,#related_posts,#header-wrapper,.comments,#footer-wrapper,#top-featured,.middle-ad,.bottom-ad,.first-ad,.bottom-cont,.footer-ad{display:none}
#main-wrapper{width:100%;float:none;max-width:100%}
}

I hide all parts of the site, starting from the header, menu, sidebar and so on with the css display: none property, then in the main-wrapper section or post column I display it in full width, please press the print button to see the css @media print demo. To provide thumbnails like that you need to know the 'id' of each element of your blog site, so that it is easier to find out the 'id' of the site elements do an inspect element.