Print Friendly & PDF ( Tutorial for Website, WordPress & Blogger/Blogspot ).

Ένα ωραίο gadget για να προσθέσετε στην ιστοσελίδα ή στο blog σας, είναι το print button.

Ένα κουμπί δηλαδή, που πατώντας το, κάποιος επισκέπτης, θα μπορεί να εκτυπώσει όλο το περιεχόμενο της σελίδας που βρίσκεται.

Ας πάμε να δούμε το τρόπο προσαρμογής...για ιστοσελίδες, για blog του WordPress αλλά & για τον Blogger.



for Webpage:

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

1o Σχέδιο:

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button.gif" alt="Print"/></a>

2o Σχέδιο:

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print"/></a>

3o Σχέδιο:

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print"/></a>

4o Σχέδιο:

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://cdn.printfriendly.com/pf-icon-small.gif" alt="Print"/></a>

5o Σχέδιο:

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://cdn.printfriendly.com/pf-icon.gif" alt="Print"/></a>

6o Σχέδιο:

<script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" class="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://cdn.printfriendly.com/pf-print-icon.gif" alt="Print"/></a>

7o Σχέδιο:

<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>

8o Σχέδιο:

<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_gry_l.png" alt="Print Friendly and PDF"/></a>

9o Σχέδιο:

<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_m.png" alt="Print Friendly and PDF"/></a>

10o Σχέδιο:

<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_gry_m.png" alt="Print Friendly and PDF"/></a>

Wordpress.org (hosted):

Κάντε "κλικ" εδώ για να κατεβάσετε το Wordpress Plugin & να το εγκαταστήσετε στη σελίδα σας.

Wordpress.com:

Θα πάτε στον Πίνακα ελέγχου σας και θα βρείτε την καρτέλα "Settings", κατόπιν στην θα κάνετε "κλικ" στη καρτέλα "Sharing".



Το επόμενο βήμα είναι να πατήσετε το "Add a New Service"



Αμέσως μετά στο popup παράθυρο που θα σας ανοίξει, πατήστε Enter.
Στο Service name: προσθέστε το όνομα Print & PDF ( ή ότι άλλο θέλετε εσείς ).

Στο Sharing URL: τον σύνδεσμο αυτόν http://www.printfriendly.com/print?url=%post_full_url%

Στο Icon URL: τον σύνδεσμο από όποιο εικονίδιο της εφαρμογής π.χ. το http://cdn.printfriendly.com/icon-print-friendly-16x16.png

Δείτε το πως θα εμφανίζεται ( θα τα βρείτε μέσα στους κώδικες )

Πατήστε "Create Share"



Το 3ο & τελευταίο βήμα είναι, να ενεργοποιήσετε τις υπηρεσίες του.

Θα κλικάρετε πάνω στο κουμπί που σας εμφανίζεται στο πάνω μέρος της σελίδας ( βλέπε εικόνα ) και με drag '&' drop ( δηλαδή με πατημένο το αριστερό "κλικ" θα σύρετε το κουμπί στο αμέσως επόμενο στάδιο που είναι το "Enabled Services".



Μόλις το κάνετε κι αυτό θα πατήσετε "Save Changes" κι είσαστε ΟΚ!

Επιστρεψτε στη σελίδα σας & κάντε ανανέωση.



for Blogger/Blogspot:

Σημείωση:
Σαν παράδειγμα στον παρακάτω κώδικα σας έχω χρωματίσει τα 2 σημεία που είναι ο σύνδεσμος του εικονιδίου εμφάνισης. Τα δυο σημεία αυτά όπως θα δείτε υπάρχουν σε κάθε κώδικα.

Το εικονίδιο αυτό ( με την άδεια της σελίδας Print Friendly & PDF ), μπορείτε να το αλλάξετε φτιάχνοντας ένα δικό σας.

For Websites:



For WordPress:



For Blogspot and Blogger:

1o Σχέδιο:

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='printfriendly' onclick='window.print(); return false;' title='Print an optimized version of this blog post'><img alt='Print' src='http://cdn.printfriendly.com/pf-button.gif' style='border:none;'/></a></div><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' title='Print an optimized version of this blog post'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-button.gif' style='border:none; padding:0;'/></a></div></b:if><!-- END PrintFriendly Code -->

2o Σχέδιο:

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='printfriendly' onclick='window.print(); return false;' title='Print an optimized version of this blog post'><img alt='Print' src='http://cdn.printfriendly.com/pf-button-big.gif' style='border:none;'/></a></div><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' title='Print an optimized version of this blog post'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-button-big.gif' style='border:none; padding:0;'/></a></div></b:if><!-- END PrintFriendly Code -->

3o Σχέδιο:

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='printfriendly' onclick='window.print(); return false;' title='Print an optimized version of this blog post or generate a PDF'><img alt='Print' src='http://cdn.printfriendly.com/pf-button-both.gif' style='border:none;'/></a></div><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' title='Print an optimized version of this blog post or generate a PDF'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-button-both.gif' style='border:none; padding:0;'/></a></div></b:if><!-- END PrintFriendly Code -->

4o Σχέδιο:

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='pfLink' onclick='window.print(); return false;' style='text-decoration: none;' title='Print an optimized version of this web page'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-icon-small.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: rgb(85, 117, 12);'>Print Friendly</span></a></div><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' style='text-decoration: none;' title='Print an optimized version of this blog post'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-icon-small.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: rgb(85, 117, 12);'>Print Friendly</span></a></div></b:if><!-- END PrintFriendly Code -->

5o Σχέδιο:

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='pfLink' onclick='window.print(); return false;' style='text-decoration: none;' title='Print an optimized version of this web page'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-icon-small.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: rgb(85, 117, 12);'>Print Friendly</span></a></div><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' style='text-decoration: none;' title='Print an optimized version of this blog post'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-icon-small.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: rgb(85, 117, 12);'>Print Friendly</span></a></div></b:if><!-- END PrintFriendly Code -->

6o Σχέδιο:

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div class='pfButton'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' class='pfLink' onclick='window.print(); return false;' style='text-decoration: none;' title='Print an optimized version of this web page or generate PDF'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color:#55750c;'>Print <img class='printfriendly' src='http://cdn.printfriendly.com/pf-pdf-icon.gif' alt='Get a PDF version of this webpage' style='border:none; padding: 0;' /> PDF</span></a></div><b:else/><div class='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' style='text-decoration: none;' title='Print an optimized version of this blog post or generate PDF'><img alt='Print' class='printfriendly' src='http://cdn.printfriendly.com/pf-print-icon.gif' style='border:none; padding:0;'/><span style='font-size: 12px; color: #55750c;'>Print <img class='printfriendly' src='http://cdn.printfriendly.com/pf-pdf-icon.gif' alt='Get a PDF version of this webpage' style='border:none; padding: 0;' /> PDF</span></a></div></b:if><!-- END PrintFriendly Code -->

7o Σχέδιο:

<b:if cond='data:blog.pageType == "item"'><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:else/><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:if>

8o Σχέδιο:

<b:if cond='data:blog.pageType == "item"'><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_gry_l.png" alt="Print Friendly and PDF"/></a><b:else/><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_gry_l.png" alt="Print Friendly and PDF"/></a></b:if>

9o Σχέδιο:

<b:if cond='data:blog.pageType == "item"'><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_m.png" alt="Print Friendly and PDF"/></a><b:else/><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_m.png" alt="Print Friendly and PDF"/></a></b:if>

10o Σχέδιο:

<b:if cond='data:blog.pageType == "item"'><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_gry_m.png" alt="Print Friendly and PDF"/></a><b:else/><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_gry_m.png" alt="Print Friendly and PDF"/></a></b:if>

Για να το περάσετε θα κάνετε σύνδεση στο λογαριασμό σας στον blogger & θα πάτε στην Σχεδίαση --> Επεξεργασία HTML εκεί θα τσεκάρετε το πεδίο που λέει "Επέκταση προτύπων γραφικών στοιχείων"

Και θα κάνετε αναζήτηση με Ctrl + F για τα....

<div class='post-footer'>

ή για το....

<div class='post-header-line-1'/>

ή για το....

<p class='post-footer-line post-footer-line-1'>

αν δε βρείτε ούτε αυτό κοιτάξτε για το...

<data:post.body/>

που υπάρχει σίγουρα σε όλα τα templates.

Μόλις το βρείτε θα κάνετε αντιγραφή/επικόλληση έναν από τους παραπάνω κώδικες στην επόμενη γραμμή.

Το αποτέλεσμα στη περίπτωση μας είναι έτσι...

Σημείωση:

Οι παρακάτω εικόνες σας δείχνουν τον τρόπο για το <div class='post-footer'>

Τέλος θα πατήσετε ΠΡΟΕΠΙΣΚΟΠΗΣΗ κι αφού δε σας βγάλει κάποιο σφάλμα, θα κάνετε ΑΠΟΘΗΚΕΥΣΗ το πρότυπό σας!

Κάνετε ανανέωση της σελίδα σας κι είστε ΟΚ!!!

Καλή Επιτυχία!!!!!