Visualizzazione post con etichetta Modificare il template di Blogger. Mostra tutti i post
Visualizzazione post con etichetta Modificare il template di Blogger. Mostra tutti i post

Recuperare lo spazio vuoto dopo aver rimosso la barra di navigazione di Blogger


rimuovere spazio vuoto dal template

Ecco un altro articolo per rispondere a una richiesta (non trovo più da parte di chi, mi dispiace), questa volta talmente lecita che mi stupisce non averci pensato prima io stesso: una volta rimossa la barra di navigazione di Blogger, come recuperare lo spazio vuoto? L’operazione è semplicissima e si tratta solo di inserire una piccola porzione di codice CSS. Per capire dove inserirlo vi rimando a questo articolo di qualche tempo fa, e vi ricordo che un backup del template non guasta mai.

Centrare il titolo dei post su Blogger

Ecco una modifica molto semplice per Blogger che, se fatta su un design adatto, crea un effetto davvero notevole: centrare i titoli dei post su Blogger. Per farvi un’idea, basta dare un’occhiata al bellissimo blog di Sarah:

image

Eliminare la barra di Blogger dai nuovi template

image

Per la serie “ritorno alle origini”, ecco come eliminare la barra di navigazione di Blogger dai nuovi template . Operazione che molti hanno già fatto ma, rispetto alla mia prima spiegazione, con il nuovo designer di modelli diventa molto più semplice (come tante altre modifiche che andrebbero riviste).

Adesso non dovrete cercare righe di codice e modificare l’HTML del layout, basterà un semplice copia e incolla.

Rimuovere i bordi alle immagini nei template su Blogger

Dopo l’articolo sui pulsanti per condividere su Facebook, Twitter o Google Buzz usando immagini personalizzate, si è presentato il solito problema (sollevato questa volta da Enrico) di dover togliere i bordi alle immagini (in questo, alle icone dei social network). Piuttosto che la solita risposta mirata al problema, ho deciso di scrivere questo post per invitarvi a ricorrere a una soluzione radicale: eliminare i bordi da tutte le immagini del template, per sempre.

D’altra parte è un’operazione che molti blogger fanno subito appena cambiato template perchè nella maggior parte dei casi si rivela antiestetico, e farlo in maniera specifica per ogni nuova modifica è una cosa che complica il lavoro a tutti.

Attivare i pulsanti per la condivisione dei post su Blogger anche su template personalizzati

Come sempre le novità introdotte da Blogger non sono disponibili su template personalizzati scaricati dalla rete. Sebbene sia per certi versi comprensibile (in fondo ogni template potrebbe avere una struttura diversa da quella di tutti gli altri), è anche vero che sembra che il problema non venga neanche preso in considerazione. Ma si sa che se la montagna non va da Maometto

Con questo articolo spiego come far comparire i nuovi pulsanti per la condivisione dei post su Facebook, Twitter e Buzz anche su template non predefiniti, fermo restando che rimane validissima la soluzione proposta da me per una scelta più ampia di social network.

Gadget senza titoli su Blogger, metodo alternativo

In attesa che Blogger risolva questo fastidioso inconveniente di non poter lasciare vuoti i titoli degli elementi, Piello mi ha fatto notare che la soluzione proposta da me non va bene in alcuni casi, ed esattamente quando i widget sono già incorporati in alcuni template non predefiniti.

Non ho avuto modo di verificare il problema, ma propongo lo stesso la soluzione adottata da lui: saperne una di più non fa mai male!

Ricorrete a questo sistema solo se l’altro non va bene: è più macchinoso e si rischia di far danno.

Come nascondere le colonne del blog quando si visualizza una pagina statica su Blogger

Così come è possibile capire stabilire regole per la visualizzazione di alcuni elementi solo nella pagina del singolo post (penso per esempio alla visualizzazione degli annunci AdSense), allo stesso modo si possono fare delle distinzioni sugli elementi visibili se viene visualizzata una pagina statica di Blogger.

Questo tipo di pagine si presta molto bene per inserire elementi di servizio (come una pagina con le informazioni personali) ma anche per scopi di diverso tipo in cui può essere utile avere quanto più spazio possibile a disposizione, anche a costo di sacrificare altri elementi del blog come le colonne laterali (o magari proprio per escluderle per dare risalto al contenuto della pagina).

E’ il contenuto di questo articolo, che sarà un utile rimando in futuro per altri articoli in lavorazione.

Post espandibili su blogger: cambiare la posizione del link “Leggi tutto…” o sostituirlo con un’immagine

Fin da quando è stato introdotta su Blogger la possibilità di utilizzare i post espandibili mi è stato chiesto come fosse possibile cambiare l’allineamento del link “Leggi tutto…” (o equivalente, visto che è personalizzabile) o sostituirlo con delle immagini.

In effetti la richiesta è lecita e spesso mi chiedo perchè Blogger continui a centellinare le novità e quando ne propone una lo fa ai minimi termini: il template di Blogger, più di quello di altri CMS, si presta benissimo ad offrire all’utente la possibilità di personalizzare facilmente il proprio layout. Comunque, dove non arriva Blogger facciamo con le nostre mani, ma se avete paura di sbagliare ricordatevi di fare un backup del template prima di modificarlo.

E’ anche un occasione per capire come sfruttare la possibilità di aggiungere CSS personalizzato con il nuovo designer di modelli.

Come inserire le faccine animate nei post su Blogger

Da quando ho pubblicato il post su come inserire le emoticon nei commenti su Blogger, subito molti lettori mi hanno chiesto se fosse possibile farle apparire anche nei post. Cercando in rete per trovare ispirazione ho visto tante proposte ma che per un motivo o per un altro non andavano bene per tutti: alcuni richiedevano di usare Firefox + GreaseMonkey per scrivere i post che avrebbe escluso chi usa un altro browser o Windows Live Writer, alcuni propongono plugin per Windows Live Writer che avrebbe escluso chi non lo usa o non usa proprio Windows (dedico alla fine un paragrafo a quest’ultimo punto), e così via.

Alla fine ho deciso di riadattare lo script già scritto per i commenti e utilizzare sia lo stesso principio (le faccine saranno visibili alla pubblicazione del post) che le stesse faccine. Non ho modificato lo script già esistente per permettere la scelta di utilizzare uno o l’altro, o entrambi, a seconda delle esigenze.

image

Ho semplificato il tutto e l’operazione richiederà solo l’inserimento di una riga di codice nel template.

Template Scribe per Blogger a 3 colonne

Il template Scribe per Blogger è uno dei pochi che integra perfettamente la grafica con la struttura finale del blog. A me piace molto la sua grafica essenziale ma , tant’è che è stato uno dei primi che ho usato.

Dopo aver scritto di come aggiungere la terza colonna per i template Minima e Thisaway Rose, ecco la procedura da seguire per lo Scribe. Come per il Thisaway, metterò le colonne una a destra e una sinistra, perché credo che questa sia la struttura migliore per questo template. E come per il Thisaway, anche il template Scribe richiede di ritoccare le poche immagini utilizzate nel template (ma tranquilli non dovrete farlo voi).

Per la prima volta metterò disposizione a fine articolo anche il template già pronto da scaricare: non dovreste correre il rischio di perdere elementi precedenti, ma potreste perdere altro codice HTML modificato.

image

Togliere o personalizzare il bordo dalle immagini nei post su Blogger

imageScrivo questo post per rispondere ai tantissimi che mi chiedono come eliminare il bordo alle immagini nei post. Premesso che consiglio sempre di utilizzare Windows Live Writer per scrivere sul blog, che tra i tanti problemi che risolve c’è anche questo, il bordo applicato alle immagini deriva sempre da impostazioni predefinite dei vari template che non possono essere personalizzate se non mettendo mano al suo codice HTML.

Questione di pochi secondi comunque, e già che ci siamo vediamo anche come personalizzarlo invece di toglierlo.

Cambiare le dimensioni dell’area dei commenti su Blogger

Ecco una modifica molto semplice ma che probabilmente potrebbe interessare i più attenti al look del proprio blog e che usano la finestra dei commenti incorporata sotto al post: la possibilità di cambiare le dimensioni dell’apposita area per i commenti per adattarla meglio allo stile grafico del template.

Per intenderci, faccio un esempio pratico.  Questo è il prima:

image

Con la nuova visualizzazione degli avatar dei profili, succede che i commenti, come nel mio caso, possano essere spostati un po’ a destra, mentre l’area sotto per inserire il commento è tutta a sinistra, senza contare la legenda degli emoticon che sta in mezzo.

Ecco il dopo:

image

L’area del commento occupa lo stesso spazio degli altri elementi del template, dando un senso maggiore di ordine.

Vediamo come fare.

Gli avatar dei profili nei commenti su Blogger!

E’ stata introdotta qualche giorno fa la possibilità su Blogger di visualizzare l’avatar dei profili nei vari commenti a fine post. Questa novità si rivela utilissima per riconoscere subito l’autore di un commento ma soprattutto dà una maggior sensazione di partecipazione “umana”, senza contare il notevole effetto grafico:

image

In certi casi, può essere un’alternativa migliore alla personalizzazione dei commenti dell’autore del blog, che ho tante volte rimandato di fare da quando ho cambiato template. Se in passato avete perso tempo a cercare la mia risposta tra i commenti, adesso basterà individuare l’avatar che uso da sempre, cioè l’occhio:

image

Vediamo come si applica ai template predefiniti e a quelli personalizzati.

Eliminare o cambiare il bordo dell’header del template su Blogger

Anche se difficilmente riesco a trovare il tempo di commentare, in realtà mi capita spesso di girare tra i vostri blog e di leggere gli ultimi post inseriti, a volte anche per vedere come crescono quei blog che ho “visto nascere”. Oggi, mentre leggevo gli ultimi articoli di Cafè creativo, ho notato il bordo nell’header (l’unico rimasto in tutto il blog, ma vista la bravura di Anna nel personalizzarlo è sicuramente un effetto voluto) e mi è venuta in mente una richiesta fatta tempo fa da Laura (che nel frattempo ha risolto da sè) e che ultimamente mi è stata riproposta da altri lettori: eliminare i bordi dall’header del template.

Anche se i passi che seguirò fanno riferimento al template Minima, probabilmente andranno bene per la maggior parte dei vostri template.

Post espandibili finalmente nativi su Blogger

Qualche giorno fa è stata annunciata la possibilità di utilizzare nativamente anche su Blogger i post espandibili: nella pagina principale del blog viene visualizzata solo una porzione dell’articolo mentre il link “Leggi tutto…” ci farà leggere il resto. Niente di nuovo per chi utilizza già questa funzionalità dopo aver modificato manualmente il template come suggerisco in questo post, o utilizzando magari la versione automatica.

Dalle mie prove risulta però che in effetti qualche vantaggio ulteriore questa novità lo porta: la parte non visibile degli articoli non viene caricata (allo stesso modo di come fanno Wordpress o altri CMS), rendendo decisamente più snello il caricamento della pagina principale del blog.

Vediamo come si attiva nei template predefiniti di Blogger e in quelli personalizzati realizzati dai vari autori.

Attenzione: alcuni di voi che hanno provato questa modifica hanno avuto problemi al template. Anche se propongo una soluzione, vi raccomando di fare il backup del template di Blogger prima di modificarlo e magari di farlo prima in un blog di prova.

Link per stampare il post su Blogger, script aggiornato

Grazie alla segnalazione di Andrea, è stato possibile migliorare l’ottimo script proposto da Iole per aggiungere un link nel blog per stampare il post. Mentre con la versione precedente era necessario cliccare su un punto qualsiasi della finestra per stampare l’articolo, adesso nella finestra che si apre con la versione stampabile del post apparirà un link “Stampa il post”, che è sicuramente più intuitivo:

image

Per chi non avesse ancora fatto questa modifica, rimando all’articolo originale, di cui ho modificato il passo 4. Per chi l’ha già fatta e vuole migliorarla, basta seguire queste istruzioni.

Sostituire il codice del passo 4

Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga di codice:

</head>

Sopra vi trovate il codice che ho indicato di inserire nel passo 4:

  <script> 
function stampaPostCompleto(divId,link) {
var postContent = document.getElementById(divId).innerHTML;
stampa(link+postContent);
}
function stampa(html) {
var printWindow = window.open("","printPost","top=100,left=200,width=600, height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no");
printWindow.document.open();
printWindow.document.write('&lt;div onclick="javascript:window.print();"&gt;&lt;img src="http://tinyurl.com/lfk9jd"/&gt;&lt;div&gt;' + html);
printWindow.document.close();
}
</script>


Eliminatelo e al suo posto mettete questo:



  &lt;script&gt; 
function stampaPostCompleto(divId,link) {
var postContent = document.getElementById(divId).innerHTML;
stampa(link+postContent);
}

function stampa(html) {
var printWindow = window.open(&quot;&quot;,&quot;printPost&quot;,&quot;top=100,left=200,width=600, height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no&quot;);
printWindow.document.open();
printWindow.document.write(&#39;&lt;a href=&quot;#&quot; onclick=&quot;window.print();&quot;&gt;&lt;img src=&quot;http://tinyurl.com/lfk9jd&quot; alt=&quot;&quot; border=&quot;0&quot; /&gt;&lt;/a&gt; &lt;a href=&quot;#&quot; onclick=&quot;window.print();&quot;&gt;Stampa il post&lt;/a&gt; &lt;br /&gt; &lt;br /&gt;&#39; + html);
printWindow.document.close();
}
&lt;/script&gt;


Salvate il template e avete finito.



E adesso a voi!



Invito a seguire l’esempio di Andrea: se avete idee su come migliorare il materiale proposto in questo blog, fatemelo sapere! Anch’io ho i miei limiti (come chiunque) e tranquilli che leggerò avidamente ogni vostro suggerimento.


Risolvere il problema delle faccine animate nei commenti che vanno in verticale

Nell’inserire le emoticon nei commenti molti hanno avuto il fastidioso problema di vedere la legenda comparire così:

image

Vediamo come risolverlo.

La causa del problema

Questo terribile effetto è dovuto alle impostazioni CSS del template di Blogger usato: sostanzialmente viene indicato di lasciare uno spazio prima e dopo ogni immagine. Mi sono fatto mandare il template di Alexs (dal cui blog ho anche catturato l’immagine) per fare le prove, e come si vede in quest’immagine anche le faccine che compaiono nei commenti hanno lo stesso problema:

image

Ma la cosa si nota anche in altre parti del blog, come mi ha fatto notare Alexs.

Ci sono tante soluzioni al problema, io ne propongo una radicale che avrà effetto su tutto il template (anche perchè presto parlerò di come utilizzare le stesse faccine nei post e non solo nei commenti, e il problema si ripresenterebbe). Proprio per questo motivo però potrebbero esserci effetti collaterali indesiderati, che comunque vedremo di capire assieme.

Modifichiamo il template di Blogger

Andiamo Layout->Modifica HTML, selezioniamo “Espandi i modelli widget” e cerchiamo questa riga di codice:

display: block;

Questa è la riga incriminata, però dobbiamo essere sicuri di beccare quella giusta. Se non l’avete ancora fatto, correte subito a fare il backup del template di Blogger, perchè potrebbe rendersi necessario andare per tentativi.

La riga infatti potrebbe essere presente più volte, ma a noi interessa che quella contenuta nel blocco img, che nel caso del template di Alexs si presenta così:

img {
border: 0;
display: block;
}

Bene, eliminate la parte in rosso e salvate il template, e il gioco è fatto.

Se non trovate un blocco di codice simile a quello da modificare, potete andare per tentativi togliendo una ricorrenza alla volta della riga incriminata e vedere cosa succede nel template. A mio avviso, comunque, dovrebbe essere possibile eliminarle tutte senza avere effetti collaterali nel layout del blog (e se li avete, adesso sapete che potete inveire contro l’autore del template).

Thisaway Rose a 3 colonne

imageL’articolo su come aggiungere la terza colonna al proprio template è sempre stato tra i più apprezzati e letti, e molti si sono lanciati con successo in questa modifica. Purtroppo però ogni template ha una storia a sè, e persino quelli predefiniti di Blogger non sfuggono a questa regola negativa. Alcuni tra l’altro hanno anche elementi grafici che “allargando” il layout non sono più adatti, rendendo quindi impossibile la modifica.

Appartengono a quest’ultima categoria i template Thisaway, in particolare molti mi hanno sempre scritto di avere difficoltà col Thisaway Rose (evidentemente più usato degli altri). Annalisa è stata l’ultima a chiedermelo, e le avevo promesso un articolo apposta per rispondere a tutti.

Ed eccomi, con un po’ di ritardo come sempre, a mantenere la promessa.

Rendiamo il Thisaway Rose a 3 colonne

Ovviamente raccomando come sempre di fare prima il backup del template di Blogger, e magari di fare prima le modifiche in un blog di prova. Quello che andremo a fare non intaccherà le modifiche già esistenti che avrete fatto nel template, ma può sempre capitare di sbagliare un copia e incolla.

Passo 1

Andiamo in Layout->Modifica HTML e selezioniamo “Espandi i modelli widget”. Cerchiamo questa porzione di codice:

min-width: 760px;


e cambiamolo in:



min-width: 987px;


Passo 2



Cerchiamo questo codice:



#outer-wrapper {
margin: 0 auto;
width: 760px;


e cambiamo anche qui 760 in 987:



#outer-wrapper {
margin: 0 auto;
width: 987px;


Passo 3



Cerchiamo:



#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif)


e cambiamo così:



#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://lh3.ggpht.com/_kGm61wbohAY/Sm4Gmkx2zgI/AAAAAAAAEDc/8sf_F-ijIZE/bg_main_wrapper_2.gif)


Passo 4



#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;


diventa:



#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;


Passo 5



#sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 179px 0;


diventa:



#sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 159px 0;


Passo 6



Cerchiamo:



#sidebar .widget {
margin-bottom: 20px;
}


E subito sotto incolliamo queste righe:



#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x left top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}


Passo 7



Cerchiamo:



#header-wrapper { 
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_header_bottom.gif) no-repeat $startSide bottom;
}


e modifichiamolo così:



#header-wrapper { 
padding-bottom: 15px;
background: url(http://lh4.ggpht.com/_kGm61wbohAY/Sm4GmrPTpBI/AAAAAAAAEDY/GGMA_jmUyzY/bg_header_bottom_2.gif) no-repeat $startSide bottom;
}


Passo 8



#footer-wrapper { 
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_footer_top.gif) no-repeat $startSide top;
clear: both;
}


diventa:



#footer-wrapper { 
padding-top: 15px;
background: url(http://lh3.ggpht.com/_kGm61wbohAY/Sm4Gmw3VppI/AAAAAAAAEDg/oKBG-gKgw_8/bg_footer_top_2.gif) no-repeat $startSide top;
clear: both;
}


Passo 9



Cerchiamo queste righe di codice:



body#layout #main,
body#layout #sidebar {


E aggiungiamo la parte in rosso (attenzione alla virgola):



body#layout #main,
body#layout #sidebar,
body#layout #newsidebar
{


Passo 10 (l’ultimo!)



Cercate questa riga:



<div id='main-wrapper'>


Subito sopra incollate:



  <div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>



Finito!



A questo punto potete salvare il template e potrete visualizzare il vostro nuovo blog a 3 colonne:



image



Per scrivere quest’articolo ho preso spunto da questo post di Tips for New Bloggers: purtroppo il codice di esempio fornito poteva dare qualche problema e ho riscritto qui le istruzioni da seguire, tuttavia ho riutilizzato gli stessi elementi grafici.



Per qualsiasi problema, lasciatemi un commento e vedremo di risolverlo.


Cambiare il colore di selezione del testo in una pagina web usando lo standard CSS 3

Molto richiesta nel sondaggio la possibilità di cambiare il colore di selezione del testo nel blog, per dare un tocco personale in più al nostro spazio personale. L’operazione è semplicissima, ma comincio subito dai lati negativi: nonostante il codice per farlo è previsto nello standard CSS 3, Internet Explorer non lo supporta (tanto per cambiare), quindi questa modifica sarà apprezzata solamente dagli utenti che usano un browser diverso.

Tuttavia essendo uno standard, è possibile che nelle prossime versioni del browser di Microsoft venga supportata anche questa feature.

Il codice CSS per cambiare il colore della selezione

In un foglio di stile, per cambiare il colore di selezione del testo basta inserire queste righe:

::selection {
    background: #7AFFAF;
    }
::-moz-selection {
    background: #7AFFAF;
}

Sostituendo il codice evidenziato in rosso col valore esadecimale del colore che vogliamo utilizzare, utilizzando la codifica RGB dei colori.

L’istruzione è duplicata perchè la prima (::selection) viene supportata dai browser che utilizzano Webkit (Safari e Chrome, per fare un esempio), mentre la seconda (::-moz-selection) da Firefox.

Cambiamo il colore su Blogger

Nel caso di Blogger, andiamo in Layout->Modifica HTML e incolliamo il codice subito sopra questa riga:

]]></b:skin>

Ecco l’effetto che otterremo:

image

In questo caso il colore di selezione del testo è diventato verde chiaro. Rimangono comunque delle tracce di azzurro a causa della struttura predefinita dei template di Blogger. Volendo eliminare quest’effetto, si può cercare nel codice del template questa riga (dopo aver selezioniato “Espandi i modelli widget”):

<div style='clear: both;'/> <!-- clear for photos floats –>

e sostituirla con questa:

<!--div style='clear: both;'/--> <!-- clear for photos floats –>

che praticamente la rende inattiva, ottenendo questo risultato:

image

Quest’ultimo codice che abbiamo modificato serve per evitare che il testo del post si sovrapponga alle immagini in particolari condizioni, quindi se doveste avere effetti collaterali, ripristinate la riga com’era originariamente e fate pace con quel poco di azzurro che purtroppo è rimasto.

La modifica che ho proposto ha effetto su tutto il template del blog, quindi tutte le sue parti evidenziate avranno il nuovo colore:

image

Un modo in più per personalizzare il proprio blog.

Aggiungere un link per stampare il post su Blogger!

image Molto richiesta nel sondaggio, e in generale molto richiesta via mail, è sempre stata la possibilità di poter aggiungere un link per stampare direttamente il post dal blog. Modifica molto desiderata soprattutto dagli autori dei blog di cucina, tra i quali, ho scoperto recentemente, c’è un vero e proprio scambio continuo di guide culinarie in pdf (e in questo potrebbero tornare utili le guide su come creare documenti in pdf e alcuni servizi gratuiti per pubblicarli in rete).

Ho studiato vari modi in passato per farlo, molti su Blogger utilizzano PDF Online che permette un’integrazione gratuita (ma limitata), tuttavia nel blog di Iole ho trovato una soluzione molto elegante e che non richiede l’uso di strumenti esterni.

Riporto qui l’intervento, con qualche piccola personalizzazione.

Passo 1

Da Layout->Modifica HTML, selezioniate “Espandi i modelli widget” e cerchiate la seguente porzione di codice:

<div class='post hentry'>

Questa riga è presente nel template Minima (il più diffuso e base di partenza per la maggior dei template personalizzati), ma in altri template potrebbe essere leggermente diversa. Se non si riesce a trovare esattamente la riga, basta cercare solo la parte iniziale:

<div class='post hentry

Una volta individuata, bisogna inserire prima dell’ultimo carattere “>” questa porzione di codice:

expr:id='"hentry-" + data:post.id'

Nell’esempio del template Minima, la riga diventerà quindi:

<div class='post hentry' expr:id='"hentry-" + data:post.id'>

Quella in rosso è la parte da aggiungere.

Passo 2

Cercate questa porzione di codice:

<div class='post-footer'>

E subito sopra incollate questa porzione di codice:

<a class='printer' expr:onclick='"javascript:stampaPostCompleto(\"hentry-" + data:post.id + "\", \"Link: " + data:post.url + "\");"'>Stampa il post</a>

Se volete che il link per la stampa appaia solamente nella pagina del singolo post (utile per esempio se utilizzate la visualizzazione sintetica dei post) utilizzate invece questo codice (rispetto al primo ho aggiunto le due righe in rosso):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='printer' expr:onclick='"javascript:stampaPostCompleto(\"hentry-" + data:post.id + "\", \"Link: " + data:post.url + "\");"'>Stampa il post</a>
</b:if>

Passo 3

Cercate questa riga nel template:

]]></b:skin>

E subito sopra incollate:

a.printer {
cursor: pointer;
background: url(http://tinyurl.com/lfk9jd) no-repeat;
padding-left: 20px;
margin-right: 10px;
}

Passo 4 (aggiornato)

Cercate questa riga di codice:

</head>

E subito sopra inserite questo codice:

&lt;script&gt; 
function stampaPostCompleto(divId,link) {
var postContent = document.getElementById(divId).innerHTML;
stampa(link+postContent);
}
function stampa(html) {
var printWindow = window.open(&quot;&quot;,&quot;printPost&quot;,&quot;top=100,left=200,width=600, height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no&quot;);
printWindow.document.open();
printWindow.document.write(&#039;&lt;a href=&quot;#&quot; onclick=&quot;window.print();&quot;&gt;&lt;img src=&quot;http://tinyurl.com/lfk9jd&quot; alt=&quot;&quot; border=&quot;0&quot; /&gt;&lt;/a&gt; &lt;a href=&quot;#&quot; onclick=&quot;window.print();&quot;&gt;Stampa il post&lt;/a&gt; &lt;br /&gt; &lt;br /&gt;&#039; + html);
printWindow.document.close();
}
&lt;/script&gt;


Passo 5



Salvate il template e visualizzate il blog. Sotto ogni post adesso vi apparirà il link per stamparlo:



image



Cliccandolo, si aprirà una pagina con la versione stampabile del post:



image



E basterà cliccarci sopra per far partire la finestra della stampante:



image



Questo comportamento può essere modificato, ad esempio aprendo direttamente la finestra della stampante senza passare dall’anteprima. Possiamo discuterne assieme.



Passo 6



Lasciate un ringraziamento nel blog di Iole, visto che ne è lei l’autrice!



Ho testato la modifica su Chrome, Firefox 3.4 e Internet Explorer 8, senza problemi. Vorrei sapere da voi se trovereste utile trovare anche qui la possibilità di stampare il post, così magari l’aggiungo anch’io.