Pubblicato il 30/05/12e aggiornato il

Come inserire un nastro (ribbon) a favore di una causa o ricorrenza.

Come creare un ribbon da inserire nel blog per promuovere una campagna a favore di un evento, una ricorrenza religiosa, una festività, una causa, ecc.
Possedere un sito web è come avere una vetrina sul mondo. Anche quelli più piccoli possono avere l'opportunità di essere visti da persone che ne hanno aperto una pagina anche da zone lontanissime del globo terrestre. I blogger possono sfruttare questa occasione per promuovere delle cause che li stanno particolarmente a cuore o addirittura crearne una loro di sana pianta.

Visto i recenti tragici fatti del terremoto si può pensare di creare un ribbon di solidarietà verso le popolazioni colpite anche con un link a organizzazioni umanitarie che si occupano della loro assistenza. Vediamo all'inizio come creare un nastro generico da inserire in un angolo del blog. I più bravi con la grafica non hanno certo problemi in merito e possono creare il loro Ribbon usando Photoshop o Gimp. Per tutti gli altri è opportuno sfruttare le risorse online che per fortuna non mancano.

Quick Ribbon è un generatore automatico di nastri che può essere usato da coloro che hanno poca pratica con i programmi menzionati sopra.

creare-ribbon-con-quickribbon

Si può digitare il testo calibrandolo con una adeguata dimensione dei caratteri, selezionare lo sfondo del ribbon, lo stile tra i quattro proposti e i tre colori da cui è formato il nastro. Dopo aver inserito l'URL a cui si vuole che venga rediretto chi ci clicca sopra (anche aprendo una nuova scheda) si va su Apply per visionare l'anteprima. Se siamo soddisfatti si clicca su Generate Ribbon! e si copia il codice.

Detto codice va incollato in Layout > Aggiungi un gadget > HTML/Javascript. Se non si visualizzasse in alto a destra possiamo incollare una riga all'inizio e una alla fine del codice in questo modo

<div style="position:fixed;top:30px;right:0px;">
Codice di Quick Ribbon
</div>

dove i numeri delle distanze dalla parte alta e dalla parte destra della pagina possono essere personalizzate in funzione del nostro modello.

3D Ribbon Generator offre una maggiore gamma di opzioni ci configurazione. Ci sono a disposizione quattro tipi di nastro che possono essere usati a tale scopo

3d-ribbon-generator

e che possono essere configurati in ogni loro componente inserendo i colori e le dimensioni


3d-ribbon-generator[4]

In questo caso verrà fornito il codice HTML e il codice CSS da inserire nel nostro sito. Uno strumento per generare nastri per campagne web che consiglio solo ai più esperti.

Diagonal Banner Design è invece molto più semplice da usare. Si sceglie lo stile del ribbon tra i 20 proposti, il suo testo, il colore del testo e la famiglia di caratteri.

diagonal-banner-design

Successivamente si incolla anche il link a cui si vuol far puntare il nastro e la nostra email. Si clicca su Generate per terminare l'operazione. In basso comparirà il codice che potrà essere incollato su Layout > Aggiungi un gadget > HTML/Javascript.

Se anche in questo caso non si visualizzasse correttamente in alto a destra, possiamo aggiungere due righe di codice come illustrato in precedenza. Alternativamente si può andare nello strumento Blogcrowds, incollare il codice ottenuto dal generatore di ribbon e cliccare su Parse. Il codice sarà convertito in XML e potrà essere incollato nel modello subito sopra alla riga </body>. Dopo aver salvato il template, l'aspetto del nastro sarà simile a questo

ribbon-generator[4]

con il link all'URL che è stato inserito. Anche nel caso di Quick Ribbon si può fare la stessa conversione per il codice e incollarlo nel modello invece che in un elemento pagina. Può essere inserito anche un codice supplementare per fare in modo che il nastro sia posizionato al meglio per esempio senza essere visualizzato sopra alla navbar di Blogger. Le due righe di codice da aggiungere all'inizio e alla fine di quello convertito con lo strumento Blogcrowds in questo caso saranno

<div style='position:absolute;top:30px;right:0px;'>
Codice di Diagonal Banner convertito in XML
</div>

dove la distanza dalla parte alta (top) e dalla destra (right) dipendono dal template utilizzato.

Cause Ribbon è invece un sito che ha già delle campagne di sensibilizzazione standard che riguardano una gran quantità di temi. Per ciascun argomento si può scegliere tra vari nastri
cause-ribbon

I temi sono in lingua inglese ma per la maggior parte di casi riguardano tematiche presenti in tutti i paesi del mondo. Si tratta di Diritti Umani, Animali, Ambiente, Salute, Pensa Positivo, Sociale, Giustizia, Cibo e Alimentazione, Vacanze e Organizzazioni


cause-ribbon[5]

Appena scelto il nastro si clicca sull'icona del più, in basso a sinistra, quindi si va su Get Code. L'inserimento di un nastro può anche servire per celebrare una ricorrenza civile, religiosa per festeggiare un compleanno o anche solo per ricordare un obiettivo del blog che sia stato raggiunto.




11 commenti :

  1. Quest'articolo cade proprio a fagiolo, come si suol dire. Avevo in mente di inserire qualcosa in supporto delle popolazioni colpite dal terremoto. La giornata di ieri temo non la dimenticherò tanto facilmente...

    RispondiElimina
    Risposte
    1. @bastet...
      L'ho scritto proprio per questo :)

      Elimina
  2. ciao Ernesto, so che ti faccio sempre impazzire, ma se io volessi collocarlo nell'angolo sinistro al posto del destro, dove modifico il codice? ovviamente ho già pronta la mia immagine del ribbon fatto sul lato sinistro.
    grazie

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Se il ribbon lo hai già pronto, lo puoi caricare su Picasa e ottenerne l'URL. Prova poi a inserire questo codice nel modello subito sopra a </body>

      <div style='position:absolute;top:30px;left:0px;'>
      <a href="URL COLLEGAMENTO" target="_blank"><img src="URL IMMAGINE RIBBON"/></a>
      </div>

      poi puoi modificare le distanze. Non ho testato quindi non so se funzionerà :)

      Elimina
  3. ciao Ernesto, scusa ho ancora un domanda: come si può imporre il target=_blank
    al codice predefinito che ti fornisce http://www.webestools.com alla fine della creazione del nastro?

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Guarda il commento 2.a per posizionare il codice. Bisogna però vedere se quel tool il codice te lo dà in forma esplicita oppure in modo non personalizzabile.

      Elimina
    2. ho visto il codice che mi hai fornito tu in precedenza e funziona tutto, solo che al posto di essere cliccabile solo l'area del "ribbon" lo è tutto il quadrato dove risiede l'immagine. invece al contrario è solo cliccabile il "ribbon" ( e non il triangolino che si crea sopra di esso per internderci) con il codice che fornisce il sito: http://www.webestools.com
      l'unica pecca è che il codice fornito da questo ribbon maker, una volta caricato su Blogcrowds e successivamente nell'html di Blogger, non contiene l'opzione di aprire il sito del ribbon in un'altra pagina, perciò come possiamo intervenire imponendo il target="_blank"? e in quale porzione di codice?
      ho provato ad inserirlo dopo l'url del sito che vorrei far aprire io una volta cliccato il ribbon, ma non funziona =(

      Elimina
  4. Ciao Ernesto ho creato dei ribbon (ad esempio: se parlo di funghi il suo ribbon) se io volessi inserire il ribbon su ogni post e per ogni argomento come posso fare?
    Ho provato ad inserire all'inizio dell'Html del post però mi appare il ribbon con una sorta di quadrato intorno come una fotografia per intenderci e avendo uno sfondo colorato che modifiche devo fare?
    Ringrazio anticipatamente per una tua risposta

    RispondiElimina
    Risposte
    1. @# Prova a inserire un ribbon in formato PNG trasparente. Forswe può esserti utile questo post

      Elimina
    2. http://www.ideepercomputeredinternet.com/2011/06/aggiungere-una-descrizione-con.html

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.