menu con barra laterale

Un menu a lato che porti via poco spazio grazie alla barra laterale scorrevole, può servire.

Questo il risultato:

Il Cibo Medicina
Omeo Cura di sè
E io mi faccio il blog!
la strada, la vita... cta
Panther & Fiorella's Reiki
1pensiero
caty-la casa sull'albero
cohoba
blogenciclopedico
solo-sms-gratis
scambiolink
Il mio Naufrago Preferito
appunti sparsi di ilaron
Boanerges Mc. 3,17

Questo il codice:
<div style="height: 220px; overflow: auto; width: 260px;">
<a href="http://cibo-medicina.blogspot.com/">Il Cibo Medicina</a><br />
<a href="http://omeo-cura.blogspot.com/">Omeo Cura di sè</a><br />
<a href="http://stocblog.blogspot.com/">E io mi faccio il blog!</a><br />
<a href="http://fos-ilaron.blogspot.com/">la strada, la vita... cta</a><br />
<a href="http://panther-fiorella-reiki.blogspot.com/">Panther &amp; Fiorella's Reiki</a><br />
<a href="http://1pensiero.splinder.com/">1pensiero</a><br />
<a href="http://caty-lacasasullalbero.blogspot.com/">caty-la casa sull'albero</a><br />
<a href="http://cohoba.blogspot.com/">cohoba</a><br />
<a href="http://www.blogenciclopedico.blogspot.com/">blogenciclopedico</a><br />
<a href="http://solo-sms-gratis.blogspot.com/">solo-sms-gratis</a><br />
<a href="http://scambiolink.blogspot.com/">scambiolink</a><br />
<a href="http://sleepwalker-undercoverman.blogspot.com/">Il mio Naufrago Preferito</a><br />
<a href="http://sites.google.com/site/fosilaron">appunti sparsi di ilaron</a><br />
<a href="http://ilaron.altervista.org/wordpress/index.php/">Boanerges Mc. 3,17</a></div>

Indicazioni:
In arancio è evidenziato l'url del mio link; in lilla è evidenziato il testo che voglio far vedere nel menu.
Vale ovviamente per tutti gli url e per tutti i testi della lista.
Con height e width si può modificare l'altezza e la larghezza del menu.


RISORSE:
HTML 4.01. La guida tascabile al linguaggio di programmazione

Menu a tendina

Il Menu a tendina, o a scomparsa, può essere utile per risparmiare spazio.
Nella mia barra di destra c'è un Menu di prova, eccolo:

- Cerca qui... ......- Migliorare pc e programmi Fare il blog Vuoi dimagrire? Conosci l'omeopatia? La mia Strada

Cliccando sulla freccetta si apre una "tendina" che permette di scegliere un'opzione.

Questo il codice
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">
<option>- Cerca qui... ......-
</option>
<option value="http://stocblog.blogspot.com/search/label/Fare%20il%20blog">Migliorare pc e programmi
</option>
<option value="http://stocblog.blogspot.com/search/label/Fare%20il%20blog">Fare il blog
</option>
<option value="http://cibo-medicina.blogspot.com">Vuoi dimagrire?
</option>
<option value="http://omeo-cura.blogspot.com">Conosci l'omeopatia?
</option>
<option value="http://fos-ilaron.blogspot.com">La mia Strada
</option>
</select>
</form>

Dunque:
Evidenziato in arancio ho messo testo semplice, quasi un titolo, è in testa all'elenco, non contiene link.
Evidenziate in giallo ci sono le voci che verranno mostrate nel menu, tu devi mettere le tue.
Evidenziati in verde invece sono i link che porteranno al sito (o da qualche altra parte...) e tu devi mettere i tuoi indirizzi.

Non c'è da spaventarsi per la combinazione "%20", sta a indicare lo spazio tra due parole in HTML.

[Come mettere questo codice in sidebar?
Usare Bacheca, Layout, Aggiungi un gadget, HTML/JavaScript]

NB- ho già scritto un post simile ...  questo mi sembra più facile da capire grazie agli evidenziatori.

Bottone per la stampa di un post

Vorrei poter offrire ai miei lettori la possibilità di stampare un singolo post...
Non voglio però usare i diversi script che ho trovato in rete.
Perchè?
Perchè dipenderei sempre da essi e da dove essi sono "alloggiati".
E allora?

Beh, esiste Print Friendly, un sito che offre un tale servizio, disponibile per piattaforma Blogger, Wordpress e anche per siti.


E' facile da fare anche se si deve mettere mano al codice del blog.
Basta seguire le indicazioni di creareblog che, non solo mi ha fatto conoscere PrintFriendly ma ha apportato una correzione importante al codice, secondo me.
Merito doppio quindi!


Però dipendo da PrintFriendly... Vabbè, non si può avere tutto.

newbie ;)
P.S.-E' ovvio che l'ho messo in tutti i miei blog.

45-migliorare l'orientamento della sidebar

Già in questo post ho orientato gran parte della sidebar a destra ma, come dicevo lì, non tutto è ancora a posto: non mi garbano Informazioni personali, Archivio blog, il counter di Bravenet.
Ad esempio la foto delle informazioni personali è spostata completamente a destra e l'archivio...

Procedo così:
Devi premettere che il mio modello, il modello di questo blog, è Herbert.
Faccio il login a Blogger, clicco il link Design in alto a destra, mi sposto nella tab Modifica Html, espando i modelli widget, cerco nel codicei seguenti pezzi:

.BlogArchive #ArchiveList {

 float: $endSide;

}

Sostituisco end con start.

Molto bene. L'archivio blog è ora Ok.

---

Ora cerco:

/* Profile

----------------------------------------------- */

.profile-textblock {

  clear: both;

  margin-$startSide: 0;

}

.profile-img {

 margin-top: 0;

 margin-$endSide: 0;

 margin-bottom: 5px;

 margin-$startSide: 5px;

 float: $endSide;

}

Sostituisco both con none.
Sostituisco margin-$endSide: 0; con margin-$endSide: 5px;
Sostituisco margin-$startSide: 5px; con margin-$startSide: 0px;
Sostituisco end con start.

Ora la foto e il testo, attorno ad essa, sono perfetti!

---

Poi cerco:


  div#sidebar {

    width: 30%;

    float: $endSide;

    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */

  }

Sostituisco end con start.
Questa modifica allinea a sinistra il testo di Lettori Fissi che prima era centrato.

---

E infine cerco:

.#sidebar .widget {

  clear: both;

}

Dopo clear: both aggiungo float: left; che non c'era per nulla. 
Questo raddrizza il counter di Bravenet!

---

Che soddisfazione!
Mi commento da sola: "Ma non potevi sceglierti un altro modello 'che facevi prima?"

newbie ;)

43-fare commenti al codice nel codice

Ho constatato un modo per fare i commenti al CODICE:
1) <!--  .,.,.,.,.,., //-->

veramente ho visto anche la chiusura semplicemente così  -->.

Facciamo la prova
Se nella tab Modifica HTML io copio il seguente codice (codicetto! proprio per fare l'esempio...):

<!-- adesso inserisco un link   //-->

<a href="http://cibo-medicina.blogspot.com/">Il Cibo Medicina</a>

<!-- qui finisce il mio link  //-->

Il RISULTATO nella tab Scrivi è:
Il Cibo Medicina
Giustamente: sono stati tralasciati i commenti, ed è stato interpretato il link!

Sembra una cosa da poco, invece è utilissimo se si scrive molto codice e c'è necessità di identificare velocemente a cosa corrisponde quella parte di codice.
Esempi semplici: qui finisce l'header, qui inizia il wrapper, qui finisce il wrapper, qui inizia la sidebar, ecc.
Ancor più utile se abbiamo aggiunto codice di terze parti, non proprio di Blogger, oppure stiamo facendo degli esperimenti.

---

In verità ho trovato anche il seguente modo per fare commenti dentro al codice:

2) /* .,.,.,., */

ma qui non funziona. Non so il perchè, penso dipenda da diversi linguaggi. Provare. E se qualcuno ce lo spiega, grazie!
newbie ;)

42-i post più letti

Ora Blogger ha messo a disposizione un gadget per "i post più popolari". Prima bisognava ricorrere a degli script. Eccone uno messo a disposizione da il sito blu.
Vai al tuo blog, loggati, crea un nuovo gadget di tipo HTML/Javascript. Inventa un titolo accattivante "letti e piaciuti", "the best", "indimenticabili", ecc. da inserire nella prima casella di immissione. Poi, sotto, incolla il seguente codice:

<script type="text/javascript">

start_views_num = 1;

limit = 5;

</script>

<script src="http://www.ilsitoblu.com/lacameradeiblog/script/piuvisti/piuvisti.js" type="text/javascript"></script>

Questo gadget si può modificare agendo sui numeri evidenziati. Il primo permette di scegliere il numero di visualizzazioni che il post deve aver avuto per poter comparire nel gadget. Il secondo indica quanti post saranno elencati nel gadget.

Lo script sembrerà non funzionare per qualche tempo, in realtà è necessario che i post vengano letti da qualcuno prima che possano apparire in questo gadget.
newbie ;)

41-creare un proprio "commenti"

Ho trovato questo codice nel post di giovedì 31 maggio 2007 su welcometojackass.blogspot.com. Il blog ora non esiste più...
Serve per creare un proprio "commenti" nel footer di ogni post.

Allora:  in fondo ad ogni post accanto ad autore, data e ora di pubblicazione, c'è il link ai commenti.

La parola "commenti" ti sembra neutra, insipida? Ebbene la puoi sostituire con un'altra o con una frase intera che dia un tocco personale al tuo blog. Ad esempio: "Chi mi commenta", "Altre opinioni", "Aggiungi il tuo parere", ecc.
Nel mio blog Omeo Cura di Sè sono riuscita in questo intento e qui a lato puoi vederne uno screen capture. Come si fa?
Vai al tuo blog, loggati, clicca sul link in alto a destra NUOVO POST, nella pagina che si apre vai alla tab DESIGN, sottotab MODIFICA HTML e cerca questo spezzato di codice:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Io lo trovo a circa metà del mio html.
E sostituiscilo con il seguente:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>COMMENTA QUESTO POST, DIMMI COSA PENSI! (<data:post.numComments/>)<b:else/>COMMENTA QUESTO POST, DIMMI COSA PENSI! (<data:post.numComments/>)</b:if></a>
</b:if>
</b:if>
</span>

Negli spazi evidenziati in giallo scrivi ciò che vuoi.
Salva il template e pubblica. Se sei fortunato, ora puoi vedere la tua frase d'effetto al posto dell'asettico "commenti" e il numero dei commenti appare fra parentesi alla destra (non alla sinistra come prima).
Se invece non sei fortunato, io mi tappo le orecchie mentre tu mi mandi accidenti. Ti sei ricordato di fare un backup del modello prima di modificare il codice?

PRESTA ATTENZIONE
Dal 2007 al 2010 forse è cambiato qualcosa... a me il codice non risulta come quello scritto da Jackass, il mio è così:


<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

Come puoi vedere c'è una riga in più (e una chiusura in più). Però mi è bastato copiare da <a class ad </a> lasciando inalterato il resto. Se tu hai un codice diverso, ragionaci un po' prima di agire...
A proposito, ti piace la mia frase un po' lecca lecca?
newbie ;)

40-fare un indice dei post per categorie

Per fare un Indice per categorie (o per etichette, tag), segui le istruzioni del post precedente. La procedura è la stessa, cambia soltanto il codice da inserire. Questo:

<script style="text/javascript" src="http://sites.google.com/site/creareblog/script-blog/blogtoc-min.js?attredirects=0"></script>

<script src="http://indirizzo blog/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Ora i tuoi lettori potranno consultare un indice per categoria. Sotto ogni etichetta troveranno i post che tu hai taggato in quel modo e lo stesso post potrà comparire sotto più etichette (sempre se tu lo hai indicizzato con più tag).
NB - indicizzazione, etichettatura, taggatura, sono sinonimi.
newbie ;)

39-fare un indice dei post per data

Sempre grazie a CreareBlog sono riuscita a fare un Indice per data. Lo puoi vedere in questo blog, appena sotto l'intestazione, nella sezione PAGINE.
Ne vuoi fare uno ache tu? E' facile!

Vai al tuo blog, clicca in alto a destra il link ENTRA, fai il login, clicca il link NUOVO POST, clicca la terza sottotab MODIFICA PAGINE, clicca il bottone azzurro NUOVA PAGINA.
La schermata che si apre assomiglia a quella ben conosciuta dei post. Inserisci il titolo di pagina nella prima casella di immissione (io ho scelto "Indice per data"); poi nel corpo della pagina inserisci il codice riportato qui sotto. Abbi cura di posizionarti nella tab MODIFICA HTML e controlla in OPZIONI POST (link in azzurro), la terza sezione IMPOSTAZIONI DI COMPOSIZIONE: seleziona il radio button MOSTRA HTML LETTERALMETE.
Ora copia e incolla questo codice:

<script src="http://sites.google.com/site/creareblog/script-blog/tocbyarchivemin.js?attredirects=0">

</script>

<script src="http://indirizzo blog/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">

</script>

La parte evidenziata in giallo deve contenere l'indirizzo del tuo blog.
Infine clicca il bottone arancio PUBBLICA PAGINA e nella schermata successiva clicca il link azzurro VISUALIZZA PAGINA.

Fatto! Ci vuole qualche minuto affinchè si possa vedere la lista di tutti i post pubblicati. A me è accaduto che Blogger dica "Pagina non trovata" ma è bastato ripubblicare per sistemare le cose.

Perchè fare un indice per data?
Un indice per data forse interessa poco il visitatore ma è molto utile a chi scrive. Infatti esso, restituendo in ordine cronologico tutti i post pubblicati, permette di trovare, controllare, ricordare e aggiornare il proprio lavoro.
E' vero, esiste una ricerca blog e la "taggatura", ma la prima vuole parole esatte per portare al post voluto (non sempre ci si ricorda il titolo...), mentre la seconda è lenta e può essere necessario sondare più di una tag prima di trovare il contenuto cercato.
perciò a me garba. Ciaoooo.
newbie ;)

37-orientare la sidebar

Questo modello prevede la sidebar di dx orientata a dx. A me non piace, mi dà un'impressione di disordine. Allora cerco di orientarla a sx. Faccio così:

Vado al mio blog, clicco il link Design in alto a dx. Clicco Modifica Html. Seleziono la casellina Espandi modelli widget. Cerco il seguente codice:

div#sidebar-wrapper {
    margin: 0px;
    padding: 0px;
    text-align: $endSide;
  }

Presto attenzione a $endSide e sostituisco la parolina end con start. Il codice adesso è così:

div#sidebar-wrapper {

    margin: 0px;

    padding: 0px;

    text-align: $startSide;

  }

Clicco il pulsante arancio SALVA MODELLO e poi il link celeste Visualizza blog.
Bene! Già questa sola modifica ha portato la sidebar a posizionarsi sulla sx!

Non ho risolto però tutto: devo ri-allineare la chatbox (fatto!) e il contatore di Bravenet (non si lascia allineare...).
newbie ;)

35-verificare il blog in MBL

Perchè verificare?
Beh, vai alla pagina WHY VERIFY? e affaticati a leggere un po' di inglese! A parte gli scherzi, la verifica certifica che sei proprio tu l'autore del blog.
Bene.
Dalla pagina WHY VERIFY? (http://www.mybloglog.com/buzz/comm_verify.php) dovresti vedere che il tuo blog non è ancora verificato (pending verification).
Clicca sul link Click here to verify.
Nella pagina che si apre scegli l'opzione 1, copiane il codice e incollalo in un post a sè del tuo blog (attenzione: deve essere html "crudo, grezzo" cioè devi scriverlo nella tab HTML e non nella tab SCRIVI) e pubblicalo.
Dopo aver fatto ciò ritorna alla pagina WHY VERIFY? e clicca il bottone grigio AUTHENTICATE.
Se tutto va a buon fine loro ti scrivono SWEET! Hai appena verificato il tuo blog.
Puoi rimuovere il post dedicato perchè non serve più.
Clicca sul link Continue: la pagina che si apre è quella della tua community, c'è la thumbnail del tuo blog e, accanto al titolo, ora c'è un segno di spunta verde che prima non c'era!

Se non è possibile inserire un post (ad esempio in un sito statico), c'è la seconda opzione: inserire un META tag nella sezione <head>. L'ho fatto per verificare il mio sito sentiero hostato presso bravehost.
Però nei vecchi siti .googlepages.com non era praticabile nemmeno la seconda opzione poichè non c'era accesso all'html della sezione di testa. E così tutti i miei lavori hanno il segno di spunta verde tranne uno... uffa!

MyBlogLog è molto ricco. Ci sono tante altre cose... Resta importante conoscere e farsi conoscere. Pian piano si fa amicizia, si va a far visita agli altri Bloggers, ci si iscrive alle community, altri si iscrivono alla nostra. Si conoscono blog simili al nostro e blog completamente all'opposto, circolano le idee e le diverse visioni del mondo e della vita. Si cresce insieme. Bello!
newbie ;)

27-scrivere codice: e 3!

Qui sotto ci sono degli esempi di codice. Perchè sono visibili? Non sto usando una textarea (vedi post precedente).
Esempio 1: si vede l'html dei link
<a href="http://omeo-cura.blogspot.com" >Omeo Cura</a>
<a href="http://sites.google.com/site/fosilaron/"> Appunti sparsi di ilaron</a>
<a href="http://ilaron.altervista.org/wordpress/index.php" > Boanerges - Mc 3, 17</a>
<a href="http://sentiero.bravehost.com/" >Sentiero</a>
<a href="http://fos-ilaron.blogspot.com/" >la strada, la vita... cta</a>

Esempio 2: si vede il codice di cbox
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: right; line-height: 0pt;">
<div><iframe src="http://www5.cbox.ws/box/?boxid=627719&amp;boxtag=53s414&amp;sec=main" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxmain" style="border: 1px solid rgb(219, 226, 237);" id="cboxmain" width="200" frameborder="0" height="305" scrolling="auto"></iframe></div>
<div><iframe src="http://www5.cbox.ws/box/?boxid=627719&amp;boxtag=53s414&amp;sec=form" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxform" style="border-style: none solid solid; border-color: -moz-use-text-color rgb(219, 226, 237) rgb(219, 226, 237); border-width: 0px 1px 1px;" id="cboxform" width="200" frameborder="0" height="75" scrolling="no"></iframe></div>
</div>
<!-- END CBOX -->

---

Ebbene... c'è una opzione nell'editor dei post che permette di mostrare il codice:
Clicca su Opzioni post, lo trovi appena sopra il bottone arancio PUBLICA POST. Cerca le Impostazioni di composizione, ti vengono offerte due possibilità:

Interpreta HTML digitato
Mostra HTML letteralmente

Seleziona la seconda, ed è quasi fatta!
Quasi perchè devi avere l'accortezza di scrivere (o copiare) il codice in modalità Scrivi: allora esso, alla visualizzazione Anteprima comparirà tale e quale.
Se trascrivi il codice in modalità Modifica HTML, alla visualizzazione Anteprima esso verrà interpretato e ne vedrai gli effetti.

Infatti Esempio 1: si vede l'html dei link è l'effetto del seguente codice: <b>Esempio 1: si vede l'html dei link</b>  scritto in modalità Modifica HTML.
Lo stesso codice scritto in modalità Scrivi rimane tale e quale.

I due codici di esempio, se scritti in modalità HTML, restituiscono:
l'elenco dei link
la chatbox vera e propria (come si vede in sidebar).
Provare per credere.

PS- se penso a quanta fatica ho fatto per capire, e a quanto tempo ho dedicato per trovare! ... mentre la soluzione era a portata di mano. Neanche nei forum avevo letto di questo...
newbie ;)

26-scrivere codice in una textarea

Esempio 1

<a href="http://fos-ilaron.blogspot.com" />la strada, la vita... cta </a>

In questo post  descrivo come scrivere del codice che non venga interpretato dal browser ma che venga mostrato come esempio o studio.
Beh. C'è un altro modo (e forse altri che ancora non conosco...) per fare ciò ed è veramente semplice: usare una textarea. Qui sopra c'è l'esempio 1: l'html del link al mio blog principale.
Se questo codice viene scritto fuori dalla textarea restituisce il semplice link: la strada, la vita... cta

Esempio 2

<textarea cols="46" rows="2"><a href="http://fos-ilaron.blogspot.com" />la strada, la vita... cta </a>

Se ora anche tu vuoi scrivere una textarea, devo mostrarti il codice della textarea... E come faccio? Annidandolo! Cioè metto la textarea dentro ad un'altra textarea. L' esempio 2 mostra a te il codice di una textarea mentre io ne uso una annidata.

Puoi osservare l'attributo cols (sta per colonne) e l'attributo rows (sta per righe); i numeri indicano rispettivamente la quantità di caratteri e la quantità delle righe dentro alla textarea. Se il testo supera le dimensioni della textarea, compare a destra una barra di scorrimento. I numeri li metti a seconda delle tue necessità, provando un po'.

Esempio 3
<textarea cols="26" rows="1"><a href="http://fos-ilaron.blogspot.com" />la strada, la vita... cta </a>

Il codice va scritto in modalità MODIFICA HTML. Poi in modalità SCRIVI potrai ammirare il tutto, tranne per i caratteri < e > che vedrai comparire così: & l t ; e & g t ; 
Non ti spaventare, sei sulla strada giusta! Vai in modalità ANTEPRIMA per vedere esattamente come sarà pubblicato il tuo codice.

newbie ;)

24-link su una immagine

E se volessi linkare il mio blog a un piccolo banner?
Prenderò il 5° link per fare ciò usando img e scr e alt.
Mi creo un banner, oppure lo prendo dal web, di misure 88 x 31 (è piccolino, carino)
Lo carico su un servizio di hosting per immagini (Flickr, Picasa, Imageshack, Altervista ...) che mi dia un hot link (cioè il link diretto alla mia immagine hostata). Prelevo l'hot link copiandolo negli appunti o in un file di servizio (usare notepad, un editor di testo semplice).

Questo è il codice di partenza:
Ad esso aggiungerò:

<a href="http://fos-ilaron.blogspot.com/" >la strada, la vita... cta</a><br />

• alt (visualizza il testo alternativo, descrittivo dell'immagine)
• img (sta per image, immagine)
• src (significa source, cioè origine)
• ci aggiungo anche title perchè questo modello fa le bizze...
• border (il bordo dell'immagine, e può essere 0 [senza bordo] o 1 [con bordo])
• height (la larghezza dell'immagine, è utile al browser)
• width (l'altezza dell'immagine, è utile al browser)

Ecco il codice finale:
Senza addentrarci troppo nel linguaggio HTML, possiamo capire che:

<a href="http://fos-ilaron.blogspot.com/"
<img alt="la strada, la vita... cta" title="la strada, la vita... cta" border="0" height="31" width="88" src="http://mdwxmw.bay.livefilestore.com/y1p9ugN1SRmnFYUBPFl0yl9Nw9GzxwXJiyFOFHTZe15gtW3eTzvlfwzxG1ovl0lRhiD59OzT5nuPSnge1S0HfU8pA/bot_am_cta1.bmp" /></a>

a href indica il link alla pagina dove andremo.
img indica le proprietà dell'immagine che stiamo per caricare: larghezza, altezza, bordo, titolo, testo alternativo.
src indica il link in cui è ospitata l'immagine che qui vogliamo richiamare, qui va incollato l'hot link di cui ho parlato sopra.
Non spaventarti per la lunghezza di questo link: è windows skydrive che dà link così complicati (altri servizi danno link più brebi e semplici) ma, dovendolo semplicemente incollare, non può complicare la vita...
Il risultato è in sidebar.
newbie ;)

23-ancora link-title

Sarebbe carino se, passando sopra con il mouse, i nostri visitatori avessero una breve descrizione del link al quale li stiamo indirizzando. Forse, sapendo in anticipo di cosa tratta la pagina linkata, sarebbero più invogliati a cliccare e a leggerla...

Fai riferimento al post precedente. Segui l'ultimo metodo descritto per fare i link. Ti ricordo che devi essere dentro un widget HTML/JAVASCRIPT.
Il codice dei miei primi 5 link è il seguente:

<a href="http://omeo-cura.blogspot.com" >Omeo Cura</a>
<a href="http://sites.google.com/site/fosilaron/"> Appunti sparsi di ilaron</a>
<a href="http://ilaron.altervista.org/wordpress/index.php" > Boanerges - Mc 3, 17</a>
<a href="http://sentiero.bravehost.com/" >Sentiero</a>
<a href="http://fos-ilaron.blogspot.com/" >la strada, la vita... cta</a>

Ora, se voglio aggiungere una descrizione devo usare title="scrivo qui la mia descrizione" dopo le virgolette di chiusura di href.
Esempio per il primo link:
<a href="http://omeo-cura.blogspot.com" title="L'omeopatia può essere una strada alternativa alla cura di sè. Cercare di migliorare la tua salute: non si può fare a meno della medicina allopatica ma possiamo tentare di abbassare la quantità di farmaci tradizionali che, è noto, portano molti effetti collaterali all'organismo. Leggi questo blog e contribuisci con la tua esperienza personale!">Omeo Cura</a>

Pubblica. Se con il mouse vai sopra omeo-cura, apparirà un riquadro giallo riportante proprio la descrizione che ho inserito.
Ma non è finita: avrai notato che i link si mettono in fila, uno dopo l'altro. Per mandarli a capo devi inserire questo tag <br /> alla fine di ogni link.

L'aspetto finale del codice che dovrai inserire sarà simile a questo:

<a href="http://omeo-cura.blogspot.com" title="L'omeopatia può essere una strada alternativa alla cura di sè. Cercare di migliorare la tua salute: non si può fare a meno della medicina allopatica ma possiamo tentare di abbassare la quantità di farmaci tradizionali che, è noto, portano molti effetti collaterali all'organismo. Leggi questo blog e contribuisci con la tua esperienza personale!" >Omeo Cura</a><br />
<a href="http://sites.google.com/site/fosilaron/"> Appunti sparsi di ilaron</a><br />
<a href="http://ilaron.altervista.org/wordpress/index.php" > Boanerges - Mc 3, 17</a><br />
<a href="http://sentiero.bravehost.com/" >Sentiero</a><br />
<a href="http://fos-ilaron.blogspot.com/" >la strada, la vita... cta</a><br />
PS- non è necessaria una descrizione così lunga, anzi te la sconsiglio. Il tempo di visualizzazione del riquadro giallo è breve e il visitatore è costretto a ripassare più volte sopra con il mouse per finire di leggere.
newbie ;)

22-fare i link-a href

Cosa sono i link? Sono dei comodi COLLEGAMENTI a qualcosa.

Scorazzando per il web avrai incontrato sicuramente dei blog che ti piacciono, avrai fatto amicizie con altri Blogger, avrai desiderio di collegarti velocemente a loro... Per fare questo ti serve una lista di link.
Ci sono diversi modi per farla.

Accedi al tuo blog. In alto a dx clicca su PERSONALIZZA. Sulla sidebar di dx clicca su AGGIUNGI GADGET. Ora puoi scegliere l'undicesimo gadget (ELENCO BLOG); esso però lavora con i FEED, a me non garba molto. Preferisco il dodicesimo (ELENCO DI LINK).
Allora clicca su esso.
La schermata che si apre presenta in testa una casella di inserimento per il titolo della tua raccolta di link: scegline uno carino, ad esempio: INTERESSANTI? oppure FACCIAMO SCAMBIO-LINK o ancora AMICI MIEI.
Prosegui lasciando vuota la casellina per il numero di link da mostrare. Nella terza casella di immissione puoi scegliere di ordinare i link dalla A alla Z o viceversa. Io preferisco la scelta di default, e cioè NON ESEGUIRE L'ORDINAMENTO, anche perchè desidero piazzare in prima posizione l'ultimo link (amico) che inserisco.
Nella quarta casella di immissione va messo l'URL = l'indirizzo esatto del blog (o di un sito, o di una semplice pagina web, ...):
ESEMPIO: http://fos-ilaron.blogspot.com
Nella quinta casella di immissione puoi mettere il nome del blog, o il suo titolo (o quello che vuoi tu):
ESEMPIO: la strada, la vita... cta

Ora clicca sul bottone celeste AGGIUNGI LINK.
Questa manovra
1-ti fa vedere l'inserimento del tuo primo link preceduto da due link di servizio: MODIFICA, ELIMINA
2-ti presenta altre due caselle di immissione pronte per il prossimo link.

Allora,
su URL NUOVO SITO scrivo: http://omeo-cura.blogspot.com
su NOME SITO NUOVO scrivo: Omeo Cura
E clicco il bottone celeste AGGIUNGI LINK
E così via...
Quando hai finito di inserire tutti i link che vuoi devi cliccare il bottone arancio SALVA. Ancora SALVA e poi il link celeste VISUALIZZA BLOG dentro al rettangolo arancio.

---

Anche il quarto gadget (HTML/JAVASCRIPT) ti permette una lista di link ma in questo caso devi fare tutto il lavoro a mano.

In modalità PERSONALIZZA clicca sulla sidebar a dx AGGIUNGI GADGET, nella finestra che si apre scegli il quarto gadget HTML/JAVASCRIPT.
Ti porta alla finestra di immissione del TITOLO (ne abbiamo parlato prima) e delle SEZIONI DEL SITO.
A destra vedi la scritta FORMATO RTF, se clicchi sopra comparirà MODIFICA HTML. Mettiti in quest'ultima situazione, cioè deve essere visibile la scritta FORMATO RTF.
Ora impara a memoria questo codice:
<a href="http://fos-ilaron.blogspot.com">la strada, la vita... cta</a>
Il risultato sarà: la strada, la vita... cta

<a href= è un tag del linguaggio HTML dove a sta per ancora, ancoraggio, mentre href è l'abbreviazione di Hypertext-Reference (cioè riferimento ipertestuale).
Tra le virgolette " " va l'URL del blog.
Il titolo del blog va tra  > e </a>

Altro esempio?
<a href="http://omeo-cura.blogspot.com">Omeo Cura</a>
Il risultato sarà: Omeo Cura
E' più facile a farsi che a dirsi. Good luck!

E come ho fatto a fare la linea divisoria? Te lo dico un'altra volta...
newbie ;)

21-un altro counter

Di counter ce ne sono a bizzeffe. Prova a cercare con Google...
A me piace farti conoscere Bravenet che non solo ha counter ma... di tutto (e in versione free)!

Vai a http://sentiero.bravehost.com/myrescueremedy.html , è la pagina di un mio sito.

Vai giù giù fino al footer (è il fondo), trovi un counter a forma di topolini, clicca sul link VIEW SITE STATS appena sotto ai topolini, ti manderà a una pagina che sulla sinistra ha un pulsantone GET YOUR OWN COOL HIT COUNTER FREE. Cliccalo e poi sulla pagina successiva clicca il bottone sulla destra GET YOUR HIT COUNTER IT'S FREE.
Ti viene chiesto di registrarti: JOIN BRAVENET. Compi la solita procedura seguendo le istruzioni. Quando potrai accedere al tuo account appena creato ti troverai nella tab WEB TOOLS e nella pagina COUNTER STATS, clicca sul link MANAGE COUNTERS e poi sul pulsante grigio CREATE A NEW COUNTER, inserisci un nome per il tuo counter (ti serve per non fare confusione se usi più counter, infatti Bravenet permette di avere fino a 3 counter nel piano Free), inserisci l'URL del tuo blog o sito.
Su COUNTER TYPE/STARTING NUMBER scegli HIT COUNTER, su COUNT OR IGNORE YOUR HITS scegli la prima opzione, infine clicca il bottone grigio SAVE SETTINGS.

Ora su MANAGE COUNTERS:

• metti YES per renderlo visibile
• clicca sulla piccola icona IMAGES per scegliere il tipo di counter (ce ne sono tantissimi, suddivisi in 6 categorie che a loro volta hanno delle sottocategorie. Io ho scelto questo dalla categoria THEMES e sottocategoria VARIOUS)
• scegli anche il STATISTICS BUTTON (ce ne sono molti per essere adattati al colore di sfondo dei blog o dei siti)

Quando torni alla pagina MANAGE YOUR EXISTING COUNTERS puoi finalmente prelevare il codice cliccando l'iconcina CODE (vicina a quella di IMAGES, per intenderci).
Solita tecnica: copia il codice usando CTRL+C, vai al tuo blog, clicca su PERSONALIZZA, in sidebar clicca su AGGIUNGI GADGET, scegli il quarto gadget HTML/JAVASCRIPT, scegli un titolo, incolla il codice con CTRL+V, SALVA e RI-SALVA, VISUALIZZA BLOG. Ora il tuo secondo counter è creato.
Io ho preferito mettere questo counter insieme all'altro (proprio sotto, nello stesso gadget, per risparmiare spazio).
Allora:
in PERSONALIZZA/sidebar non ho creato un altro elemento gadget bensì ho aperto quello esistente (Hey, vi sto contando!) e lì ho inserito il codice del secondo counter.
Bisogna prestare attenzione a incollare il nuovo codice sotto (o sopra) quello già esistente, senza pasticciare: basta che sparisca un simbolo per rovinare tutto.

Considerazioni:

• il counter di Bravenet è carino ma si posiziona a sinistra nella sidebar, contrariamente alle indicazioni del foglio di stile (o CSS) che dovrebbe comandarlo a destra come tutte le altre cose presenti (abbiamo già parlato di allineamento),
• ho cercato di forzarlo con tag come o
  
  ma non obbedisce,
• nella pagina di setting di Bravenet non ho trovato la possibilità di mandarlo a destra,
• e allora... me lo tengo così!

Anche la chat box era allineata al centro (leggi qui) ma poi sono riuscita a metterla a destra (leggi qui) .
C'è da dire che la chat box è un iframe, mentre il counter è uno script java, ma credo che il problema stia nel fatto che Bravenet non mi dà la possibilità di customizzare (personalizzare) il tool.

Potrei risolvere l'inestetismo allineando a sinistra tutta la sidebar? Vedremo.
newbie ;)

18-scrivere esempi di codice

E be'! Ne ho scoperta una di buona!!!
Questo è un post difficile, almeno per me, e forse non è molto sensato inserirlo qui, ora. Ma sono contenta perchè ho trovato una soluzione valida dopo tanto penare.
Infatti, per inserire codice mi sono ridotta a distanziare i simboli dell'html (vedi qui il mio innocente tentativo).
Un altro metodo è quello dello "screen capture" del codice facendolo diventare una immagine .jpg, poi essa va caricata su uno spazio di hosting e, prelevandone l'hot link (=link diretto, caldo), si inserisce finalmente nel post.
Questo è un esempio che ho usato fino a qualche settimana fa nel post addthis-condividere prima di correggerlo con l'inserimento diretto del codice:

E allora: come fare ad inserire in un post del codice  a titolo di esempio senza che il browser lo interpreti?
Ho guardato un po' in giro sui forum e in effetti è una cosa complicata... non basta far precedere il codice di esempio dalla tag
<code>
e chiuderlo con la tag
</code>
Bisogna anche convertire tutte le < in &lt; e tutte le > in &gt;
E se il codice è tanto, è veramente difficile non perderci la testa.

Bene!
Ho risolto con Wordpress! Io ho un blog in Wordpress e grazie al suo editor che permette il CODE, riesco a tradurre il codice in modo tale da trasportarlo poi in Blogger.
Ho fatto così:
Vado nel mio blog (in Wordpress) e clicco il META Amministra Sito. Nella pagina che si apre vado alla sezione ARTICOLI e clicco Aggiungi Nuovo. Sto molto attenta di essere nella tab VISUALE (non HTML) e inserisco il codice che voglio "tradurre". Passo alla tab HTML, evidenzio tutto il testo presente e poi clicco il pulsante CODE sulla barra di composizione. Ora il codice è pronto per essere trasportato in Blogger. Lo evidenzio tutto e poi con CTRL+C lo copio.
Passo a Blogger, nel mio post; devo essere nella modalità Modifica HTML (non modalità SCRIVI), e con CTRL+V incollo il codice.
Passando poi alla tab SCRIVI mi è pigliato un colpo! perchè non ho visto il codice come me lo aspettavo... E' bastato però cliccare ANTEPRIMA e tutto si è rivelato perfetto!
E così ho anche capito che Wordpress e Blogger lavorano in modo diverso (era ovvio..).

Certo: per chi non ha Wordpress il mio trucchetto non può essere utile. Io però mi sono tolta una bella soddisfazione! Ciao ciao.
newbie ;)

17-allineamento

Poichè tutta la sidebar è allineata a destra, ora proviamo ad allineare a destra anche la chat box, come annunciato nel post precedente.

Fai il login al tuo blog, vai sul link Personalizza in alto a destra. Sei sulla tab Layout e sottotab Elementi Pagina: nella sidebar a destra clicca su Modifica nella sezione CHATTA CON ME che porta il codice della chat box di cbox.
Il codice che si presenta è questo:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0pt;">
<div><iframe src="http://www5.cbox.ws/box/?boxid=627719&amp;boxtag=53s414&amp;sec=main" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxmain" style="border: 1px solid rgb(219, 226, 237);" id="cboxmain" width="200" frameborder="0" height="305" scrolling="auto"></iframe></div>
<div><iframe src="http://www5.cbox.ws/box/?boxid=627719&amp;boxtag=53s414&amp;sec=form" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxform" style="border-style: none solid solid; border-color: -moz-use-text-color rgb(219, 226, 237) rgb(219, 226, 237); border-width: 0px 1px 1px;" id="cboxform" width="200" frameborder="0" height="75" scrolling="no"></iframe></div>
</div>
<!-- END CBOX -->

Prendi nota di text-align: center
Ebbene, al posto di center scrivi right, avendo cura di non toccare null'altro.
Clicca il bottone arancio SALVA e poi il link celeste Visualizza blog dentro al rettangolo arancio in alto.
Ora anche la chat box è allineata a destra!
Quindi:
text-align: center posiziona il testo al centro
text-align: right posiziona il testo a destra
Puoi fare la prova di allineare a sinistra: dovrai scrivere left al posto di right o center.
newbie ;)

16-chat box

E' bello e utile fornire la possibilità ai nostri visitatori di interagire con noi. Il mezzo più semplice per raggiungere questo scopo è fornirsi di una chat box (significa scatola, riquadro in cui chiacchierare). Ci sono molti siti che offrono questo servizio. Ti consiglio cbox.

Vai su http://cbox.ws/
Registrati scegliendo un nome per la chat box, inserendo la tua email e una password, accettando i Terms and Conditions. Ti verrà inviata una mail all'indirizzo che hai appena inserito, essa ti proporrà un link simile:
http://www.cbox.ws/admin.php?snippet

Fatto il login accederai al codice. Presta attenzione che sia evidenziata la tua piattaforma: I'm installing on Blogger/Blogspot. Copia il codice, o sugli appunti o su un file di servizio.
Vai al tuo blog. Clicca in alto a dx su Personalizza. Ti trovi in Elementi pagina. Sulla sidebar di dx clicca Aggiungi un gadget, scegli il quarto gadget Html/JavaScript. Nella finestra di configurazione scegli un bel titolo (io ho scelto "chatta con me") e sotto, su Sezioni del sito, incolla il codice di cbox.ws. Clicca il bottone arancio SALVA. Ti rimanda a Elementi pagina, e qui sulla sidebar potrai vedere il tuo nuovo widget col titolo appena inserito.
Clicca sul link celeste Visualizza blog del rettangolo arancio in alto. Finalmente vedrai il tuo blog fornito di una chat veloce e carina! Sul sito di cbox puoi "customizzare" cioè "personalizzare" la tua chat box come più ti aggrada, in base anche ai colori del tuo blog. Nel menù Look & Feel ne puoi vedere parecchie.

A proposito:
Ti sei accorto che la chat box si posiziona centralmente nella sidebar del blog?
Mentre tutta la sidebar è allineata a destra, fa brutto, no? ...
Vedremo di sistemarla.
newbie ;)