Adjusting the Print Area Blog With onclick Event

how to install the key print this page by using the code onclick print content and a code javascript that would regulate the print pages by providing a selection element to print the page.
For example, please compare that print the page using the print button using javascript: print without print with CSS media queries that use the print button onclick print content .

Screenshot print pages with javascript button.

Screenshot pages print with onclick button.

DEMO

Please try and compare the two buttons below the post printnya demo page .

If you are interested to try it out, please copy the code below. Please save the code below to make printnya button below the post

<div onclick='printContent(&apos;printarea&apos;)' style='margin:20px 0;cursor:pointer'><img alt='print' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelXuGSPG786AeIVMKYwpi1Fx1MoZFR98JVxSVAtbslFp6hxUhY23lSTVdmTBQ-CA64g6IqjnQG_sMo5Z0bCOOBRveGp__WotPK8SwJ5Q0BlIAaQZKORgYg3YimoIGhRUf0KVqcFyht2yV/s1600/iconprinter.png' title='Print This Page' width='16'/> Print This Page
</div>

Then please find a code like this or something similar like that.

<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

And save the code <div id='printarea'> right after that code so that it becomes like below.

<article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
<div id='printarea'>

Then scroll down a bit and find the code as below and save the cover div id printarea was right under it.

<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

So it becomes like below.

     <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
</div>

Then save the javascript code below the above code </body>

<script type='text/javascript'>
function printContent(el){
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
}
</script>

Save the template and please try printnya button on page one of your blog posts.

http://www.kompiajaib.com/2014/09/mengatur-print-area-blog-dengan-onclick.html