Blogger fai da te

tempo di caricamento blog

noreply@blogger.com (Viviana r) — Sat, 23 Jan 2010 11:11:00 +0000

Oggi mi metto nei panni del potenziale visitatore al mio blog che sta cercando informazioni sul web. Scrivo nella barra di ricerca "Tempi di caricamento del blog" e scelgo il link che ritengo più appropriato, clicco e attendo qualche secondo il caricamento della pagina che però e lenta a caricarsi, mi scoccio e quindi passo al link successivo e probabilmente non entrerò più in quel sito. Magari il potenziale visitatore non ha neppure l'ADSL e si ritrovo con una vecchia linea che viaggia lenta come una lumaca, figuriamoci allora quante pagine scarterà. Ecco, questo e quello che molto spesso capita a chi ha un blog con la pagina lenta ad aprirsi.
Un mio visitatore mi manda questo messaggio:

francescomisc on 04 gennaio 2010 10.47 ha detto...
x viviana r:
Volevo informarti che il blog impiega molto tempo per aprirsi,ti saluto

Grazie Francesco, la tua segnalazione mi da un ottimo spunto per scrivere questo post e per andare a controllare il motivo per cui il mio blog ci mette tanto tempo a caricarsi.

Continua a leggere » Espandi/comprimi post «

Per controllare quanto tempo ci mette il mio blog a caricarsi, vado a questo indirizzo http://tools.pingdom.com/ e inserisco il link del mio blog nella casella url, schiaccio il tastino Test now e attendo la fine del test.

Analizzando il risultato, mi rendo conto che il blog ci mette ben ventidue secondi a caricarsi e vedo che ho un problema con uno script esterno al blog che non si carica.

Non conoscendo il problema, copio l'indirizzo e lo inserisco nella barra degli indirizzi per vedere di cosa si tratta ma purtroppo nel mio caso ho questa brutta sorpresa perché capisco che lo script potrebbe non essere più disponibile in rete.

Inserisco lo stesso link nella barra di ricerca e ottengo queste informazioni che mi verranno molto utili per trovare il problema. La mia fortuna e che in passato avevo inserito la stessa funzione che è descritta in quest’articolo e quindi mi basta eliminare o inibire il codice all'interno del mio blog

Entro nel pannello dei comandi e per prima cosa faccio il Backup del modello, schiaccio i tasti Ctrl + f e inserendo lo stesso link che ho cercato in rete, nella casella di ricerca che mi si apre, vedrò che viene evidenziato il risultato. (nel mio caso, l'immagine della casella di ricerca e riferita a Mozilla Firefox)

Una volta visualizzato il codice cercato, scelgo d'inibire lo script e per farlo inserisco prima e dopo lo stesso, questo codice scritto in rosso che neutralizza il codice agli occhi dei browser, facendolo diventare un semplice commento.

<!-- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'> </script> <script src='http://www.hotlinkfiles.com/files/2716840_aiw93/jquerymagnifier.js' type='text/javascript'> </script> -->

Una volta inibito lo script posso solo salvare le modifiche e fare l'anteprima non serve a nulla dal momento che la pagina non viene ricaricata dal browser ma dal PC dell'utente. Nel malaugurato caso di aver fatto qualche errore, non ci resta che fare il ripristino del modello e ricominciare da capo.

Mi auguro di essermi spiegata bene e se avete bisogno di aiuto, non esitate a chiedere.

Ti è piaciuto l’articolo? Clicca su OK!

Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

Aggiungiamo una terza colonna al blog

noreply@blogger.com (Viviana r) — Tue, 08 Dec 2009 18:43:00 +0000

Modificare un modello a due colonne proposto da blogger, o un altro modello che si puo trovare in rete per aggiungere una terza colonna alla sinistra, e abbastanza semplice ma per prima cosa va fatto il BACKUP che ti permettono di salvare il blog in caso di errore. Questo post e stato fatto sulla base del template minima, proposto da Blogger; ovviamente e applicabile a tutti i modelli apportando delle piccole modifiche e anche le dimensioni delle colonne sono modificabili a piacimento. Una volta eseguito il backup, clicchiamo su Modifica HTML

Schiacciamo i tasti Ctrl + F e nella casella di ricerca che si apre, scriviamo #sidebar; troverete una riga uguale o simile a questa

#sidebar-wrapper {

width: 220px;

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 */

}

Copiate tutta la parte scritta in blu e incollate subito dopo, aggiungendo il numero 1 (uno), poi modificate le scritte evidenziate in giallo

#sidebar-wrapper {

width: 220px;                           modificare 220 con 210

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 */

}

#sidebar1-wrapper {
width: 220px;                          modificare 220 con 210
float: $endSide;                        modificare end con start
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 */
}

Sempre nella casella di ricerca che si apre con i tasti Ctrl + F, cercate #main-wrapper e subito dopo aggiungete le due righe blu

#main-wrapper {

margin:0 15px 0px;

padding:0 10px 0px;

Ora cercate .sidebar, copiate tutto la parte che inizia con la scritta .sidebar e copiatela subito sotto aggiungendo sempre il numero 1 come da esempio

/* Sidebar Content
----------------------------------------------- */
.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

.sidebar1 {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar1 ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar1 li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar1 .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Cercate <div id='main-wrapper'> e aggiungete subito sopra, la parte scritta in blu

      <div id='sidebar1-wrapper'>

        <b:section class='sidebar' id='sidebar1' preferred='yes'>

</b:section>

      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
</b:widget>
      </b:section>

Sempre con l'aiuto dei tasti Ctrl + f, cercate le tre righe scritte in rosso e modificate i numeri evidenziate in giallo

#header-wrapper {

width:660px;                        modificare 660 con 880
margin:0 auto 10px;
border:1px solid #333333;
}

#outer-wrapper {

width:660px;                        modificare 660 con 880
margin:0 auto;
padding:10px;
text-align: left;
font: normal normal 100% Truebuchet MS' , Truebuchet, Verdana, Sans-serif;
}

#footer {

width:660px;                        modificare 660 con 880
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Buon lavoro e ricordatevi sempre di fare il Backup prima di fare qualsiasi modifica.

Scegliamo il Browser

noreply@blogger.com (Viviana) — Sat, 26 Sep 2009 21:52:00 +0000

Quello che vedete qua sopra, e un pulsante con una scritta colorata e lampeggiante, se ci cliccate sopra vi riporta alla Home page e l'ho creato utilizzando Mozilla Firefox. Di seguito vi metto le immagini che ho realizzato visualizzando il post con i vari browser disponibili.

Questo e ciò che potete visualizzare utilizzando Mozilla firefox, tutto funziona e si visualizza perfettamente

Questo e ciò che potete visualizzare utilizzando Google Chrome, i colori dell'immagine sono perfetti, il pulsante con link e perfetto ma non lampeggia.

Questo e ciò che potete visualizzare utilizzando Opera, i colori dell'immagine sono perfetti, il pulsante con link funziona ma e leggermente rimpicciolito e non lampeggia.

Questo e ciò che potete visualizzare utilizzando Safari, anche qui i colori dell'immagine sono perfetti, il pulsante con link e perfetto ma non lampeggia.

Questo e il peggio che potete visualizzare perchè utilizzando Internet Explorer ci ritroviamo con il pulsante che taglia la scritta , anche qui non lampeggia, ha perso la formattazione dei colori e sopratutto non riconosce il link che dovrebbe aprirsi cliccandoci sopra. Insomma, un disastro totale.

Quello che avete visto e solo un piccolo esempio di come i Browser si comportano con i vari codici Html. Quando facciamo qualche cosa di nuovo nel nostro blog, sarebbe sempre opportuno verificarne il corretto funzionamento con i vari Browser perchè potreste essere sfortunati e incappare in un codice che non viene interpretato come dovrebbe. Ovviamente ci sono alcuni codici che vengono interpretati solo da Internet Explorer e non dagli altri ma i casi sono sempre a sfavore dello stesso perchè e un mondo a parte che a mio avviso dovrebbe sparire o almeno essere reso compatibile con la concorrenza. Non voglio parlare male di IE ma se lo abbandonate per passare ad un altro Browser, vi fate solo un regalo.
Se lo desiderate, potete scaricare da qui un Browser alternativo cliccando sull'immagine dello stesso.

Modificare le dimensioni delle immagini

noreply@blogger.com (Viviana) — Mon, 14 Sep 2009 00:05:00 +0000

Girando per i blog, ho notato che in molti di essi si vedono delle immagini e video Youtube, inseriti fuori misura. Ho creato questo esempio per darvi un idea inserendo foto troppo grosse.

Come si puo fare per ridimensionare le immagini?
Se usate il vecchio editor dei post, appena inserita l'immagine, dovete cliccarci sopra due volte per visualizzarla come nella foto di sotto

una volta che si visualizza il bordo della foto, con i quadratini neri ai vertici e sui lati, puntate il mouse su uno dei vertici della foto e tenenendo premuto il tasto di sinistra, trascinate la foto seguendo il senso della freccia fino a ridurre l'immagine al punto desiderato. Se il senso di trascinamento che effettuerete, sarà orizzontale o verticale, perderete le proporzioni. Ovviamente, trascinando nel senso opposto, si aumentano le dimensioni dell'immagine ma si perde anche in qualità della stessa.

Se usate il nuovo editor dei post, (non lo conosci? clicca qui) vale quanto scritto di sopra ma con l'aggiunta che quando cliccherete due volte sulla foto, visualizzerete questo nuovo strumento che vedete sotto; e un aggiunta che Blogger ci da con le ultime modifiche apportate all'editor dei post arricchito con nuove funzioni.

Un piccolo trucco: fate delle prove con una foto e trovate il limite massimo di larghezza, per essere visualizzate correttamente senza essere tagliata; poi usatelo quando inserite nuove fotografie nei post. Quando farete le prove, vedrete una finestrella come quella nell'immagine di sotto, appena trovata la dimensione ottimale, prendete nota della larghezza massima e quando ridimensionate le immagini nei post, saprete in anticipo quale dimensione impostare senza fare continue prove.

Ovviamente quanto scritto sopra, e valido anche per modificare le dimensioni dei video Youtube che vogliamo inserire nel post.

Inseriamo un link nei commenti ai post

noreply@blogger.com (Viviana) — Fri, 04 Sep 2009 19:21:00 +0000

Qualche giorno fa, un amica mi chiedeva come si faceva a inserire dei link nei commenti dei post e siccome Blogger, non sempre spiega bene come fare le cose e tanti di noi non sanno come farlo,voglio insegnarvi come fare con tre tipi diversi di link da utilizzare in maniere diverse.
L'esempio1, e il più semplice e funziona ovunque, post, commenti nei post e widget

esempio 1
<a href="Url del link">Nome del link</a>

I prossimi due esempi, non vengono accettati nei commenti dei post.
Nell'esempio 2, abbiamo aggiunto un tag e un valore; aprirà il collegamento in una nuova finestra lasciando aperta la precedente. Il tag target, indica al browser che deve aprire una nuova finestra, mentre il valore "_blank" indica che deve essere esclusiva per il link aperto. Se in un post abbiamo dieci collegamenti e ogni collegamento usa il valore "_blank", il visitatore che li aprirà tutti si troverà con dieci finestre aperte contemporaneamente e quindi con un possibile rallentamento del sistema operativo. Per ovviare a questo problema, andremo a sostituire il valore "_blank" con una semplice "_x". (esempio 3) La x che abbiamo inserito, servirà a tenere sempre aperta la pagina principale ma chiuderà il primo collegamento aperto per fare posto al secondo, poi al terzo e così via. In caso di piu link, la "_x" verrà sostituita con un numeno sempre diverso.

esempio 2
<a target="_blank" href="Url del link">Nome del link</a>

esempio 3
<a target="_x" href="Url del link">Nome del link</a>

Scelto il tipo di link che desideriamo utilizzare, dobbiamo sostituire la scritta in rosso con l'indirizzo del link che vogliamo inserire e la scritta verde con il messaggio che vogliamo rendere visibile al lettore sul collegamento da cliccare. L'autocomposizione che usa Blogger, e quella dell'esempio numero uno

Con la speranza di essere stata chiara, auguro a tutti voi che mi leggete una buona vita.

Salviamo i post e i commenti del blog

noreply@blogger.com (Viviana) — Mon, 31 Aug 2009 22:25:00 +0000

L'altra sera parlavo con un amico della sua brutta avventura con il blog perduto, tre anni di blog andati in fumo per chissà quale oscuro motivo. Blogger, oltre a darci la possibilità di salvare il modello del blog, ci permette anche di salvare tutti i post e i loro relativi commenti; ma pochi lo sanno. Ecco la sequenza di tasti da cliccare. (cliccate sulle immagini per ingrandirle)

Esportazion e salvataggio dei post e commenti

1) Entriamo nel pannello dei comandi
2) Impostazioni
3) Esporta blog
4) Scarica blog
5) OK

2345

Ora abbiamo messo al sicuro tutti i post e i commenti del blog, ma non il Modello e i Widget. Se per un qualsiasi motivo Blogger dovesse perdere il nostro blog, o se magari maldestramente cancelliamo qualche cosa che c'interessava, possiamo sempre ripristinare post e commenti fino al momento dell'ultimo backup in questa maniera

Ripristino dei post e commenti

1) Entriamo nel pannello dei comandi
2) Impostazioni
3) Importa blog
4) Clicchiamo su Sfoglia e cerchiamo il file precedentemente salvato cliccandolo due volte, flegghiamo sulla casella Pubblica automaticamente tutti i post importati, inseriamo i caratteri che ci vengono richiesi e clicchiamo su Importa blog

2 3 4

Sperando di essere stata chiara, auguro buon blog a tutti quanti.
Se avete domande, sapete dove trovarmi (qua ovviamente)

Cambiamo il carattere di scrittura

noreply@blogger.com (Viviana r) — Thu, 27 Aug 2009 20:28:00 +0000

Blogger e un pochino avaro e vi offre la scelta con soli otto tipi di carattere di scrittura, voglio quindi spiegarvi come fare per cambiare il carattere e inserire quello che vi piace di più.
Qua sotto trovate alcuni esempi di carattere che ho prelevato utilizzando il programma OpenOffice.

comic sans ms
Arial narrow
Arial,Helvetica,sans-serif
Viner Hand ITC,cursive
Arial Black,sans-serif
Algerian,fantasy
Arial Narrow,sans-serif
Bradley Hand ITC,cursive
Comic Sans MS,cursive
Jokerman
Lucida Calligraphy,cursive
aharoni

Prima di spiegarvi come fare a cambiarlo, voglio precisarvi una cosa importante da non sottovalutare.
Fino a che scegliete un carattere normale, tutti i pc lo visualizzeranno nella maniera voluta da voi, ma se per caso scegliete un carattere strano, che magari avete scaricato da internet perchè sul vostro pc non era presente, tanti altri utenti avranno il problema che sul loro pc non esiste quel carattere e quindi non potranno visualizzarlo correttamente, perchè il loro pc lo convertirà automaticamente con il carattere che sto usando per scrivere ora, che e lo standard utilizzato da tutti i pc.

<span style="font-family: comic sans ms;">Se desiderate scrivere in questa maniera, dovrete inserire prima e dopo il vostro scritto, le parti evidenziate in giallo. La porzione di codice scritta in nero, e sempre uguale per qualsiasi tipo di scrittura, mentre la parte scritta in rosso specifica il tipo di carattere. </span>

Per scegliere un carattere che vi piace, potete usate un programma di scrittura come Office, OpenOffice (qualsiasi versione del programma va bene) o anche il Blocco note che trovate tra i programmo di Windows, copiando il nome che visualizzate nella casella di scelta dei caratteri. Il codice da inserire prima e dopo, lo potete inserire tranquillamente nel mezzo del vostro scritto e se siete in modalità Scrivi , appena farete un anteprima lo vedrete scomparire perchè verrà interpretato come codice html e quindi potrà essere visibile solo in modalità Modifica HTML.
A Questo punto posso solo augurarvi buon divertimento nel modificare i vostri caratteri di scrittura.

P.S. le scritte evidenziate in giallo e in grigio, sono una nuova funzione dell'editor di Blogger che trovate nelle nuove impostazioni. Se non lo sapete, cliccate qui e leggete.

Nuove funzioni di Blogger

noreply@blogger.com (Viviana r) — Tue, 25 Aug 2009 18:24:00 +0000

Blogger decide di festeggiare il compleanno per il suo decimo anno di vita, con delle modifiche che sta attuando alla piattaforma; una di queste e il nuovo editor dei post che ci propone nelle impostazioni. Io sono andata a dare un occhiata e mi e piaciuto, se volete visualizzare anche voi queste novità, dovete andare nel pannello di controllo, scorrere la pagina e mettere il flag su Editor aggiornato. Salvare le impostazioni e il gioco e fatto. Oltre a questa novità, ce ne saranno altre in arrivo, che per molti di noi saranno molto interessanti.

Esegui backup/ripristino modello

noreply@blogger.com (Viviana) — Tue, 25 Aug 2009 03:30:00 +0000

La prima cosa che un blogger deve imparare a fare, e quella si saper fare il backup e il ripristino del blog, strumento importantissimo che vi permetterà di ripristinare il blog in caso di problemi. Ogni volta che aggiungete un gadgets o un elemento nel Layout, modificate automaticamente il codice HTML del vostro blog e nel malaugurato caso che non funzioni o peggio crei danno a tutto il resto, non vi resterà altro da fare che tornare alla condizione precedente, cosa semplicissima da fare.
Ricordate di farlo ogni volta che mettete le mani nel blog per qualsiasi modifica.
Ecco come fare. (cliccate sulle immagini per ingrandirle)

Backup modello

1) entriamo nel pannello dei comandi e clicchiamo su Modifica HTML
2) mettiamo un flag sulla casella Espandi i modelli Widget e clicchiamo su Scarica modello completo
3) OK
4) nella finestra che vi mostrerà l'avvenuto Download, cliccate sopra il file con il tasto destro del mouse e poi su Apri Cartella
A questo punto potete scegliere di spostare il file in un punto del pc a voi più congegniale (es Desktop).

1 2 34

Ripristino modello

1) entriamo nel pannello dei comandi e clicchiamo su Modifica HTML
2) clicchiamo su Sfoglia, cerchiamo il file precedentemente salvato cliccandolo due volte e clicchiamo su Carica

1 2

Ok il ripristino del blog e stato eseguito.
Spero di essere stata chiara nelle spiegazioni.

Allineiamo le fotografie nella sidebar

noreply@blogger.com (Viviana) — Sat, 22 Aug 2009 20:57:00 +0000

Rispondo alla richiesta di Kitty in questo post

Anonimo ha detto...

Io ho un problema un pochino diverso perché non so come si fa a mettere le foto dei widget tutte in fila sulla sinistra.

Kitty

Per poter allineare tutte le fotografie a sinistra, nella sidebar, puoi fare in questa semplice maniera:
Apri il widget e aggiungi prima del codice della fotografia questo tag <left> poi alla fine del codice HTML della fotografia, aggiungi questo tag </left> , il gioco e fatto. Però.... però, i cervelloni che studiano il codice html e che ne dettano le regole, hanno deciso che questo metodo e deprecato e quindi non e il massimo se viene utilizzato. Sotto ho riportato una tabella per allineare immagini o widget, all'interno di un elemento HTML. Quello che devi fare, e inserire il codice dell'elemento che desideri allineare, al posto della scritta rossa qua sotto.

allineamento a sinistra

<div align="left">inserisci qua il tuo codice</div>

allineamento al centro

foto1

<div align="center">inserisci qua il tuo codice</div>

allineamento a destra

foto1

<div align="right">inserisci qua il tuo codice</div>

Sperando di esserti stata utile, ti auguro buon blog.

Potrebbe anche interessarti....posizionare le fotografie in un post

Posizionare le fotografie in un post

noreply@blogger.com (Viviana) — Thu, 20 Aug 2009 17:20:00 +0000

Oggi la mia amica Sofia, mi ha chiesto come si fa a inserire le immagini nelle posizioni desiderate del post ma premetto che la cosa non e molto semplice e rapida, perchè la finestra dell'editor che usate potrebbe non avere le stesse dimensioni dell'area che ospita il post che tutti leggeranno. Nel caso questo problema sussista, l'ideale e scrivere tutto il post in un blog secondario e pubblicarlo, poi aprirlo e prendere nota di dove mettere la prima immagine, pubblicarlo e prendere ancora nota di dove mettere la seconda immagine e così via finchè le abbiamo inserite tutte. Questo perchè ogni immagine, sposta il testo in avanti, occupandone spazio all'interno dello stesso. In alternativa si può usare questo bellissimo strumento gratuito, messo a disposizione da Windows.
Questo post e diviso in due parti e l'immagine utilizzata e sempre la stessa, ma viene caricata sul post in due maniere diverse. In questa prima parte, ho inserito direttamente l'immagine, senza utilizzare lo strumento Aggiungi un immagine, messo a disposizione dall'editor che si usa normalmente per scrivere i post. Il testo e stato prelevato da Wikipedia e viene utilizzato per dare un idea del risultato finale. Sotto il testo trovate le spiegazioni per interpretare il codice e come modificarlo.

Gattaiola (porta) Da Wikipedia, l'enciclopedia libera.

La gattaiòla è una porta per gatti, ovvero una piccola apertura posta sul fondo dei portoni, in particolar modo di quelli in legno delle antiche cantine, che permette il libero passaggio dei felini domestici, con l'obiettivo di evitare la proliferazione dei roditori nei locali. Altri scopi prevedono invece la possibilità, per i gatti domestici, di entrare e uscire liberamente dall'abitazione dei proprietari, venendo applicate sulla porta o su un (Esempio foto 1) muro perimetrale. Un simile uso è molto diffuso in alcuni paesi, come ad esempio il, Regno unito dove si calcola che circa il 90% dei gatti domestici abbia accesso all'esterno dell'abitazione. Nel mondo anglosassone, la terminologia (Esempio foto 2) utilizzata è cat flap, attestata dal 1957, insieme a cat door, attestata nel 1959. In il termine utilizzato è kitty door. Esistono parallelamente, con scopi del tutto analoghi, le porte per cani.

Apertura a botola

Il sostantivo flap, presente nella terminologia anglosassone, riflette il fatto che questo tipo di
(Esempio foto 3)apertura è abitualmente munita di un botola mobile che si richiude dopo aver permesso il passaggio dell'animale. Il ritorno in sede della botola avviene grazie a una forza di richiamo che, nei casi più semplici, è fornita dalla. L'invenzione della botola per gatti è curiosamente attribuita allo scopritore delle legge fisica della gravitazione universale, Isaac Newton. Di lui si racconta anche che avrebbe realizzato due buchi nella porta della sua camera da letto, uno più (Esempio foto 4 ) piccolo per il gattino e un altro, più grande, per la gatta madre. Tuttavia vi è chi, con riferimento a una certa tradizione aneddotica sullo scienziato, ritiene poco verosimile la presenza di animali domestici, sia cani che gatti, nella sua camera da letto.

Le quattro fotografie riportate qua sopra, sono state inserite nella porzione di testo evidenziata in blu e hanno dei codici diversi tra di loro perchè pur essendo ideintiche alla visione, hanno degli attributi diversi per il loro posizionamento e evento su clik all'immagine.

Fotografia 1

posta sul fondo dei portoni, in <img src="http://i29.tinypic.com/2h7pj7t.jpg" alt="Image and video hosting by TinyPic" align="left" border="0" />particolar modo di quelli in legno delle antiche

Il tag scritto in grassetto align="left", serve per posizionare la fotografia a sinistra della pagina e all'interno di uno scritto, senza lasciare margini vuoti.
Se ci cliccate sopra, non succede nulla perchè il codice in rosso non ha nessun riferimento da raggiungere. (troverete l'esempio nella foto 3)

Fotografia 2

Nel mondo anglosassone, la terminologia <img src="http://i29.tinypic.com/2h7pj7t.jpg" alt="Image and video hosting by TinyPic" border="0" /> utilizzata è cat flap, attestata

In questa fotografia, non esiste nessun attributo di allineamento perchè e stata inserita interrompendo una riga di testo.
Anche in questa fotografia, se ci cliccate sopra, non succede nulla perchè il codice in rosso non ha nessun riferimento da raggiungere. (troverete l'esempio nella foto 3)

Fotografia 3

riflette il fatto che questo tipo di <center><a href="http://it.tinypic.com/" target="_blank"><img src="http://i29.tinypic.com/2h7pj7t.jpg" alt="Image and video hosting by TinyPic" border="0" /></a></center> apertura è abitualmente munita di un

In questa fotografia, stato stati inseriti il tag <center> (tag di apertura) e </center> (tag di chiusura) che servono a posizionare l'immagine al centro della pagina lasciando il vuoto ai lati.
Cliccando sull'immagine, si viene reindirizzati ad un altra pagina e per fare questo, si e reso necessario inserire il codice: <a href="xxxxxxxxxx" (codice di apertura) e </a> (codice di chiusura)
http://it.tinypic.com/ Questo indirizzo, e stato generato automaticamente quando ho utilizzato il servizio di Hosting dalla pagina che avete visitato, per mettere in rete l'immagine.
target="_blank" Questa parte di codice, serve al browser per capire che deve lasciare aperta la pagina corrente e aprirne un altra all'indirizzo specificato prima

Fotografia 4

che si richiude dopo aver permesso il <a href="http://i29.tinypic.com/2h7pj7t.jpg" target="_blank"><img src="http://i29.tinypic.com/2h7pj7t.jpg" align="right" border="0" /></a> passaggio dell'animale. Il ritorno

Il tag scritto in grassetto align="right" serve per posizionare la fotografia a destra della pagina e all'interno di uno scritto, senza lasciare margini vuoti.
Cliccando sull'immagine, si viene reindirizzati ad un altra pagina e per fare questo, si e reso necessario inserire il codice: <a href="xxxxxxxxxx" (codice di apertura) e </a> (codice di chiusura)
Qui ho cambiato l'indirizzo e ho messo quello che rimanda all'immagine che si trova in rete http://i29.tinypic.com/2h7pj7t.jpg Questo indirizzo, e stato generato automaticamente dal servizio di Hosting quale riferimento diretto alla fotografia appena inserita.
target="_blank" Questa parte di codice, serve al browser per capire che deve lasciare aperta la pagina corrente e aprirne un altra all'indirizzo specificato prima

In questa seconda parte, ho caricato l'immagine utilizzando lo strumento Aggiungi un immagine e il codice che viene generato automaticamente,

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i29.tinypic.com/2h7pj7t.jpg"><img style="cursor: pointer; width: 134px; height: 101px;" src="http://i29.tinypic.com/2h7pj7t.jpg" alt="" border="0" /><a>

si andrà a posizionare sempre all'inizio del post. Noi lo modificheremo e lo sposteremo dove vogliamo.

Utilizzando lo stesso metodo illustrato sopra, possiamo modificarlo nelle seguenti maniere:

Fotografia 1: inseriamo align="left";

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i29.tinypic.com/2h7pj7t.jpg"><img style="cursor: pointer; width: 134px; height: 101px;" src="http://i29.tinypic.com/2h7pj7t.jpg" alt="" align="left"; border="0" /><a>

testo testo testo testo testo testo testo testo testo testo testo testotesto testo testo testo testo testo testo testo testo testo testo testotesto testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

Fotografia 2: non modifichiamo nulla

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i29.tinypic.com/2h7pj7t.jpg"><img style="cursor: pointer; width: 134px; height: 101px;" src="http://i29.tinypic.com/2h7pj7t.jpg" alt="" border="0" /><a>

<center><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i29.tinypic.com/2h7pj7t.jpg"><img style="cursor: pointer; width: 134px; height: 101px;" src="http://i29.tinypic.com/2h7pj7t.jpg" alt="" border="0" /><a> </center>

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://i29.tinypic.com/2h7pj7t.jpg"><img style="cursor: pointer; width: 134px; height: 101px;" src="http://i29.tinypic.com/2h7pj7t.jpg" alt="" align="right"; border="0" /><a>

Ti è piaciuto l’articolo? Clicca su OK!

Puoi votare altri articoli anche in questa pagina.

Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

Eccoci qua, primo post

noreply@blogger.com (Viviana) — Sun, 16 Aug 2009 17:40:00 +0000

In rete, si trovano tanti post che trattano lo stesso argomento e dove lo script o il gadget e sempre identico; quello che li rende diversi tra di loro e il modo di spiegare come si fa ad inserirlo o modificarlo. Il mio intento e quello di spiegare ai blogger che sono alle prime armi e a digiuno di codici html, come si fa a inserire elementi, modificarli e renderli più piacevoli, utilizzando le immagini fotografiche in ausilio allo scritto. Un grazie speciale anche a Giovanni, che con il suo aiuto iniziale nel momento in cui ho aperto il mio primo blog qua dentro, ha contribuito a quella spinta che mi ha fatto venire la passione per smanettare nel blog.

Ti è piaciuto l’articolo? Clicca su OK!

Puoi votare altri articoli anche in questa pagina.

Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

noreply@blogger.com (Viviana) — Wed, 20 May 2009 18:41:00 +0000

post di servizio...

noreply@blogger.com (Viviana) — Tue, 24 Feb 2009 22:42:00 +0000

post di servizio...