Apply Customized Printing Functionality (Print Accessibility) in Plus UI v2.6.5, Blogger Template

Brief

Customizing printing options on a webpage can significantly enhance user experience by offering features such as selective element visibility, where users can choose which parts of the page to print; a print preview functionality to visualize the output before printing; and customizable layouts for different content types. Additional enhancements include adjustable print settings like page orientation and margins, a downloadable PDF option for consistent formatting, custom styles specifically for print media, and the ability to add headers or footers with relevant information. Implementing content filtering based on criteria such as date ranges or categories further allows users to print only the most relevant information, creating a tailored and professional printout.

Procedure

1. Go to Blogger Dashboard.
2. Click  icon next to the Customize button.
3. Backup your Theme and then click Edit HTML, you will be redirected to the editing page.
4. Now, find the below code;

   <span class='pVws hidden pu-views' data-add='true' expr:data-id='data:post.id'><b:include name='eye-icon'/></span>

   and paste the below code just above it;

   <label class='GV' onclick='window.print();'>
   <svg class='line' viewBox='0 0 24 24'><path class='svgC' d='M7.25 7H16.75V5C16.75 3 16 2 13.75 2H10.25C8 2 7.25 3 7.25 5V7Z' stroke-miterlimit='10'/><path class='svgC' d='M16 15V19C16 21 15 22 13 22H11C9 22 8 21 8 19V15H16Z' stroke-miterlimit='10'/><path d='M21 10V15C21 17 20 18 18 18H16V15H8V18H6C4 18 3 17 3 15V10C3 8 4 7 6 7H18C20 7 21 8 21 10Z' stroke-miterlimit='10'/><path class='svgC' d='M17 15H15.79H7' stroke-miterlimit='10'/><path class='svgC' d='M7 11H10' stroke-miterlimit='10'/></svg>Print</label>

5. Now find </body> and paste the below the code just above it;

   <!-- Customized Print Script for Plus UI v2.6.5 -->
   <script>function printElements(){var elementsToPrint=document.querySelectorAll(&#39;p&#39;);document.querySelector(&#39;button&#39;).style.display=&#39;none&#39;;var excludedElements=document.querySelectorAll(&#39;.headCn,#HTML11,.blogMn,#aChp,#TextList99,#post-related,.rPst,.pCmnts#comment,aside.blogItm.sidebar,.footer,.wvC,.wvS,.pInf .im,.pInf .pIm&#39;);var originalDisplay=[];excludedElements.forEach(function(el){originalDisplay.push(el.style.display);el.style.display=&#39;none&#39;;});document.body.classList.add(&#39;printing&#39;);window.print();document.body.classList.remove(&#39;printing&#39;);excludedElements.forEach(function(el,index){el.style.display=originalDisplay[index];});document.querySelector(&#39;button&#39;).style.display=&#39;block&#39;;}window.addEventListener(&#39;keydown&#39;,function(event){if(event.ctrlKey&amp;&amp;event.key===&#39;p&#39;){event.preventDefault();printElements();}});window.addEventListener(&#39;beforeprint&#39;,function(){var exclusions=[&#39;.headCn&#39;,&#39;#HTML11&#39;,&#39;.blogMn&#39;,&#39;#aChp&#39;,&#39;.pGV&#39;,&#39;#TextList99&#39;,&#39;#post-related&#39;,&#39;.rPst&#39;,&#39;.pCmnts#comment&#39;,&#39;aside.blogItm.sidebar&#39;,&#39;.footer&#39;,&#39;.wvC&#39;,&#39;.wvS&#39;,&#39;.qeBtn&#39;,&#39;.pInf .im&#39;,&#39;.pInf .pIm&#39;];exclusions.forEach(function(selector){var element=document.querySelector(selector);if(element){element.style.display=&#39;none&#39;;}});});window.addEventListener(&#39;afterprint&#39;,function(){var exclusions=[&#39;.headCn&#39;,&#39;#HTML11&#39;,&#39;.blogMn&#39;,&#39;#aChp&#39;,&#39;#TextList99&#39;,&#39;.pGV&#39;,&#39;#post-related&#39;,&#39;.rPst&#39;,&#39;.pCmnts#comment&#39;,&#39;aside.blogItm.sidebar&#39;,&#39;.footer&#39;,&#39;.wvC&#39;,&#39;.wvS&#39;,&#39;.qeBtn&#39;,&#39;.pInf .im&#39;,&#39;.pInf .pIm&#39;];exclusions.forEach(function(selector){var element=document.querySelector(selector);if(element){element.style.display=&#39;&#39;;}});});</script>
   <style>@page{margin:0.7in;}@media print{.pGV,.pInf .pCm,.admAbt,.pSh,.cmBtn{display:none;}.pInf.ps{border-radius:0px 0px 15px 15px!important;}.pGV&gt;* ,.pTtl.itm,.brdCmb,.pInf.ps,.pEnt{box-shadow:none!important;background:none!important;padding:0px!important;}.pS img,details.sp{border-radius:0px 0px 5px 5px!important;}.pS h1,.pS h2,.pS h3,.pS h4,.pS h5,.pS h6{text-align:justify;text-transform:uppercase;text-decoration:underline;border:none!important;padding:0!important;font-family:Arial!important;font-size:10px!important;}.pGV&gt;* ,.pTtl.itm,.brdCmb,.pInf.ps,details.sp{font-family:Arial!important;font-size:10px!important;padding:8px!important;}.pre pre{max-height:-webkit-fill-available;overflow:none!important;}.fixi:checked~.fixL .fCls,#comment:target .fixL .fCls,.BlogSearch input:focus~.fCls,.pRs, .brdCmb,.pInf.ps,.adB,.h240, .h360, .h480{display:none!important;}.blogCont,.secIn,.blogCont .section:not(.no-items),.blogCont .widget:not(:first-child){margin:0px!important;padding:0px!important;} .pTtl.itm{font-size:30px! important;text-decoration:underline;text-transform:uppercase;text-align:justify}}</style>

6. Save it.

The article was specifically made for the Plus UI v2.6.5 Blogger template by Fineshop Design. The instructions and codes provided in the article are optimized for this particular template. However, it is highlighted that developers with adequate knowledge and understanding of coding and template structures may adapt and implement the provided codes for other Blogger templates or platforms. While the article focuses on Plus UI v2.6.5, its content can be modified as needed for broader use at the discretion of the developer.