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.


Pubblicare il blog su Twitter con TwitterFeed

Twitter, grazie alla sua semplicità e immediatezza, conquista una fetta sempre maggiore della rete, tant’è che l’anno scorso Facebook ha tentato di acquistarlo senza riuscirci, e adesso ci sta provando Google. Le cifre parlano chiaro: Twitter è il network cresciuto più velocemente negli ultimi mesi. Basta dare un’occhiata a questo grafico di Alexa per rendersene conto:

graph

Proprio per il gran numero di utenti che stanno cominciando a preferirlo ad altri servizi, pubblicare i propri contenuti su Twitter può dare una spinta alla diffusione del nostro blog, offrendo al tempo stesso ai suoi lettori un modo alternativo per seguirlo.

A questo scopo, possiamo utilizzare TwitterFeed per pubblicare un messaggio ogni volta che scriviamo un nuovo articolo del nostro blog.

Come funziona TwitterFeed

image

Per utilizzare TwitterFeed dobbiamo registrarci gratuitamente al servizio creando un nuovo account (possiamo utilizzare anche il nostro OpenID). In fase di registrazione basterà inserire pochi dati personali e il feed del nostro blog per collegare TwitterFeed al nostro profilo su Twitter: tutta l’operazione si completa in pochi minuti.

Ogni volta che scriveremo un post, TwitterFeed pubblicherà un messaggio con il suo titolo e una piccola anteprima del suo contenuto, con un link che rimanda all’articolo completo:

image

Nel momento in cui scrivo, come si vede nell’immagine sopra, sono già oltre quattrocentomila i feed serviti da TwitterFeed, e questo rende l’idea della diffusione di questo fenomeno.

Per chi volesse seguirmi su Twitter, questo è l’account di Creare blog. Faccio notare la tempestività di MrNessuno, che ha cominciato a seguirmi su Twitter praticamente pochi minuti dopo aver creato l’account e senza che nessuno lo sapesse. Ne approfitto anche per segnalare la miniguida su Twitter scritta qualche tempo fa dalla simpaticissima Elena, che se non risponderà a tutti i vostri dubbi su questo network, vi strapperà di sicuro qualche sorriso.

Alternativa a Windows Live Writer per Linux e Mac: Qumana

image In genere gli editor integrati delle piattaforme come Blogger, Wordpress e simili sono scomodi da usare e poveri di funzionalità. Per questo negli anni sono stati proposti vari programmi da installare nel proprio PC che sostituiscono gli editor online e che si rivelano molto più pratici e più potenti.

Per gli utenti Windows, il miglior strumento in assoluto è Windows Live Writer, di cui raccomando sempre l’uso perchè ha la capacità di semplificare in mille modi la vita di un blogger, anche grazie alla possibilità di aggiungere funzioni supplementari con delle plugin esterne.

Ma anche per gli ambienti Linux e Mac esistono strumenti simili, come l’ottimo Qumana.

Caratteristiche di Qumana

Qumana è un prodotto gratuito scritto in Java e che può essere installato su Windows, Mac e Linux (anzi, su questi ultimi due in genere è aggiornato prima), e che io stesso ho usato in passato per scrivere alcuni tra i primi articoli di Creare blog:

image

Come Windows Live Writer, Qumana permette di pubblicare sulle piattaforme più diffuse (Blogger, Wordpress, Drupal, LiveJournal, Movable Type, MSN Spaces, TypePa, e altri) e di gestire più blog, offrendo un editor con la doppia possibilità di vedere sia la versione finale del post sia il suo codice HTML:

image

Qumana è diventato celebre in passato perchè permetteva di generare con un semplice click annunci AdSense da inserire direttamente dentro al post, in qualunque posizione desideravamo. Purtroppo nelle ultime versioni permette di inserire solo annunci di Adgenta, un concorrente di Google che nel mercato italiano non ha molto da offrire.

Punti a favore rispetto a WLW

Pochi a dire il vero:

  • Recupero di tutti i post presenti nel blog e possibilità di modificarli e ripubblicarli
  • Recupero automatico di tutti i blog dal nostro account Google
  • L’editor è separato dal blog manager, per cui risulta molto più leggero per il computer tenere aperti diversi post contemporaneamente
  • Possibilità di inserire i tag Technorati direttamente dall’editor
  • Produce codice HTML meno intrusivo

Punti a sfavore rispetto a WLW

  • Non permette di incollare direttamente le immagini copiate in memoria, che invece devono essere recuperate dal disco o dal web, nè di applicare effetti particolari ad esse (come l’ombraggiatura e così via)
  • Non permette di salvare (o risalvare) il post come bozza sul blog
  • Non supporta plugin esterne
  • Non permette di vedere l’anteprima del post come apparirebbe nel blog
  • Non ha strumenti per la gestione delle tabelle
  • Non ha il glossario dei collegamenti
  • Non è disponibile in lingua italiana

Ping alla pubblicazione del post

Per chi ne fa uso, anche Qumana, come Windows Live Writer, permette di pingare i servizi che vogliamo per notificare la presenza di un nuovo post:

image

Altre alternative

Programmi simili per Linux e Mac ce ne sono molti, ma segnalo BloGTK (solo per Linux) e Bleezer (per Windows, Linux e OS X), entrambi gratuiti. Non ho avuto modo di provarli personalmente, ma sono sicuramente soluzioni alternative interessanti.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-rJq60COdTvXCRHeeW-LwL-XaXzg4zA0PwBJsYrJVDW9v6sZGRRM5S4gEbbtTC-1J_ghLdc74x4xH3fk3hFMZsSKTj6HT7rPeY8x5XadDV3UAxtfvz1AblwWyQhigckxTzYiP3d6-OLU/)


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwzDfHriu5IIg-vQ3HkEWzuIJEa6JaztNorhE4LiIlUkdK2nuiH9VToGpQLher_JGAJwlAQwEnrh_j6asYyZUzCk_a7jl748PdtxR8N7TI4r7LOdZAOChXVrxkI3TU1UO4Sgugi9FwK0/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizj5qmox_9dcrT4HYsTTpzycVdk5vqYyRiaRVNxXzdRGGNiVSf85RnUNiZgQQlAPpU_HkkFDcYMISGTlYgnglc6FZ0usXBqDK5QyO5w1HgHELfRO3xDzbwnt-K_OVtbl_zRmcmKc1_nUA/) 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.


Creare una fan box di Facebook da pubblicare sul blog per far iscrivere i nostri visitatori!

image Facebook sta cercando nuove strade per offrire ulteriori strumenti di connettività ai suoi iscritti, con lo scopo di estendere i suoi servizi oltre quello che è stato ad oggi il proprio dominio. Fallito il tentativo di acquisizione di Twitter, ha cominciato a proporre soluzioni alternative.

Una di queste è la recente “Fan box” o “Connect widget” (in italiano “Riquadro dei fan”), che una volta aggiunta al nostro blog permetterà non solo di visualizzare i fan delle nostre pagine personali, ma anche l’iscrizione con un semplice click, in modo molto simile a quanto già visto, per esempio, con Friend Connect di Google.

Vediamo come realizzare questo widget e come inserirlo nel blog.

Creare il widget del “Riquadro dei fan”

Dalla gestione della nostra pagina su Facebook (da non confondere col profilo!), in fondo a destra è possibile notare il link “Aggiungi riquadro dei fan al tuo sito”:

image

Non so cosa ne pensiate voi, ma l’interfaccia di Facebook mi fa impazzire: link utili si trovano nei posti più impossibili. Comunque, una volta cliccato sul link accederemo alla pagina dove sarà possibile personalizzare il nostro widget e prelevarne il codice:

image

Abbiamo due opzioni a disposizione:

  • Includi flusso: selezionando quest’opzione, verranno visualizzati nel widget gli ultimi elementi pubblicati nella pagina
  • Include fans (il traduttore dev’essere svenuto prima di finire la pagina): con quest’opzione, nel widget verranno visualizzate le miniature dei profili di alcuni dei membri iscritti, scelti casualmente

A destra verrà visualizzata (aggiornata in tempo reale) un’anteprima di come apparirà il widget.

Aggiungere il fan box nel blog

Preleviamo il codice, selezionandolo e copiandolo:

image

E incolliamolo (nel caso di Blogger) in un elemento di tipo HTML/Javascript. Ecco come apparirà nel nostro blog (l’immagine di esempio è presa direttamente dal blog di Facebook):

image

Se il widget di Facebook si rivela troppo largo per il vostro blog, potete restringerlo cercando questo codice tra quello che avete incollato:

width="300"

Aumentando o diminuendo il valore di 300 potrete allargare o stringere il widget.

Quando usarlo?

In genere, tutti gli strumenti che tendono a creare una cerchia di amicizie danno dei risultati positivi. Quindi se avete delle pagine personali su Facebook che volete pubblicizzare, questo widget si rivela perfetto, ottimo anche come alternativa a Friend Connect o simili.

Se volete usarlo assieme ad altri strumenti, però, consiglio di usare la forma più discreta, cioè senza “flusso” e senza miniature di iscritti, ma solo il pulsante “Diventa fan”, altrimenti rischiate di riempire il blog di centinaia di miniature che, oltre a creare confusione, hanno anche il loro peso in termini di caricamento delle pagine.

Creare blog su Facebook?

Per la cronaca, visto che molti me lo hanno chiesto, esistono sia la pagina che il gruppo “Creare blog” su Facebook, ma al momento sono privati, in fase di valutazione e in attesa di riuscire a trovare del tempo libero per sistemarli. Visto che in questo periodo sto lavorando 50 ore a settimana (aiuto, sindacalista, aiuto!!), mi sa che questo tempo lo troverò solo ad Agosto, magari col portatile in riva al mare.

Scritte Glitter, avatar animati, testo al contrario e molto altro su Glitter Graphics

Glitter Graphics è un grande raccoglitore di generatori di vario tipo e di immagini animate per chi vuole dare un tocco di colore al proprio blog, cerca qualche avatar animato particolare o vuole creare scritte glitter un po’ diverse dal solito.

Per ogni effetto generato, è possibile prelevare il codice HTML che può essere usato ovunque e che nel caso di Blogger può essere inserito in un elemento di tipo HTML/Javascript.

Tra le cose da segnalare, il generatore di scritte glitter (alcuni caratteri sanno di già visto, altri sono più particolari):

image

la sezione degli avatars, con oltre 10.000 immagini animate:

image

il generatore di testo rovesciato:

image

la sezione delle gif animate, anche in questo caso con oltre 10.000 immagini animate, suddivise per categoria:

image

e oltre 20.000 testi glitter già pronti per l’uso:

image

Ma c’è davvero molto altro. Le immagini possono essere scaricate liberamente e senza pubblicità all’interno (come il gattino che vedete in alto a destra nel post), e i generatori producono codice che si limita a linkare il sito. Per gli amanti del genere, consiglio di dare un’occhiata a Glitterbank e Glowtxt.

Targeting per posizionamento: un importante strumento per aumentare i guadagni di AdSense

image Le potenzialità di AdSense si rivelano in un corretto utilizzo degli strumenti a disposizione (come i filtri per gli annunci o i criteri di monitoraggio) e nel giusto posizionamento delle inserzioni pubblicitarie (specialmente dentro i post), che se da una parte hanno regole universarli da seguire, dall’altra richiedono uno studio sul proprio blog o sito per capire quali tecniche rendono di più. Tra gli strumenti forniti da Google, ha un’importanza fondamentale il targeting per posizionamento, che permette agli inserzionisti di poter pubblicare annunci in maniera mirata nel nostro blog, aumentando i nostri guadagni anche grazie ad una migliore contestualizzazione degli annunci.

Vediamo come funziona.

Il punto di vista dell’inserzionista

Chi si fa pubblicità tramite AdWords ha tutto l’interesse a massimizzare l’efficenza dei propri investimenti cercando di mostrare i propri annunci nei siti più attinenti ai servizi e ai prodotti offerti. La contestualizzazione viene fatta automaticamente da AdSense, ma può non essere perfetta e l’inserzionista può avere invece l’esigenza di concentrarsi solo su determinati siti (e determinate posizioni) che trattano un argomento a lui congeniale, piuttosto che disperderli per la rete, per ottenere il massimo ritorno con la minima spesa.

A chi usa AdWords (e AdPlanner), Google fornisce la possibilità di fare questa ricerca, purchè il webmaster che utilizza AdSense renda disponibili determinati criteri che permettano appunto agli inserzionisti di trovare il suo sito (e la posizione degli annunci). Questi criteri sono quelli che costituiscono appunto il targeting per posizionamento.

Il punto di vista del publisher

Dal nostro punto di vista, significa comunicare agli inserzionisti i temi trattati da noi, quali formati di annunci utilizziamo e quale posizione hanno. Un publisher potrà quindi scegliere i nostri spazi per la sua pubblicità, mirando a farla apparire in un punto ben preciso del nostro blog. In questo contesto, riveste quindi un’importanza fondamentale scegliere le giuste posizioni per gli annunci, perchè nessun inserzionista pagherà, per esempio, per avere la propria pubblicità in fondo alla pagina del nostro sito: non verrà quasi mai neanche vista dai lettori.

Personalizzare i canali

Comunicheremo queste informazioni agli inserzionisti tramite i nostri canali di annunci (quelli che prima venivano chiamati criteri di monitoraggio, per approfondire vi invito a leggere quest’articolo), da Impostazioni AdSense –> Canali:

image

Per rendere visibili i nostri canali agli inserzionisti, clicchiamo sul link Modifica impostazioni di un canale e spuntiamo la casella Mostra agli inserzionisti questo canale per il posizionamento degli annunci:

image

E compiliamo le informazioni sottostanti per descrivere questo canale:

image

Indicando su quali pagine vengono visualizzati gli annunci (in questo caso, ho indicato che l’annuncio è visibile solo nella pagina del singolo post), la posizione dell’annuncio, e una descrizione aggiuntiva che permetta di far capire meglio la natura e la posizione dell’annuncio. Per la descrizione, ma anche per il nome del canale, è importante dare informazioni ben precise. Attenzione: se cambiamo nome al canale, le offerte degli inserzionisti che lo hanno come target andranno perse.

A questo punto non resta che cliccare su Salva canale e ripetere l’operazione per tutti i canali che vogliamo rendere disponibili per il targeting.

Verificare la redditività dei canali

Un’operazione da fare spesso per capire l’andamento dei propri annunci è verificare la redditività dei canali, che possiamo fare in qualunque momento da Rapporti –> Rapporti avanzati:

image

Da Impostazioni AdSense –> Centro verifica annunci, potremo invece dare un’occhiata agli inserzionisti che hanno deciso di pubblicare annunci mirati sul nostro blog:

image

E’ chiaro che soprattutto i siti con alto volume di traffico offrono attrattive maggiori per gli inserzionisti, ma visto che lo scopo è apparire su spazi attinenti ai propri servizi, anche i piccoli blog possono essere scelti. A prescindere dal targeting per posizionamento, l’uso dei canali è da raccomandare a tutti i webmaster e blogger che usano AdSense per guadagnare, per capirne l’andamento e ottimizzare il profitto.

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.

Blogger cerca designer per realizzare nuovi template!

image Quante volte ci siamo detti di quanto spartani siano i template predefiniti di Blogger? Sono gli stessi da anni, molti sono semplicemente stati convertiti nel nuovo formato dopo che Blogger è stato acquistato da Google, e il loro stile è ormai antiquato. Bene, anche Google finalmente se n’è accorta e sembra che si stia preparando al lancio di una nuova serie di template (finalmente a tre colonne?), stando almeno alla proposta che è stata fatta a designer e grafici di segnalare i propri lavori o il proprio interesse a partecipare alla progettazione di nuovi layout.

Per partecipare a questa selezione, o proporre i propri lavori, basta compilare questo form (in lingua inglese). I lavori verranno esposti in un’apposita directory web, con tanto di link all’autore.

Spero davvero che l’appello venga raccolto anche da qualche italiano, l’unica designer che mi viene in mente è Gimbola (a parte la famosa Pannasmontata, che ormai non realizza nuovi template da molto tempo).

Ottima iniziativa, spero che Google però imponga anche degli standard ben precisi per la struttura dei template, così che potremo passare da uno all’altro senza dover perdere gli elementi a causa delle differenze di codice.

Personalmente non penso di lanciarmi in quest’avventura (mai stato un grande grafico), ma se qualcuno volesse propormi qualche layout veramente valido, potrei aiutarlo a convertirlo per Blogger!

L’immagine usata nel post è un’opera di Norino Martinis

Google Friend Connect crea problemi con Internet Explorer 8

Sempre più spesso mi viene segnalato questo messaggio di errore che appare utilizzando Internet Explorer 8 quando si entra in alcuni blog:

image

Come molti hanno già capito, la causa è il widget di Friend Connect di Google. Google è quasi un mese che sta lavorando alla risoluzione del problema, come si vede da questa segnalazione. Perchè ci voglia così tanto tempo per risolverlo è un mistero: mi verrebbe quasi da pensare che Google stia in qualche modo boicottando il nuovo Internet Explorer (cosa che a me starebbe anche bene).

Teoria del complotto a parte, sembra che in molti casi dopo il messaggio si venga reindirizzati alla pagina d’errore:

image

E così è impossibile consultare il contenuto del blog.

A questo punto si prospettano tre soluzioni al problema: togliere il widget di Friend Connect finchè non verrà sistemato (e ne darò segnalazione qui), aspettare pazientemente che i programmatori risolvino il problema (come sto facendo io, ma non ancora per molto), o sostituire il widget con un’immagine che dia l’impressione della sua presenza, con tanto di link come ha fatto Iole nel suo blog.

Anche se Internet Explorer 8 è poco diffuso è sempre un problema molto fastidioso: un lettore su venti, nel mio caso, vede comparire il messaggio.

Per fare gli screenshot degli errori, ho usato come cavia inconsapevole il blog di The Tramp.

Aggiornamento: stando alle segnalazioni dei lettori, sembra che il problema non sia presente solo sulla versione 8 di Internet Explorer ma anche nelle precedenti (IE6 non visualizza proprio il widget).

Visualizzare gli articoli simili con LinkWithin

image Da sempre in fondo ad ogni post di Creare blog è possibile vedere un elenco di articoli correlati che appartengono alle stesse categorie. Il vantaggio è di mostrare al lettore altri argomenti simili a quello che sta leggendo, ma la cui attinenza dipende molto dalla granularità in cui sono divise le categorie.

Per intenderci, sotto Aggiungere elementi nel blog vengono poi trattati un’infinità di argomenti molto diversi tra loro, che spesso non sono propriamente correlati. Ma d’altra parte, l’alternativa sarebbe avere mille tag per i propri post, col rischio di creare confusione.

LinkWithin è uno strumento che sempre più spesso vedo usato nei blog e che ci viene in aiuto in questi casi: dopo la sua installazione nel blog, potremo visualizzare in fondo ad ogni post un elenco di articoli simili la cui attinenza viene valutata in base al suo contenuto.

Vediamone le caratteristiche.

Assolutamente gratuito e non invasivo

LinkWithin ha il pregio di non essere assolutamente invasivo (ha anzi una grafica piacevole) e di essere totalmente gratuito: non viene visualizzata nessuna pubblicità e non è nemmeno richiesta la registrazione. Viene solo messo un piccolo link al sito:

image

Vengono visualizzati i tre articoli più attinenti all’argomento trattato nel post, con l’anteprima della prima immagine. Devo dire che nella maggior parte dei casi le scelte sono abbastanza azzeccate, suppongo si basi molto sui titoli e quindi molto dipende dalla nostra capacità di scrivere titoli mirati (ma vengono presi in considerazione anche altri fattori, come l’età del post).

Il servizio è in lingua inglese ma le etichette visualizzate nel nostro blog sono in lingua italiana e non appesantisce il caricamento del blog.

Installazione di LinkWithin

Per installarlo nel nostro blog, basta andare nella pagina principale di LinkWithin, e compilare la sezione in fondo a destra, indicando il nostro indirizzo email, l’indirizzo del nostro blog, la piattaforma su cui si trova (Blogger, Wordpress, TypePad, e altri) e i colori (chiari o scuri) del widget visualizzato:

image

Cliccando su Get Widget!, nella pagina successiva basterà cliccare su Install Widget per installarlo nel blog:

image

Come con i vari widget, ci verrà richiesto su qualche blog vogliamo installarlo:

image

E una volta scelto, il modo migliore per posizionarlo è sicuramente in fondo al post,semplicemente trascinando l’elemento LinkWithin:

image

Visualizzare l’elemento solo nella pagina del singolo post

Su Blogger, se volete visualizzare gli articoli correlati solo nella pagina del singolo post (utile soprattutto se utilizzate la visualizzazione sintetica degli articoli), andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget”, e cercate il titolo dell’elemento che avete inserito (guardate l’immagine sopra con “Aggiungi elemento pagina”), che se non l’avete modificato sarà LinkWithin. Troverete una porzione di codice simile a questa:

<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>

Dove HTML1 (evidenziato in verde) potrebbe essere diverso. Va modificata aggiungendo le righe in rosso (attenzione a <data:content/> che va tra le due nuove righe):

<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>

E a questo punto potete salvare il template.

Per concludere

Se volete utilizzarlo su più blog, dovrete ripetere l’operazione da capo per ogni blog. LinkWithin promette di aumentare il traffico del nostro blog, basandosi sull’idea di base (sicuramente efficace) che un utente sarà portato a navigare tra argomenti simili di proprio interesse. A me piace molto e penso di inserirlo anche su Creare blog.

Catturare lo schermo e pubblicare i filmati direttamente online con ScreenToaster

Gli screencast (cioè i filmati realizzati catturando lo schermo) sono un ottimo strumento per una comunicazione immediata e semplice, soprattutto per i contenuti a scopo didattico. Se avessi più tempo libero da dedicarvi, confesso che anche a me piacerebbe fare dei video-post su Creare blog: un video in certe occasioni varrebbe davvero più di un milione di parole, magari con codice finale a corredo.

Ci sono molti programmi gratuiti che danno ottimi risultati, come CamStudio o Windows Media Encoder, ma se non volete installare l’ennesimo applicativo sul vostro pc, ScreenToaster vi permetterà di farlo direttamente online dal vostro browser.

image

Per cominciare a provare ScreenToaster, basta andare nella pagina principale del sito e cliccare su Start Recording:

image

Alla prima esecuzione vi verrà richiesto di eseguire un’applet Java (dovrete confermare) e alla fine del download vi apparirà questa maschera:

image

Dove sceglierete il formato (se tutto lo schermo o solo una porzione rettangolare di esso), e se volete usare il microfono o la webcam. A questo punto potete anche minimizzare il browser e per far partire la registrazione semplicemente premendo ALT+S. Quando avrete finito, con la stessa combinazione di tasti metterete in pausa la registrazione, e decidere se riprenderla (di nuovo ALT+S) o terminarla (Stop recording):

image

Una volta terminata la registrazione, potrete modificarla (applicando per esempio dei sottotitoli o dell’audio), pubblicarla in rete (ad esempio su Youtube o sul servizio di hosting ad alta definizione dello stesso ScreenToaster), o scaricarla in formato Quick Time o Flash:

image

Per pubblicare il filmato in rete è richiesta la registrazione al servizio, che è comunque gratuita. La qualità della registrazione è molto elevata e nuove funzionalità verranno presto aggiunte (soprattutto per quanto riguarda l’editing del video).

Gratuito, completo, immediato e online. Tra i prodotti simili (ScreenJelly o Screencast-o-matic, giusto per citarne un paio), lo considero il migliore.

Chrome OS, il nuovo sistema operativo di Google

image La notizia è stata annunciata qualche giorno fa nel blog ufficiale di Google: come spesso ho auspicato anche su questo blog, finalmente Google ha cominciato a sviluppare un proprio sistema operativo che entrerà in diretta concorrenza, col tempo, col Windows di Microsoft.

Il nuovo progetto si chiama Chrome OS e già nel nome, ispirato al browser di Google, sono rivelati i suoi principali obiettivi: un sistema operativo snello, veloce e totalmente proiettato all’uso di Internet.

Nel post di annuncio viene ricordato come gli attuali sistemi operativi sono nati quando ancora Internet praticamente neanche esisteva, e si basano quindi su una vecchia concezione dell’uso che ne fa l’utente. Il nuovo Chrome OS si propone invece di essere al passo con i tempi, e di rivoluzionare l’approccio con il proprio computer. Non mancherà anche con una massiccia integrazione dei servizi proposti da Google stessa, come Gmail, Google Talk, Google Docs, e così via.

Come Android (orientato però solo all’universo della telefonia mobile) il nuovo sistema operativo sarà Open Source e i sorgenti verranno rilasciati già prima della fine di quest’anno, anche se si dovrà attendere l’anno prossimo per cominciare a vedere i primi netbook con Chrome OS installato.

L’obiettivo è comunque di estenderlo ad altre piattaforme, compresi i nostri desktop, visto che il sistema operativo (basato su un kernel Linux) è studiato per la tecnologia x86 e ARM.

Tra i principali partner del progetto troviamo Acer, Adobe, Asus, HP, Toshiba, Lenovo (stranamente non compare Intel).

Anche se hanno cominciato a girare i primi screenshot fasulli, non si sa altro ancora del progetto, ma chi è interessato può seguirne gli sviluppi sul blog di Chrome.

Per quanto mi riguarda, non vedo l’ora di poter installarlo sul mio PC di casa per provarlo!

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.