31 luglio 2009

19 commenti

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:

Share


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

Share

Resto a disposizione per ogni dubbio o chiarimento.


28 luglio 2009

56 commenti

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:


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).



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ù.


23 luglio 2009

47 commenti

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.

titolo blog D-Chan

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:

Benvenuti sul Blog!!!

Grazie D-Chan

Ciao ^_^

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


21 luglio 2009

63 commenti

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):

Titolo post

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

HTML

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:















































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


20 luglio 2009

17 commenti

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:


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:


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:


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





Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy