Condividere i post su Wordpress e Blogger con AddToAny

Qualche settimana fa Capricci di Natura mi aveva chiesto se era possibile inserire nel suo blog su piattaforma Wordpress le bandierine per tradurre i post e le icone dei social networks per la condivisione.

Per tradurre i post ho adattato il codice utilizzato per il Google Translate Widget per Blogger (eliminando il codice javascript che Wordpress non supporta) per permettere anche le traduzioni sui blog Wordpress (trovate tutte le istruzioni in questo post).

Dopo il Google Translate Widget per Wordpress, ecco oggi le istruzioni per aggiungere ai vostri post il pulsante per la condivisione sia su Wordpress che su Blogger utilizzando AddToAny
(ringrazio The Five Demands per la segnalazione di questo servizio).

Per Blogger avevo già scritto un post su AddThis e come inserire il pulsante per OKNOtizie.

Per Wordpress

Per i blog su piattaforma Wordpress ecco il codice da inserire alla fine del post:

<a href="http://www.addtoany.com/share_save?linkurl=LINK_POST&linkname=TITOLO_POST"><img src="http://static.addtoany.com/buttons/share_save_256_24.png" alt="Share" /></a>

dove:
LINK_POST deve essere sostituito con l'indirizzo del post che state per pubblicare
TITOLO_POST dovrà essere sostituito con il titolo del post

Salvate il post e vederete questo pulsante:

Per Blogger

Per i blog su piattaforma Blogger bisogna andare in Layout -> Modifica Html e cliccare su Espandi i modelli widget.
Trovate poi le righe di codice simili a queste:

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

e subito prima incollate questo codice:

<a expr:href='&quot;http://www.addtoany.com/share_save?linkurl=&quot; + data:post.url + &quot;&amp;linkname=&quot; + data:post.title'><img alt='Share' src='http://static.addtoany.com/buttons/share_save_256_24.png'/></a>

salvate le modifiche e il risultato è questo pulsante

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it

Come inserire un "box con barra di scroll" nel blog

Qualche settimana fa ñ¡¢ø£ëtå mi ha chiesto:

sai come si mette sul blog un box con barra di scroll, per mettere dentro una lista di link?

A lei ho già risposto via email, ma forse potrebbe interessare anche a voi. Per questo ho deciso di pubblicare questo post.

Innanzitutto ecco cos'è un box con barra di scroll con una lista di link:

Amsis

Vampiretta

Ale e Solidea

Capricci di Natura

vitaIE

Fabio Carrozzi

Roni

Rossella

Bisco

Mr Blue

Creareblog

Il blog di Den

Guidami

Amici animali

Telefatti

Federica

Ola Giò

Favoloso25

Fumo? No, grazie

Bud Terence

ABC Hobby

Salute33

Vacanze in Albania

Giugiù

Associazione Logos

Ali di luna

Italy lowcost

Rita Charbonnier

I dolci di Pinella

ec.log

Angolo film

Flying car

Hobby di Lety

D-chan

Edo rulez

Spike blog

Pon Brindisi

Citazioni di Luca

klick-blog

Train of thought

Sauroweb

Edilizia e energia

Siciliani emigranti

Daniela

Germana

Betty

Jajo

Solema

Cliccandoci

Jenga

Altrodove Blog

Dino

Max

docpap

Vediamo allora come realizzarlo (do per scontato che sapete fare un elenco di link).

Il codice per il box è:

<div style="width:230px; height: 100px; border: 1px dashed #FF5A7E; overflow:auto;">
elenco di link
</div>

dove width:230px; e height: 100px; indicano le dimensioni del box, border: 1px dashed #FF5A7E; indica lo stile del bordo (che potete personalizzare a vostro piacimento) e overflow:auto; è lo scroll (se impostato su auto la barra di scroll compare solo se il contenuto del box è più grande del box stesso).

Mi spiego meglio con un esempio: ecco lo stesso box con pochi link dove non compare la barra di scroll (a sinistra) e con molti link quindi con lo scroll (a destra).

Amsis

Vampiretta

Ale e Solidea

Capricci di Natura

Amsis

Vampiretta

Ale e Solidea

Capricci di Natura

vitaIE

Fabio Carrozzi

Roni

Rossella

Bisco

Mr Blue

Creareblog

Il blog di Den

Guidami

Amici animali

Telefatti

Federica

Ola Giò

Favoloso25

Fumo? No, grazie

Bud Terence

ABC Hobby

Salute33

Vacanze in Albania

Giugiù

Associazione Logos

Ali di luna

Italy lowcost

Rita Charbonnier

I dolci di Pinella

ec.log

Angolo film

Flying car

Hobby di Lety

D-chan

Edo rulez

Spike blog

Pon Brindisi

Citazioni di Luca

klick-blog

Train of thought

Sauroweb

Edilizia e energia

Siciliani emigranti

Daniela

Germana

Betty

Jajo

Solema

Cliccandoci

Jenga

Altrodove Blog

Dino

Max

docpap

All'interno del box potete mettere un elenco di link, una serie di immagini, del semplice testo, ...

Ecco ad esempio un box con una serie di immagini:

Io l'ho utilizzato per l'elenco dei miei Link preferiti; qualche settimana fa avevo sostituito gli antipixel con delle scritte scorrevoli ma questa soluzione mi piace di più.

Newsletter by follow.it

Aggiungere l'ombreggiatura al testo del blog

Ieri visitando il blog di D-Chan mi sono accorta che il titolo del suo blog aveva l'ombreggiatura.

Mi sono detto chissà che diavoleria ci sarà dietro per mostrare il testo con l'effetto ombra.

Quando in un blog o sito noto qualcosa di carino, la prima cosa che faccio è dare un'occhiata al codice html della pagina e ho scoperto che per creare l'effetto ombra basta solo modificare il css del template aggiungendo la proprietà text-shadow.

Purtroppo l'effetto ombra non viene visualizzato su Internet Explorer, quindi se avete aperto il mio blog con il browser di casa Microsoft vedrete il testo normale, per vedere l'ombreggiatura vi consiglio di usare Firefox, Chrome o Opera.

Se utilizzate altri browser, fatemi sapere se l'ombreggiatura si vede.

Dopo questa breve introduzione, vediamo la sintassi per realizzare questo effetto:

text-shadow: #9B0021 2px 2px 3px;

dove #9B0021 rappresenta il colore dell'ombra, 2px 2px sta ad indicare di quanti pixel deve essere spostata l'ombra verso destra e verso il basso e infine 3px indica il fattore di sfocatura

Se volete applicare questo effetto ad esempio al titolo del blog, al titolo dei post, alle etichette nella sidebar o a qualsiasi altra porzione di testo del blog basta aggiungere la proprietà text-shadow nella classe interessata.

Mi spiego meglio, se volete personalizzare i titoli dei post basta modificare questa parte di codice:

h1 a {
color: #F00036;
}

aggiungendo text-shadow: #9B0021 2px 2px 3px;

h1 a {
color: #F00036;
text-shadow: #9B0021 2px 2px 3px;
}

(ovviamente le classi possono cambiare da template a template)

una volta salvate le modifiche vedrete i titoli dei post ombreggiati, con Internet Explorer invece li vedrete senza ombreggiatura.

Ecco alcuni esempi:

<span style="color: rgb(240, 0, 54); text-shadow: 2px 2px 3px rgb(155, 0, 33); font-family:Verdana; font-size:20px;">Benvenuti sul Blog!!!</span> Benvenuti sul Blog!!!

Grazie <a href="http://diccian.blogspot.com/" target="_blank" style="font-size: 14px; font-family: Comic Sans Ms; color: #7498DB; text-shadow: 2px 2px 10px #1752AF;">D-Chan</a> Grazie D-Chan

<span style="font-weight: bold; text-shadow: 2px 2px 5px #E80000; font-family: Courier; font-size: 30px; color:#FFAA00;">Ciao ^_^</span> Ciao ^_^

Come al solito, resto a disposizione per ogni dubbio e chiarimento.

Newsletter by follow.it

Google Translate Widget per Wordpress

Poco più di un mese fa ho pubblicato il post Bandierine per Google Translate Widget con il codice html/javascript per tradurre il blog in 23 lingue diverse.

Il widget è ormai presente su diversi blog su piattaforma Blogger e Splinder (ringrazio tutti quelli che non hanno rimosso i credits).

La mia amica Capricci di Natura aveva provato ad inserirlo nel suo blog (su piattaforma Wordpress) ma non traduceva un bel niente... purtroppo Wordpress non permette l'utilizzo di codice javascript.

Nel mio blog così come in tutti quelli in cui è presente il widget, basta cliccare sulla bandierina della lingua in cui si vuole tradurre la pagina e, grazie al codice javascript location.href, si ottiene la traduzione della pagina in cui ci troviamo, che sia l'homepage o un post qualunque non importa...

Il codice html che vi propongo invece traduce la pagina il cui indirizzo deve essere specificato...
Infatti come già fanno da Capricci di Natura, Jenga e The Five Demands occorre inserire il codice html alla fine di ogni post e specificare l'indirizzo del post che volete tradurre.
Wordpress, rispetto a Blogger, consente di conoscere prima della pubblicazione l'indirizzo del post (ed eventualmente modificarlo):



quindi basta copiare il link del post e sostituirlo alla stringa LINK_POST che trovate nel codice html di ciascuna bandierina che vi riporto di seguito.

Il codice html va incollato in HTML e non in Visuale

E questo è il consiglio che ho dato a Capricci di Natura:

1. salva il codice html delle bandierine che ti interessano in un file di testo
2. prima di pubblicare il post, copia il suo indirizzo
3. utilizzando blocco note o qualsiasi altro editor trova la stringa LINK_POST e la sostituisci con l'indirizzo del post
4. copia il codice html modificato e lo incolli alla fine del post
5. chiudi il file senza salvare le modifiche così la prossima volta potrai fare le operazioni dal punto 1.

Le prime volte può sembrare un po' laborioso...

Ecco il codice per ogni bandierina:

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Csq&hl=it&ie=UTF8" title="Translate Italian to Albanian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/albanian.jpg" title="Translate Italian to Albanian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Car&hl=it&ie=UTF8" title="Translate Italian to Arabic"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Arabic.jpg" title="Translate Italian to Arabic" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cbg&hl=it&ie=UTF8" title="Translate Italian to Bulgarian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Bulgarian.jpg" title="Translate Italian to Bulgarian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Czh-CN&hl=it&ie=UTF8" title="Translate Italian to Chinese"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Chinese.jpg" title="Translate Italian to Chinese" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Chr&hl=it&ie=UTF8" title="Translate Italian to Croatian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Croatian.jpg" title="Translate Italian to Croatian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Ccs&hl=it&ie=UTF8" title="Translate Italian to Czech"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Czech.jpg" title="Translate Italian to Czech" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cda&hl=it&ie=UTF8" title="Translate Italian to Danish"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Danish.jpg" title="Translate Italian to Danish" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cnl&hl=it&ie=UTF8" title="Translate Italian to Dutch"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Dutch.jpg" title="Translate Italian to Dutch" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cen&hl=it&ie=UTF8" title="Translate Italian to English"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/English.jpg" title="Translate Italian to English" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cfr&hl=it&ie=UTF8" title="Translate Italian to French"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/French.jpg" title="Translate Italian to French" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cde&hl=it&ie=UTF8" title="Translate Italian to German"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/German.jpg" title="Translate Italian to German" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cel&hl=it&ie=UTF8" title="Translate Italian to Greek"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Greek.jpg" title="Translate Italian to Greek" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Chi&hl=it&ie=UTF8" title="Translate Italian to Hindi"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Hindi.jpg" title="Translate Italian to Hindi" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cja&hl=it&ie=UTF8" title="Translate Italian to Japanese"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Japanese.jpg" title="Translate Italian to Japanese" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cko&hl=it&ie=UTF8" title="Translate Italian to Korean"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Korean.jpg" title="Translate Italian to Korean" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cno&hl=it&ie=UTF8" title="Translate Italian to Norwegian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Norwegian.jpg" title="Translate to Norwegian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cpl&hl=it&ie=UTF8" title="Translate Italian to Polish"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Polish.jpg" title="Translate Italian to Polish" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cpt&hl=it&ie=UTF8" title="Translate Italian to Portuguese"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Portuguese.jpg" title="Translate Italian to Portuguese" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cro&hl=it&ie=UTF8" title="Translate Italian to Romanian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Romanian.jpg" title="Translate Italian to Romanian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Cru&hl=it&ie=UTF8" title="Translate Italian to Russian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Russian.jpg" title="Translate Italian to Russian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Csl&hl=it&ie=UTF8" title="Translate Italian to Slovenian"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Slovenian.jpg" title="Translate Italian to Slovenian" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Ces&hl=it&ie=UTF8" title="Translate Italian to Spanish"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Spanish.jpg" title="Translate Italian to Spanish" /></a>

<a target="_blank" href="http://www.google.com/translate_p?u=LINK_POST&langpair=it%7Csv&hl=it&ie=UTF8" title="Translate Italian to Swedish"><img style="cursor:pointer;" alt="" src="http://digilander.libero.it/iolecalblogspot/flags/Swedish.jpg" title="Translate Italian to Swedish" /></a>

Resto a disposizione per qualsiasi dubbio, chiarimento...
o personalizzazione del codice!

Newsletter by follow.it

Come inserire un "campo testo" nel blog

Spesso vengo contattata da ragazze che con i loro blog di cucina partecipano a raccolte di ricette organizzate da altre blogger.
Partecipare alla raccolta significa creare una ricetta a tema, pubblicarla nel proprio blog ed esporre il logo (con il link) del blog che organizza la raccolta.

Spesso però le mie lettrici trovano difficoltà ad inserire nel proprio blog il logo della raccolta...
Così anche chi partecipa al candy organizzato da altri blogger...

Sarebbe comodo per chi organizza la raccolta o il candy rendere disponibile in un campo testo il codice html che tutti possono copiare e incollare facilmente.

Nel mio blog ad esempio cliccando sull'icona "Link", appare un popup con il codice html da utilizzare per linkarmi, contenuto in un campo testo:

<div align="center"><a alt="Iole" href="http://iolecal.blogspot.com/" target="_blank" title="Il blog di Iole"><img src="http://www.iolecal.it/blog/immagini/iole_header.png" /></a></div>

in questo modo chiunque voglia linkarmi deve solo copiare e incollare il codice html nel proprio blog.

Per inserire un campo testo nel blog basta scrivere:

<textarea rows="4" cols="48">testo da copiare e incollare nel blog</textarea>

dove rows e cols indicano rispettivamente il numero di righe e di colonne del campo testo, mentre "testo da copiare e incollare nel blog" è il codice html che volete condividere.

Ecco il risultato:

testo da copiare e incollare nel blog

Se volete personalizzare il campo testo con i colori del vostro blog allora basta aggiungere lo style alla textarea, in questo modo:

<textarea rows="4" cols="48" style="color: #9b0021; background: #f9d6dd;">testo da copiare e incollare nel blog</textarea>

ed ecco il risultato:

testo da copiare e incollare nel blog

Ecco ad esempio il codice html per partecipare alle raccolte di
Rossa di Sera e Ale e Solidea:

<a href="http://rossa-di-sera.blogspot.com/2009/05/ma-come-rossa-la-ciliegia-parte-la.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsoHyUSMxC_rOvzGZRe_ZEgAWjEe0cPWNU4CC_OKPruvHWW-sdpDX7k4ueyqH19BLLS3sawPm7p7h-Q122SVBtVnbf3suy2VEmSajM6oFeuMpgB4z2ZnqgAe9KB5MRstSvQ9msoHK7T1d/s220/Copy+of+DSC_0269.jpg" /></a>

<a href="http://aspassoconsolideaeale.blogspot.com/2009/07/aaaricette-col-cardamomo-cercasi.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi30xa6ZcLcT0Ff9HAk57sSTabLiGvyUbWmN_7cppZdeD4fbPNnbti5O4cw1lIk0mK1XiC6i2lTtcdxh6I6bDw7jZ5Sc-Tj-Y46rge21CfQKJ3qaLeReNxU5L9ZeC67-fQtmMDAzeII_30c/s1600-r/cardamomobanner3.jpg" /></a>

Newsletter by follow.it