How to Print the Contents of A Specific <div> in Your Blogger Blog?

5 min readApr 20, 2022

Printing or converting a particular content, i.e. the text of a blog post into PDF is just a plug-in away in WordPress. However, the Support Forums at Google deem it almost impossible to achieve as most of the users of Blogspot are contented with using a third-party service, Print Friendly and PDF to convert their writings into PDFs for their readers to download.

Nevertheless, there is also a way to utilize the on-device power of your blog readers to convert your writings into PDFs by utilizing the Print functionality as well as using a little bit of the magic of JavaScript to print only a specific element in your preferred <div>, for example, your blog post.

Printing a Specific <div> Content on a Blogger Blog

Coding the Printing Engine

In order for our on-device PDF conversion to work, even on our Blogger blog, we shall have to set up two JavaScript functions as the engine behind our printout. We shall use the following functions:

1. delimg() — To remove images in the printout (Optional)
2. printDiv() — To print a specific div

You do not have to code the whole thing by yourself as the talented folks at Stack Overflow have already done coding for you. Just copy and paste this code to an empty HTML/JavaScript Gadget in the head of the template you are using, for example, Facebook SDK gadget in the themes by Templatify.

<script>
function delimg() {
$(“#PrintPost”).find(“img”).remove();
}
function printDiv() {
var divContents = document.getElementById(“PrintPost”).innerHTML;
var a = window.open(‘’, ‘’, ‘height=800, width=1200’);
a.document.write(‘<body > <h2>The Assimilators by Asad Imran <br>’);
a.document.write(‘<html>’);
a.document.write(divContents);
a.document.write(‘</body></html>’);
a.document.close();
a.print();
}
</script>

Credits: GeeksforGeeks

Please avoid saving directly into the <head> element in your template as this will not work and your template shall not be saved.

Finding the Required <div> to Print

In order to find the class or the ID of the div you want to print, you will have to use the Inspect Element feature in Google Chrome. Here is how:

Open a blog post of your website in the desktop version of Google Chrome.
2. Right-click near the title of your blog post and select Inspect Elements.
3. If the whole area of your blog post is highlighted, note down the name of the class of the div containing your blog post.

Usually, blog posts on the Blogger platform are displayed under the div class “item-post-inner”. However, the div with class does not work well with JavaScript. We will have to wrap this div with another div by the ID “PrintPost”.

Go to your Blogger dashboard > Theme > Edit HTML.
2. Click inside the code and then press CTRL + F from your keyboard.
3. Type item-post-inner (or the div you discovered) in the Search box and hit Enter.
4. Click on the > button next to the line number of “<div class=’item-post-inner’>” to collapse that div.
5. Type “<div id=’PrintPost’>” above the “<div class=’item-post-inner’>” and close it with </div> element.

Wrapping the Required <div> with ID

Creation of the Print or Convert to PDF Button

If your template has the option to show HTML ads under your Blog Post (in the Layouts menu), you can easily paste the triggering code below by using the HTML/JavaScript gadget. But before that, we will have to stylize our button via CSS.

Go to this link to create your favourite style for the button: https://www.bestcssbuttongenerator.com/
2. Click on the preview of your button and ONLY copy its CSS code.
3. Or else, use mine by injecting this CSS code through Layouts > Theme Designer > Advanced > Custom CSS

.myButton {
box-shadow: -2px -1px 21px -1px #3dc21b;
background-color:#44c767;
border-radius:42px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:12px 20px;
text-decoration:none;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}

Now add this triggering code into the HTML/JavaScript gadget as an ad below your blog post (if your template allows)

<input type=”button” class=”myButton” value=”🔻 Save as PDF” onclick=”delimg(); printDiv();” />

We are using onclick to call two functions together.. However, if you do not want to remove images from the printouts or PDFs, remove “delimg();” call and function from both onclick and <script> respectively.

If your template does not allow you to paste the triggering code as an ad under your post, here is how you can add it below your posts:

Go to Theme > Edit HTML
2. Hit CTRL + F and search for the following “<div class=’post-footer’>
3. Paste the triggering code below “<div class=’post-footer’>”.
4. Done

Now re-open any of your blog posts and you will see a button under it saying “Save as PDF”. Clicking on it will open a print dialogue with the contents of only your post on it. Save it either as a PDF or send it straight to the printer!

Troubleshooting

If nothing happens on the button after being clicked, check if:

the code in <script> calls the same ID of the div you intend to print.
2. The code in <script> is properly formatted.
3. The particular div is wrapped under “<div id=’PrintPost’>” is closed properly.
4. The triggering code calls the delimg(); function before the printDiv() function.

Sources and Suggested Readings

1. https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div
2. https://www.geeksforgeeks.org/print-the-contents-of-a-div-element-using-javascript/
3. https://stackoverflow.com/questions/9105925/remove-image-without-id-from-div-with-id