quanto basta

Apre i battenti Quanto Basta (per essere felici), il blog di virtual recipes per l'ottimismo.

By rafter.

creare una galleria di immagini con Dropbox e SimpleViewer

Innanzi tutto, scarichiamo Dropbox (https://www.dropbox.com/downloading). Installiamo il programma e creiamo contestualmente il nostro account (procedura estremamente rapida). Al termine della procedura di installazione, l’icona dell’applicazione comparirà nell’icon tray.

Scarichiamo ed installiamo SimpleViewer (la versione free andrà benissimo: http://www.simpleviewer.net/products/). Nel caso in cui il file di installazione di SimpleViewer (con estensione .air) non sia associato ad alcun programma, dovremo scaricare anche Adobe Air (http://www.xnavigation.net/view/767/adobe/air/download.html).

A questo punto abbiamo tutti gli strumenti per partire. Per la creazione della galleria, utilizziamo SimpleViewer, un programma molto intuitivo e che rende facilmente customizzabile l’interfaccia della nostra galleria. Al termine della procedura, salviamo e nominiamo la galleria (nel nostro caso, galleriaesempio) come sottocartella  della directory PUBLIC di dropbox. Copiamo quindi il codice html che andrà successivamente modificato prima di essere embeddato nel post di blogger.

In sostanza le modifiche da apportare sono essenzialmente tre.

1. Cerchiamo, nella cartella galleria creata con simpleviewer,  il file simpleviewer.js; (il percorso dovrebbe essere all’incirca il seguente: C:\Users\....\Dropbox\public\galleriaesempio\svcore\js). Una volta individuato il file simpleviewer.js, con il tasto di dx selezioniamo: dropbox/copy public link e modifichiamo la stringa src="svcore/js/simpleviewer.js" sostituendovi l’indirizzo pubblico appena copiato: 

<script type="text/javascript" src="http://dl.dropbox.com/u/73512931/galleriaesempio/svcore/js/simpleviewer.js"></script>  

2. Al di sotto della stringa <script type="text/javascript"> aggiungiamo la seguente stringa (reperibile nella guida di simplviewer):  

var flashvars = {};
flashvars.baseURL="http://dl.dropbox.com/u/73512931/galleriaesempio/";

indicando come URL, l’indirizzo pubblico della nostra galleria di immagini. 

3. Aggiungiamo infine la voce flashvars al termine della stringa:  

simpleviewer.ready(function () {simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);

  

Esempio di codice generato da simpleviewer:

<!--START SIMPLEVIEWER EMBED.-->

<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>

<script type="text/javascript">

simpleviewer.ready(function () {

simpleviewer.load("sv-container", "100%", "100%", "333333", true);

});

</script>

<div id="sv-container"></div>

<!-- END SIMPLEVIEWER EMBED -->

Esempio di codice modificato:

<!--START SIMPLEVIEWER EMBED.-->

<script type="text/javascript" src="http://dl.dropbox.com/u/73512931/galleriaesempio/svcore/js/simpleviewer.js"></script>

<script type="text/javascript">

var flashvars = {};
flashvars.baseURL="http://dl.dropbox.com/u/73512931/galleriaesempio/";

simpleviewer.ready(function () {

simpleviewer.load("sv-container", "100%", "100%", "333333", true, flashvars);

});

</script>

<div id="sv-container"></div>

<!-- END SIMPLEVIEWER EMBED -->

[Testato su blogger]

bottone di stampa e pdf

Segnalo printfriendly.com per la possibilità che offre di aggiungere ai post di blog e siti web, il bottone di stampa e salvataggio in pdf.
Per utenti blogger:
generare il codice da copincollare inserendo l'url del proprio sito; dopodiché accedere al blog, seguire il percorso design/edit html (ricordarsi di espandere i modelli widget) ed inserire il codice generato sotto il tag <div class='post-footer'>
Happy bloggin' ^_^

blogumus

Un widget un po' datato ma pur sempre carino in cui mi sono più volte imbattuta, è blogumus, un label cloud animato per blogger, particolarmente gradevole ed efficace sotto il profilo grafico (anche per il wow effect che sempre produce flash). Ad essere sinceri, l'estetica stavolta compromette un po' la funzionalità del labellizzatore, che dovrebbe essere quella di indicizzare al meglio gli argomenti trattati (... è anche il motivo per cui sul mio blogsite continuano a coesistere entrambi ...).

Critica a parte, rimane il debito verso Roy Tank e Amanda Fazani, per aver declinato in versione blogger, il cumulus degli utenti wordpress.

Il codice da inserire è reperibile su diversi blog, anche se non tutti funzionanti. Per quanto testato sui template minima black e scribe, vi segnalo la mia fonte: bloggerbuster nell'articolo how to install blogumus in your blogger layout: tutto è spiegato con estrema chiarezza, comprese le eventuali modifiche al layout. 

Segnalo, inoltre, che la mia lotta per ottenere l'effetto trasparenza si è conclusa da poco ... è sufficiente eliminare dalla stringa //so.addParam('wmode', 'transparent'); i due slash iniziali (un grazie all'autore di questo articolo, free press release).

Infine ringrazio me, per essermi districata in un mare ignoto ed essere riuscita a comprendere che l'effetto di trasparenza che speravo (non TRASPARENZA, come mi ostinavo a pensare ... sic! bensì COLORE TRASPARENTE) si ottiene sostituendo 'transparent' con 'opaque'. (Ovviamente dopo aver scelto il background color, qualche stringa più a nord). 

Ma c'ho la zucca un po' dura... happy blogging ^_^

un calendario nel post di blogger

Segnalo l'articolo di Gautam Hans direttamente dal Blog Godown che ci spiega come sostituire la data del post, passando dal classico formato testuale offerto dagli strumenti di blogger, ad un gradevole calendario grafico. Non mi soffermo sulla procedura che è ben esplicitata e che, anche se in inglese, è assolutamente intuitiva (leggi qui). Si tratta di tre steps attraverso i quali modificare con dei semplici copia&incolla il codice html del blog.
Mi limito a ricordare che l'immagine scelta da Hans, è di fatto uno sfondo ai dati (mese, giorno, anno) ed è quindi personalizzabile (così come tutto il resto: layout, padding, size dei font, etc).
Vedere il risultato sul sabbione di rafter.
(A breve anche sul mio blog).
Happy blogging ^_^

a proposito di favicon

Per modificare la favicon di Blogger, la B bianca su fondo arancione assegnata automaticamente, accedete al codice html del vostro blog (design/modifica HTML) e cercate:

<title><data:blog.pageTitle/></title>

al di sotto della quale collocate la seguente sintassi:

<link href='http://pagina_dove_si_trova_la_mia_immagine.png' rel='shortcut icon' type='image/png'/>

(sostituite l'indirizzo con quello dove risiede la vostra immagine e modificate png in gif o jpeg, a seconda del formato dell'immagine scelta).

Se poi volete personalizzare ulteriormente la favicon, create l’immagine da voi (cercando di non eccedere oltre i 48x48 pixel) e aggiungetela al vostro web album (io utilizzo Picasa Web Album), loggandovi e caricando l'immagine. Successivamente selezionate l'immagine dall'interno del web album e:

• cliccate link a questa immagine (nella barra a destra)
• spuntate solo immagine (nessun link)
• copiate l'indirizzo che a questo punto sarà comparso in incorpora immagine

Sarà questo l'indirizzo da inserire al posto di http://pagina_dove_si_trova_la_mia_immagine.png.

Faviconizzatevi. ^_^

favicon

Ho modificato la favicon di questo blog e ne ho creata una personalizzata per rafter (vedi http://ilsabbione.blogspot.com/). Rafter, fammi sapere si te gusta...
Domani darò un paio di dritte per procedere.
Enjoy your night ^_^

come inserire il codice HTML nel corpo del post

Quando si utilizza l'editor WYSIWYG, potrebbe essere necessario inserire pezzi di codice HTML solo a titolo divulgativo o per dare istruzioni sulla compilazione delle pagine. In tal caso, eventuali simboli all'interno del post, non dovranno essere interpretati come codice html ma come semplici elementi grafici. Così, per esempio, se volete utilizzare i simboli di apertura e chiusura < e > potrete ottenerli attraverso una sequenza di tasti anzichè digitarli dal tasto corrispondente.
Per realizzare < la sequenza è &lt; per ottenere > la sequenza è &gt;
Attenzione a non tralasciare il punto e virgola (che ovviamente è compreso nella sequenza).
Happy blogging ^_^

come aprire i link del gadget "elenco link" in una nuova finestra

Ho trovato interessante l’articolo pubblicato da prove di blogger che spiega come aprire i link di blogger in un’altra finestra. L'articolo si limita ai collegamenti ipertestuali creati all’interno dei post (leggi qui) ma è possibile raggiungere lo stesso obiettivo anche con i collegamenti del gadget elenco di link. In tanti si saranno resi conto che questo gadget ha lo svantaggio di far uscire il visitatore dalla nostra pagina web, cosa che invece non accade, per esempio, con il gadget elenco blog: in questo caso infatti il browser apre il collegamento in una nuova finestra (utenti explorer) o in una nuova scheda (utenti firefox).
Per ovviare all’inconveniente è possibile mettere mano all’html del template nel seguente modo:

• loggarsi, scegliere design/modifica html, spuntare espandi i modelli widget (eseguite sempre il backup del modello; la sottoscritta non ha competenze di linguaggio html!);
• col comando trova, cercare:

<li><a expr:href='data:link.target'><data:link.name/></a></li>

• aggiungere al codice target='_blank' come mostrato nell’esempio:

<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

Testato sui template minima black e scribe.
Happy blogging ^_^

come modificare la scritta "Home Page" in fondo ai post

Al solito, scegliete design/modifica html. Fate una copia di salvataggio e spuntate espandi i modelli widget. Adesso cercate questo pezzo di codice:

</data:homeMsg>

Eliminatelo e al suo posto scrivete qualsiasi cosa che indichi un ritorno a inizio pagina.

Per esempio:

<a class="home-link" href="data:blog.homepageUrl">ritorna a inizio pagina</a>

Se invece preferite sostituire al testo un'immagine, copiate e incollate l'url dove risiede l'immagine modificando lo stesso pezzo di codice come nell'esempio:

<img alt="data:homeMsg" src="http://www.arcadiaclub.com/ico/icone_alta_risoluzione/web/png/home_page_48x48.png" />

Ulteriori informazioni sono disponibili qui:

http://blog.btemplates.com

Happy blogging ^_^

come rimuovere la scritta "iscriviti a Post (Atom)" dalle pagine di blogger

Dopo essersi loggati, scegliere: design/modifica html. (Come sempre, prima di qualsiasi operazione, meglio salvare una copia del modello.) Dopodiché spuntare espandi i modelli widget e cercare .feed links. Nel mio caso tra le due graffe compariva:
{
clear: both;
line-height: 2.5em;
}
Ho sostituito:
{
display: none;
}
Per questo trick, ringrazio scrapur.
Happy blogging ^_^

come rendere i file disponibili per l'upload e il download in blogger

Volendo caricare un documento su Blogger e renderlo disponibile per il download, la gamma delle possibilità è varia e molteplice. Da una parte i tanti che dissuadono da qualsiasi tentativo di uploading diretto dei file - con la sola esclusione delle immagini - indicando questa mancata possibilità come una falla che Blogger adotta consapevolmente per motivi di sicurezza. Dall'altra, la folta la schiera di coloro che rinviano il caricamento a ulteriori ftp o pseudoftp (la giungla di servizi di hosting, skydrive e scribd in primis).

Ma se siete utenti blogspot, forniti quindi di un account google, perché cercare altrove quello che già avete a portata di log? Al fine di sfuggire ad ulteriori register, sign here and there, log in e password … vi propongo di semplificare la vita del vostro blog attraverso Google Docs.

Loggatevi con email e password di blogger e una volta ottenuto l’accesso alla piattaforma, caricate il vostro file (per cominciare, scegliete un pdf): upload/seleziona file da caricare/avvia il caricamento.

Tornate alla pagina precedente (torna a google documenti) e posizionatevi sul file caricato. Col tasto destro del mouse scegliete: condividi/aggiungi link da condividere. Quindi spuntate permetti a tutti… e infine salvate e chiudete.

A questo punto cliccate sul file in modo che venga aperto in una nuova finestra. Nel menu in alto a sinistra posizionatevi su scarica e, sempre col tasto destro, selezionate e cliccate copia indirizzo.

Ora sloggatevi e uscite. Aprite il vostro blog e scrivete qualcosa nel corpo del post da cui volete far partire il download. Selezionate la frase o parola a cui linkare (con il comando dedicato). Nella finestra che apparirà incollate il link che avete appena copiato da google docs.

Il gioco è fatto: il vostro documento è pronto per essere scaricato.

NB: In generale, questa procedura funziona con i pdf. I file xls, ppt e doc vari, quando cliccati, vengono aperti nell’applicazione di google. Per renderli direttamente disponibili per il dowload, potete, per esempio, convertire i doc in pdf. Più in generale, infilate i file in una cartella e zippatela.

Happy blogging ^_^

come allargare l'area del main wrapper nelle pagine statiche di blogger

La creazione e personalizzazione di pagine statiche con blogger, risulta particolarmente efficace quando, dopo aver nascosto header, footer, sidebar e widget eventuali, si riesce finalmente ad allargare l'area dedicata ai post (main wrapper) fino a farle occupare tutto lo spazio lasciato libero dalla barra laterale. Per ottenere questo risultato, il codice che ho trovato sulla quasi totalità delle pagine web dedicate, è più o meno il seguente:
#main-wrapper {width: 95%;float: none;margin: 0 auto;}
da incollare appena prima di:

Tuttavia, applicato al template da me in uso (minima black), il codice non ha funzionato.
Ha funzionato, piuttosto, questa modifica:
#main-wrapper,
#main {min-width: 95%;max-width: 95%;float: none;margin: 0 auto;}
Non avendo conoscenza dell'html, non so spiegarvi perché; sta di fatto che ora il main wrapper occupa tutto lo spazio disponibile.
Se può servire, provate (...e non sottovalutate l'eventualità di un backup del modello prima di qualsiasi cambiamento).
Happy blogging ^_^