Visualizzazioni totali

giovedì 17 marzo 2011

Inserire la possibilità di stampare un post in un Blog

Per poter stampare un post di un Blog senza dover stanpare la pagina intera e quindi cose inutili, possiamo procedere in questo modo:

Per prima cosa  dobbiamo andare nella pagina di modifica del layout del blog
Da qui andiamo nella scheda "Modifica HTML"
La prima cosa da fare a questo punto e procedere al Backup del modello che salveremo sul nostro disco fisso
Fatto questo possiamo procedere in due modi. Modificare il codice direttamente dalla pagina dove ci troviamo oppure modificarlo tramite un editor.

Io ho scelto la seconda soluzione per praticità.

Quindi avviate il vostro editor e caricate il file che avete salvato precedentemente, avendo cura di salvarne una copia con nome diverso.


Ora trovate la riga di codice "</head>"
 Immediatamente sopra questa riga incollate questo testo
========================
<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
========================




Ora dobbiamo inserire il codice per creare il link per stampare.
Normalmente viene messo alla fine del post, ma io ho scelto di metterne uno all'inizio e uno alla fine.
Per il link all'inizio del post procedete così:


Cercate la riga "<div class='post-header'>"



  Immediatamente sopra questa riga incollate questo testo
========================
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(
http://public.blu.livefilestore.com/y1pKK58gimiZwNfoRRQ3Hw-jxaH71KFMPobHgWBrs-oL3CVKfIhFL-_AueREYXQhbSyfmAGg3VQYCbHAazM_IRWbA/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Stampa il post</a></span>
</b:if>
========================
 
 

Per il link alla fine del post procedete così:


Cercate la riga "</span> <span class='post-comment-link'>"


Immediatamente sopra questa riga incollate questo testo che è uguale a quello che avete usato prima
========================
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='background: url(
http://public.blu.livefilestore.com/y1pKK58gimiZwNfoRRQ3Hw-jxaH71KFMPobHgWBrs-oL3CVKfIhFL-_AueREYXQhbSyfmAGg3VQYCbHAazM_IRWbA/print.gif) left no-repeat; padding-left: 20px;'><a href='javascript:window.print()'>Stampa il post</a></span>
</b:if>
========================






Ora salvate il modello e ritornate alla pagina di modifica HTML del Layout del Blog
 ed eseguite il caricamento del file modificato.

Al termine procedere a salvare il modello e verificate il risultato del vostro lavoro.
Sotto il titolo del post e alla fine dopo la data di pubblicazione troverete un'icona con il link "Stampa il post"

Naturalmente questo è un esempio ed è ampiamente personalizzabile.

Nessun commento:

Posta un commento