Today We goona add Print as PDF button in blogger blog. And This Buuton will show under every post title...
For Demo You can See this picture:![]() |
Print as PDF Button after Every Post |
Follow these Steps to add Print as PDF button:
i) First of all, Log on your Blogger account then go to Template settings.
ii) Now go to you blogger template settings....
![Template Settings Template Settings](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJeETQQUnqupEfnzQL1JXNNS8eHPoQWd1eQlGbjVQrhM_aW080r1WIj8ULWA_y8sNVUAoPX-bIOnmkrpa2ywki4vBo3JDlAY810yYwhD9p-c7OBtksLonz8Hm6G3yagig1DjcLMTLTcU/s1600/pic-1.png)
iii) Now click on Backup/Restore option:
![Template backup and restore Template backup and restore](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYYHkzjLd3B48khhtRWbJILsD3yb8TnJSkcsLmUa9tmbcXyi9YwGucrrnf8mp-qAWEvqXBvx6Lg3iD3mlOaTuD08-q2mydEl8ggR1V_0CnRAEXwU6Mkt8GVQFu3yYCdQI6E46yr5nsoo/s1600/pic-2.png)
iv) Now
Download full template
for security:
![Download Full Template Download Full Template](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxv_sqTFs_HPSFFKohabUgsk6RNNYRxuKiS_Rd5uCLoRMOox3uHHQRATEG2kfsqXh1ZZDl-aQmhPDTxvSXpb_wg9SB8QGnBy6_j00acPaW31gnUBeuHNBorbgyqLls7Yn_9kdYVKXyCA/s400/pic-3.png)
v) Now close the windows and click on "
Edit HTML
"...
![Edit Blog Edit Blog](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAXlF4ClfOen6X1SelDtoXsdNRfYlkjcBabzKzLkV5Qk3RnaI7Qh7WlFQikT5nmZZKkrX4Hr_826jx_Zp0cdgqWHnrg-S5Nn4MwdyvvUrz_AaQFU3apxGtledepadSDYKwlFyv3vT5VM/s400/pic-4.png)
vi) Now click the Box and check it "
Expand Widget Templates
"...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBij-Xg79o9tE5jYIPkRfCIEa570S_mDevFL55nEWhzCS0jdNqzo5Lhsmt2p91jeKFOE-_Q2ZjpnYwNu9AdLiHvNQpiwcTlbrSDCCCFh4zvayPMImB8JJTAXRRyGCEDgAdQ-PeQM5xhbQ/s400/pic-5.png)
See in the Picture: Just Under of those Lines Paste the code given Below(In Red Words):
<b:if
cond='data:blog.pageType == "index"'><a expr:href='data:post.url +
"?pfstyle=wp"' style="margin-right:1em; color:#6D9F00;
text-decoration:none;" class="printfriendly" title="Printer Friendly and
PDF"><img style="border:none;"
src="http://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and
PDF"/></a><b:else/><b:if cond='data:blog.pageType ==
"archive"'><a expr:href='data:post.url + "?pfstyle=wp"' style="
margin-right:1em; color:#6D9F00; text-decoration:none;"
class="printfriendly" title="Printer Friendly and PDF"><img
style="border:none;" src="http://cdn.printfriendly.com/pf-button.gif"
alt="Print Friendly and
PDF"/></a><b:else/><script>var pfHeaderImgUrl =
'';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages
= 0;var pfImageDisplayStyle = 'right';var pfDisablePDF = 0;var
pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var
pfBtVersion='1';(function(){var js, pf;pf =
document.createElement('script');pf.type = 'text/javascript';if('https:'
==
document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a
href="http://www.printfriendly.com"
style="color:#6D9F00;text-decoration:none;" class="printfriendly"
onclick="window.print();return false;" title="Printer Friendly and
PDF"><img style="border:none;"
src="http://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and
PDF"/></a></b:if></b:if>
See the Demo:viii) Now Click On save template and Visit Any Article from Your website...
Thinks that will work for You....
That's all..
Thanks for Visiting here...