Print Friendly & PDF Button for your blogger posts

Σήμερα θα δούμε ένα ακόμη ενδιαφέρον tip, το "Print Friendly & PDF Button", μέσω του οποίου οι αναγνώστες σας θα μπορούν να εκτυπώνουν τις αναρτήσεις σας ή να τις κατεβάζουν στον υπολογιστή τους σε μορφή pdf.

Διαδικασία:
1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Επέκταση προτύπων γραφικών στοιχείων
5. Με "Ctrl + F" αναζητούμε το "<div class='post-footer'>" (αν εμφανίζει δυο αποτελέσματα, μας ενδιαφέρει το πρώτο) και αμέσως μετά από αυτό επικολλούμε τον παρακάτω κώδικα:

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='printfriendly' expr:href='data:post.url + &quot;?pfstyle=wp&quot;' style=' color:#6D9F00; text-decoration:none;' title='Printer Friendly and PDF'>
<img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none;'/>
<span style='font-size:16px; margin:0 8px 0 3px;'>Print</span>
<img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-pdf-icon.gif' style='border:none;'/>
<span style='font-size:16px; margin:0 8px 0 3px;'>PDF</span></a><b:else/>
<script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print(); return false;' style=' color:#6D9F00; text-decoration:none;' title='Printer Friendly and PDF'>
<img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none;'/>
<span style='font-size:16px; margin:0 8px 0 3px;'>Print</span>
<img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-pdf-icon.gif' style='border:none;'/>
<span style='font-size:16px; margin:0 8px 0 3px;'>PDF</span></a></b:if>
</b:if>

(Αν αφήσετε τον κώδικα όπως είναι, τα κουμπιά δε θα εμφανίζονται στην αρχική σελίδα αλλά μόνο στις σελίδες των αναρτήσεων. Αν θέλετε τα κουμπιά να εμφανίζονται και στην αρχική σελίδα, σβήνετε τις 2 σειρές που επισήμανα με έντονη γραφή -bold-)
6. Αποθήκευση προτύπου και είμαστε έτοιμοι!

Μπορείτε να δείτε πως θα εμφανίζονται τα κουμπιά κάτω από τον τίτλο της παρούσας ανάρτησης.

Αν δε σας αρέσουν τα κουμπιά όπως είναι τώρα, μπορείτε να προσθέσετε κουμπιά που επιτελούν την ίδια λειτουργία αλλά διαφέρουν εμφανισιακά.
Παρακάτω θα σας δώσω 3 κουμπιά και διαλέγετε όποιο θέλετε. Κάθε κουμπί συνοδεύεται από τον κώδικά του και για να το προσθέσετε απλά βάζετε τον κώδικά του αντί του κώδικα που σας έδωσα στο βήμα 5!


Κώδικας:

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType == "index"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></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-big.gif" alt="Print Friendly and PDF"/></a></b:if>
</b:if>

Κώδικας:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == "index"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></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/button-print-grnw20.png" alt="Print Friendly and PDF"/></a></b:if>
</b:if>

Κώδικας:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == "index"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></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_sq_grn_l.png" alt="Print Friendly and PDF"/></a></b:if>
</b:if>

Πηγή: Οι κωδικοί είναι από το: http://www.printfriendly.com/button

Related Articles :