30 giugno 2009

104 commenti

Come inserire una scritta scorrevole nel blog

scritta scorrevoleVi è mai capitato di vedere delle scritte scorrevoli su alcuni blog o siti?

Ecco per inserire nel blog una scritta scorrevole tipo questa:

Benvenuti sul mio blog!!!



vi basta utilizzare il tag html

<marquee>.

Ecco il codice html da utilizzare:

<marquee direction="left" scrollamount="2" height="30" onmouseout="this.start()" onmouseover="this.stop()" style="text-align: center; border: 1px #F5C1CD dashed;" width="200">Benvenuti sul mio blog!!!</marquee>

Vediamo in dettaglio le proprietà e come personalizzarle.


24 giugno 2009

29 commenti

Post espandibili su Blogger

Scrivo questo post per rispondere alla domanda di Den:

Iole, come hai fatto a scrivere solo la prima parte dell'articolo nella home-page e far leggere il resto cliccando su "Read More", senza aprire una nuova pagina?

riferendosi a questo mio blog di prova.

In realtà io non ho fatto niente! Il template utilizzato su quel mio blog di prova mi è stato inviato da Francesca (quando mi aveva chiesto di realizzarle uno script per stampare i post di Blogger) e nel codice html era già presente lo script per i post espandibili.

Lo script era disponibile a questo indirizzo:

http://www.anniyalogam.com/widgets/hackosphere.js
dopo poche settimane però non risultava più valido.

Ho sostituito allora lo script con quello presente sul blog di Valentina; anche sul suo blog i post espandibili non vengono aperti in una nuova finestra ma visualizzati nella stessa pagina.

Tenebrae ha scritto ben due post su come realizzare i post espandibili su Blogger; ecco i link:


cliccando però su "leggi tutto..." si apre il post una nuova pagina.

Con questo script invece cliccando su "Read More..." compare il resto del post (senza aprire una nuova pagina) ma semplicemente rendendo visibile quella parte di post nascosta.

Ecco le operazioni di fare per questa modifica: andate in Blogger, Modifica HTML e cliccate su Espandi i modelli widget.
Poi inserite lo script dopo il tag <head>:

<script src='http://digilander.libero.it/iolecalblogspot/script/script_postesp.js' type='text/javascript'/>

Poi trovate il codice

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

e sostituitelo con:

<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='&quot;javascript:showFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='&quot;javascript:hideFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;)</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

e salvate il modello. Poi andate in Impostazioni -> Formattazione e in Modello post inserite questo codice:

Inserisci il sommario qui
<span id="fullpost">
Inserisci il resto del post qui
</span>

Salvando le impostazioni, quando proverete a scrivere un nuovo post l'editor apparirà così:

editor

al posto "Inserisci il sommario qui" dovrete scrivere la parte che sarà visibile nel post e al posto di "Inserisci il resto del post qui" il resto del post (che sarà visibile cliccando su "Read More...").


23 giugno 2009

12 commenti

Come aggiungere le icone dei social network nel blog

Come richiesto ieri da Piero, ecco le semplici istruzioni per inserire nel proprio blog le icone dei social network con AddThis

Basta collegarsi al sito AddThis, selezionare la piattaforma del proprio blog (Blogger, Wordpress, ecc) e lo stile del bottone da visualizzare:

Blog service

Button style

Analytics

Infine basta cliccare sul pulsante Get the button e copiare il codice html generato. Per visualizzare il pulsante AddThis alla fine di ogni post, basta andare in Modifica Html e incollare il codice html subito dopo la riga di codice <div class='post-footer'>

Sono presenti anche altre toolbox al seguente indirizzo.

Sempre su richiesta di Piero, per aggiungere il pulsante per votare il post su OKNOtizie potete aggiungere questo codice:

<a expr:href='&quot;http://oknotizie.alice.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='vota su OKNotizie' border='0' src='http://www.iolecal.it/blog/posts/post094/oknotizie.gif'/></a>

dopo la riga di codice <div class='post-footer'>


22 giugno 2009

47 commenti

Come stampare i post di Blogger: nuovo script per stampare anche il titolo e il link del post

Come ricorderete qualche mese fa su richiesta di Francesca ho pubblicato il post Come stampare i post di Blogger: le funzioni javascript realizzate erano specifiche per il suo blog, nel senso che consentivano di stampare una ricetta (ossia solo una parte del post) oppure tutto il post.

Qualche giorno fa ho ricevuto una richiesta da Piero relativa allo script per la stampa dei post:

volevo chiederti se era possibile far stampare anche il titolo e il link del post

Ovviamente la risposta è !!!

Ecco quali modifiche bisogna apportare al template e quale funzione javascript utilizzare. Ovviamente le funzioni realizzate nel post Come stampare i post di Blogger continuano ad essere valide.


17 giugno 2009

11 commenti

Come inserire un sondaggio in un post

Qualche settimana fa Vincenzo mi aveva chiesto come inserire un sondaggio all'interno di un post... Ieri sera la stessa domanda mi è stata fatta da Piero... ed eccomi qui a spiegarvi come ho fatto io ad inserire il sondaggio nel post Sondaggio: Quale browser usi?. Non so se esiste un modo più semplice, comunque quello che sto per spiegarvi non è molto complesso.

Per prima cosa andate in Blogger -> Layout e cliccate su Aggiungi un gadget (nella sidebar o nel footer).
Dalla finestra che si apre cliccate su Sondaggio:


Apparirà allora la finestra per la creazione del sondaggio:



occorre compilare i campi:

  • Domanda: a quale domanda dovranno rispondere i vostri lettori
  • Risposte: tutte le possibili risposte. Di default sono quattro, per aggiungerne delle altre basta cliccare su Aggiungi altra risposta in fondo alla lista delle domande. Inoltre cliccando sulla checkbox si può consentire o meno la selezione di più risposte
  • Data e ora di chiusura del sondaggio: che rappresenta il termine entro cui votare.

Infine cliccate su Salva e ricaricando il blog vedrete il sondaggio nella sidebar o nel footer. Basta ora prendere l'html del blog (in Internet Explorer basta cliccare con il pulsante destro del mouse e selezionare HTML dal menu contestuale, in Firefox, Chrome e Opera basta cliccare Ctrl+U) e trovare il titolo del sondaggio.

Ad esempio il codice html del mio sondaggio di prova è il seguente:

<h2>Titolo del sondaggio</h2>
<iframe allowtransparency='true' frameborder='0' height='180' name='poll-widget1469564955766376106' src='http://www.google.com/reviews/polls/display/1469564955766376106/blogger_template/run_app?hideq=true&purl=http%3A%2F%2Fprovediiolecal.blogspot.com%2F' style='border:none; width:100%;'></iframe>

Per intenderci il sondaggio inizia per <h2>Titolo del sondaggio</h2> e termina con </iframe>

Vi basta ora copiare questo codice html e inserirlo in un post nel blog.
E' possibile anche lasciare lo stesso sondaggio nella sidebar... in questo modo pubblicando altri post, quello contenente il sondaggio potrebbe non essere facilmente notato dai visitatori del blog mentre lasciandolo anche nella sidebar potrete attirare più facilmente l'attenzione dei vostri lettori.

Per inserire il sondaggio nel post Sondaggio: Quale browser usi? io ho fatto queste operazioni... se qualcuno di voi conosce un metodo migliore lasci pure un commento, potrebbe essere utile agli altri e a me molto presto (ho intenzione di fare un nuovo sondaggio, ma non c'entra niente con l'informatica).

Vi ricordo inoltre che potete ancora partecipare al Sondaggio: Quale browser usi? (scade il 12 luglio).


16 giugno 2009

14 commenti

Come personalizzare il titolo dei post in base alle etichette

Scrivo questo post per rispondere ad una richiesta di butterfly.23:

volevo chiederti se posso far apparire in ogni post un link diverso che cambia in base all'etichetta...

Ho creato allora uno script che permette di personalizzare il titolo di ciascun post in base all'etichetta associata. Basta apportare delle piccole modifiche al codice html del template.
Potrebbe essere utile per chi ha un blog multi-argomento e quindi colorare il titolo dei post di un determinato argomento in modo diverso da quelli relativi ad altri argomenti.

Per capire come funziona potete vedere questo mio blog di prova, dove ho testato lo script. I tre post presenti hanno ciascuno il titolo di un colore diverso, in base all'ultima etichetta. Lo script infatti permette di associare a ciascuna etichetta un particolare stile (colore, font, sfondo, bordi, ecc). Se un post però ha più etichette, il titolo assumerà lo stile associato all'ultima etichetta.


11 giugno 2009

39 commenti

Sondaggio: Quale browser usi?

Oggi ho deciso di proporre a voi lettori questo sondaggio perché è da un mese circa che un mio lettore mi contatta segnalandomi che con Internet Explorer 8 il mio blog da quest'errore, impedendone l'apertura della pagina.

errore internet explorer

In effetti ho notato nell'ultimo mese che le visite (che già non erano tantissime) sono calate notevolmente, forse perché in molti usano Internet Explorer 8.

Questo stesso errore lo avevo notato tempo fa visitando il blog di Amsis quando aveva introdotto Lightbox. Entrambi pensavamo fosse un problema di conflitto tra gli script del blog; infatti sostituendo Ligthbox con Lytebox non ha avuto più questo problema.

Quando mi è stato fatto notare che anche il mio blog dava errore, per prima cosa ho eliminato lo script di Lytebox... ma l'errore continuava ad esserci. Poi man mano ho eliminato tutti gli script ma senza successo. Alla fine ho rimesso tutto com'era... e giorno per giorno il mio lettore mi contatta segnalandomi se il blog va o non va. La cosa strana è che l'errore non sempre compare.

Vi chiedo quindi di partecipare al sondaggio e eventualmente di lasciare un commento se anche voi avete difficoltà ad accedere al mio blog e con quale browser!

Grazie!

Che browser usi?




8 giugno 2009

39 commenti

Come usare Lytebox nel blog

Tempo fa ho pubblicato un post su Lytebox, un utilissimo script per visualizzare in modo professionale le immagini sul proprio blog.

In molti mi avete contattata perché avevate difficoltà nell'integrare Lytebox nel vostro blog... forse sul sito ufficiale non sono abbastanza chiari i pochi passi da seguire, e cioè scaricare Lytebox v3.22, scegliere uno tra i cinque diversi temi offerti (grigio, giallo, verde, rosso e blu), caricare online le immagini del colore desiderato, modificare i file lytebox.css e lytebox.js e caricarli online.

In molti però avete trovate queste operazioni troppo complesse... ho deciso quindi di caricare online tutte le immagini, modificare i file css e js per ogni tema e rendere disponibile il codice html da inserire nel blog.
Dovete solo scegliere il colore, copiare il codice e incollarlo prima del tag </head> (in Modifica html):


2 giugno 2009

189 commenti

Bandierine per Google Translate Widget

Google Translate WidgetQualche mese fa ho pubblicato il post Come inserire Google Translate Widget nel blog, che consentiva di tradurre il proprio blog in sole quattro lingue: Greco, Inglese, Francese e Tedesco.

Vi avevo promesso che (prima o poi) averi pubblicato il codice html per tradurre il blog in altre lingue.

Ed ecco che finalmente sono riuscita a mantenere la promessa fatta!!!
Di seguito trovate il codice html da utilizzare per tradurre il blog in ben 23 lingue diverse.


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