How add print button to blogger reciept website?

Question

how can I add a print button to my recipe website hosted on blogger.com? I have this recipe website and I wanted to add a print button on the website so users who visit my blog will be able to print the recipe.

u meant print Recipe ? – silvachathura Feb 09 '21 at 14:30 — silvachathura, Feb 09 '21 at 14:30

score 1 · Answer 1 · edited Feb 21 '21 at 22:19

If you are okay with printing the whole page then you can use this code block:

<button onclick="window.print()">Print this page</button>

If you want to just print the recipe, then you'll need to tag it using an HTML ID the best way to implement a solution like that would be as follows: HTML:

<div id="recipe">
       <!-- Your HTML for the recipe goes here -->
</div>
<button onclick="printDIV(recipe)">Print Recipe</button>

And a bit of Javascript: (From this post: Print the contents of a DIV )

function printDIV(div) {
       var mywindow = window.open('', 'PRINT', 'height=400,width=600');

       mywindow.document.write('<html><head><title>' + document.title  + '</title>');
       mywindow.document.write('</head><body >');
       mywindow.document.write('<h1>' + document.title  + '</h1>');
       mywindow.document.write(document.getElementById(elem).innerHTML);
       mywindow.document.write('</body></html>');

       mywindow.document.close(); // necessary for IE >= 10
       mywindow.focus(); // necessary for IE >= 10*/

       mywindow.print();
       mywindow.close();
}

To change the size at which it prints you can change the height and width parameters in the window.open() function.

How add print button to blogger reciept website?

1 Answers1