Blogger Tips – Tricks – Gadgets – Templates – Hacks

Print Friendly & PDF Button for your blogger posts



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr

Σήμερα θα δούμε ένα ακόμη ενδιαφέρον 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 == "item"’>

<b:if cond=’data:blog.pageType == "index"’>

<a class=’printfriendly’ expr:href=’data:post.url + "?pfstyle=wp"’ 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 == "item"’>

<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 == "item"’>

<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 == "item"’>

<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

Copyrights: /




Post by Secra from Web in Greece




Βάλε το gadget που μετατρέπει το blog σου και τις αναρτήσεις του σε pdf “Save page as PDF button”



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πολλοί αναγνώστες θέλουν ,όταν βρίσκουν κάτι που τους ενδιαφέρει, να το αποθηκεύουν κάπου ώστε να μην το χάσουν και να το βλέπουν όποτε θέλουν.Μια καλή λύση θα ήταν να το αποθηκεύουν σε μορφή pdf.Με ποιον τρόπο όμως θα το αποθηκεύσουν ,αν ο ιδιοκτήτης της σελίδας που έχει το άρθρο που τους ενδιέφερει ,δεν έχει φροντίσει για αυτό?Εγώ προσωπικά έχω φροντίσει και έχω βάλει κάτω από κάθε ανάρτηση ένα κουμπί που δίνει αυτήν την δυνατότητα(κοιτάξτε το).Αν θέλετε (αλλά δεν ξέρετε προφανώς) να βάλετε κι εσείς αυτό το κουμπί στο blog σας ώστε να δώσετε τη δυνατότητα στους επισκέπτες σας να αποθηκεύουν τα άρθρα σας σε pdf ,δεν έχετε παρά να κοιτάξετε παρακάτω!

Γιατί είναι όμως τόσο χρήσιμο αυτό το gadget για τους επισκέπτες του blog μου?

1)Μπορεί κάποιος να έχει ένα laptop και κάποια στιγμή να μην είναι συνδεδεμένος στο internet.Έλα όμως που θέλει να δει επειγόντος μια ιστοσελίδα.Αν την είχε αποθηκεύσει σε pdf τότε θα μπορούσε να τη δει.

2)Καθώς ψάχνεις πληροφορίες στο web βρίσκεις μια σελίδα που έχει ότι ζητάς.Τότε μπορείς αυτήν την σελίδα να την αποθηκεύσεις σε pdf και να την βλέπεις πάντα είσαι δεν είσαι συνδεδεμένος στο internet.

3)Είναι και πολύ χρήσιμο για σένα.Καλό θα ήταν να αποθηκεύεις κι εσύ τις αναρτήσεις σου ώστε αν κάποια στιγμή συμβεί κάτι με το blog σου να μην χάσεις τις αναρτήσεις σου αλλά να της έχεις αποθηκευμένες σε pdf.

Πώς θα το βάλω στο blog μου?

Λοιπόν υπάρχουν δύο τρόποι για να το βάλετε στο blog σας.Ο ένας είναι να το βάλετε κάτω από κάθε ανάρτηση και ο άλλος είναι να το βάλετε μόνο σε μια sidebar(στήλη).Εγώ έχω εφαρμόσει και τους δύο τρόπους (έχω βάλει αυτό το κουμπί και κάτω από κάθε ανάρτηση και στην δεξιά στήλη) και αυτό προτείνω να κάνετε κι εσείς.Ουσιαστικά το ίδιο πράγμα κάνουν και τα δύο.

ΠΡΟΣΟΧΗ(ΓΙΑ ΑΥΤΟΥΣ ΠΟΥ ΧΡΗΣΙΜΟΠΟΙΟΥΝ ΤΟ “ΔΙΑΒΑΣΤΕ ΠΕΡΙΣΣΟΤΕΡΑ” ΣΤΟ BLOG ΤΟΥΣ):ΑΥΤΟ ΤΟ ΚΟΥΜΠΙ ΑΠΟΘΗΚΕΥΕΙ ΣΕ PDF ΟΤΙ ΕΧΕΙ Η ΣΕΛΙΔΑ ΤΗΝ ΣΤΙΓΜΗ ΠΟΥ ΤΟ ΠΑΤΗΣΑΤΕ.Π.Χ. ΟΤΑΝ ΕΙΣΤΕ ΣΤΗΝ ΑΡΧΙΚΗ ΣΕΛΙΔΑ ΤΟΥ BLOG ΜΟΥ ΚΑΙ ΒΛΕΠΕΤΕ ΚΑΤΩ ΑΠΟ ΚΑΘΕ ΑΝΑΡΤΗΣΗ ΑΥΤΟ ΤΟ ΚΟΥΜΠΙ’ΑΝ ΤΟ ΠΑΤΗΣΕΤΕ ΘΑ ΣΑΣ ΑΠΟΘΗΚΕΥΣΕΙ ΣΕ PDF ΟΛΗ ΤΗΝ ΑΡΧΙΚΗ ΣΕΛΙΔΑ ΚΑΙ ΟΧΙ ΤΗΝ ΣΥΓΚΕΚΡΙΜΕΝΗ ΑΝΑΡΤΗΣΗ.ΓΙΑ ΤΗΝ ΣΥΓΚΕΚΡΙΜΕΝΗ ΑΝΑΡΤΗΣΗ ΘΑ ΧΡΕΙΑΣΤΕΙ ΝΑ ΠΑΤΗΣΕΤΕ “READ MORE”(ΟΠΩΣ ΚΑΝΑΤΕ) ΚΑΙ ΝΑ ΠΑΤΗΣΕΤΕ ΤΩΡΑ ΑΥΤΟ ΤΟ ΚΟΥΜΠΙ ΚΑΙ ΤΩΡΑ ΘΑ ΣΑΣ ΑΠΟΘΗΚΕΥΣΕΙ ΤΗΝ ΑΝΑΡΤΗΣΗ ΠΟΥ ΘΕΛΑΤΕ.


[τρόπος 1]Να το βάλω κάτω από κάθε ανάρτηση:

Ακολούθησε τα παρακάτω βήματα:



1)Σύνδεση στον λογαριασμό σου από τον blogger.com

2)Διάταξη

3)Επεξεργασία html

4)Λήψη πλήρους προτύπου για κάθε ενδεχόμενο

5)Τσέκαρε το τετραγωνάκι που λέει “Επέκταση προτύπων γραφικών στοιχείων”



6)Πάτα ταυτόχρονα ctrl + F για να ανοίξει το παραθυράκι αναζήτησης

7)Ψάξε για το <data:post.body/>

8)Αφού το βρεις βάλε τον παρακάτω κώδικα μετά από το <data:post.body/>



<script type=”text/javascript”>
</script>
<script src=”http://web2pdf.freepdfconvert.com/pdfbutton.js” type=”text/javascript”>
</script>




9)Προεπισκόπηση να δεις αν δουλέυει κι αν σου αρέσει.

10)Αποθήκευση προτύπου κι είστε έτοιμοι!



[τρόπος 2]Να το βάλω μόνο στην sidebar (σε μια στήλη του blog μου)

Ακολούθησε τα παρακάτω βήματα:

1)Σύνδεση στον λογαριασμό σου από τον blogger.com

2)Διάταξη

3)Στοιχεία σελίδας

4)Προσθήκη gadget

5)HTML/Javascript

6)Βάλε σαν τίτλο το “Save page as PDF” ή ότι άλλο θες τελοσπάντων και μετά βάλε στο κενό πεδίο κάτω από τον τίτλο τον παρακάτω κώδικα:



<script type=”text/javascript”>
var
pdfbuttonlabel=”Save page as PDF”
</script>
<script src=”http://www.web2pdfconvert.com/pdfbutton.js” type=”text/javascript”>
</script>



7)Αποθήκευση κι είστε έτοιμοι!


Εαν ποτέ θελήσετε εσείς να αποθηκεύσετε εσείς μια σελίδα σε μορφή pdf απλά αντιγράψτε τη διεύθυνση (url) της σελίδας αυτής και επισκεφτείτε αυτό το site ( http://www.web2pdfconvert.com/ ) και βάλτε την εκεί.

Α και παραλίγο να ξεχάσω.Αν δεν έχετε το πρόγραμμα για να διαβάζει αρχεία pdf μπορείτε να το προμηθευτείτε δωρεάν από το http://get.adobe.com/reader/

Άφησε μου ένα σχόλιο και πες μου τις εντυπώσεις σου.