04/07/2011

Come inserire il pulsante +1 di Google nei post

Buongiorno a tutti i MyBlogger, oggi La Redazione vi propone un nuovissimo tutorial per implementare una delle funzioni più golose del web: il pulsante +1 di Google!!

La funzione di questo elemento è del tutto simile al Like di Facebook, ma agisce sui risultati di ricerca di Google…vediamo quindi come metterlo all’interno dei nostri post.

NOTA: come Google stesso ci fa notare la funzione +1 è stata per ora implementata solo nella versione .com del motore di ricerca, ma supponiamo sarà presto disponibile anche nella versione italiana.

Andiamo sulla pagina webmaster di google nella sezione bottone +1 dove possiamo impostare le dimensioni del pulsante. 

Google, pulsante +1, tutorial, tips and tricks, redazione myblog, virgilio

ATTENZIONE: affinchè il pulsante funzioni su Myblog non dobbiamo impostare la lingua, se per caso lo avete fatto cancellate la stringa contenuta tra le parentesi graffe. Es. {lang: 'it'}. Se non cancelliamo questa parte le modifiche daranno messaggio di errore.

Ci troveremo davanti a un codice di questo tipo:

<!-- Inserisci questo tag nell'intestazione <head> o appena prima del tag di chiusura </body> -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

</script>

<!-- Inserisci questo tag nel punto in cui vuoi che venga visualizzato il pulsante +1 -->

<g:plusone size="medium"></g:plusone>

Ora andiamo nelle opzioni avanzate della presentazione e inseriamo la prima parte del codice nel modello della Homepage. Per semplicità e chiarezza possiamo scrivere un codice di questo tipo, subito dopo la tag <head>:

<!-- INIZIO CODICE INTRO BOTTONE +1 GOOGLE-->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

</script>

<!-- FINE CODICE INTRO BOTTONE +1 GOOGLE-->

All’interno della pagina possiamo poi posizionare il bottone dove preferiamo. Il nostro consiglio è di inserirlo subito dopo il titolo del post, come noterete che abbiamo fatto qui sul blog di redazione. Quindi tipicamente dopo la riga:

<h3 id="p{$post.iteration}"><span>{$post.title}</span></h3>

Prima della riga:

<div class="posttext">

Per creare il bottone inseriamo il codice:

<!-- INIZIO CODICE POSIZIONAMENTO BOTTONE +1 GOOGLE--> 

<g:plusone size="medium"></g:plusone>

<!-- FINE CODICE POSIZIONAMENTO BOTTONE +1 GOOGLE-->

Dove la size="medium" è la dimensione che abbiamo impostato sulla pagina di creazione del bottone.

Per avere il bottone +1 disponibile in tutte le declinazioni di visualizzazione del post, ripetiamo la stessa procedura per i seguenti modelli del template:

  • Modello di pagina Link permanente
  • Modello della pagina categoria
  • Template Tags

Un ultima nota: per ragioni del tutto ignote e misteriose il bottone di Google ci mette un po’ a caricarsi, probabilmente perché è una funzione implementata da poco nel sistema, perciò non spaventatevi se facendo un test non vedete apparire nulla per qualche secondo...

Inoltre chi clicca sul bottone, per poter esprimere il suo +1 deve avere un account Google.

Eccoci giunti al termine del tutorial: + interconnessi di prima, + indicizzati, + raggiungibili, + simpatici, + accoglienti, + smart, + cool, +, +, +, + …

Divertitevi a cliccare sui nostri +1 e non aspettate oltre per iniziare a collezionare i vostri!!

Un Saluto, a presto,

La Redazione

 

 

29/03/2011

Gimp: l'open source che ti aiuta a fare l'Header

Carissimi MyBlogger è giunto il momento di dare un tocco di carattere al vostro Blog, perché, come tutti sappiamo, il contenuto è fondamentale, ma anche l'occhio vuole la sua parte.

Iniziamo dunque questa serie di tutorial che vi guiderà nella personalizzazione del vostro spazio digitale per renderlo più accogliente e accattivante, più facile e piacevole da navigare.

Come prima cosa, se pensiamo al nostro blog come a un salotto dove ci incontriamo con i nostri amici per svolgere piacevoli conversazioni, dobbiamo decidere la forma della stanza la disposizione dell'arredo: per imparare a "customizzare" i vari elementi della pagina vi consigliamo di seguire i nostri tutorial nella sezione tips & tricks.

Ora, in questa prima puntata ci concentreremo sostanzialmente su come creare un bel cartello di benvenuto, ossia l'header che si trova in cima alla pagina, utilizzando un programma di grafica Open Source che possiamo scaricare gratuitamente dal web: stiamo parlando di Gimp.

Come prima cosa è necessario impostare correttamente le dimensioni del file immagine che vogliamo utilizzare come header (a proposito vi consigliamo di seguire il tutorial su come personalizzare l'header del blog)

Per farlo apriamo Gimp, creiamo un nuovo file e inseriamo altezza e larghezza in pixel dell'header...

imposta_immagineHeader_gimp.jpg

Clickando su OK si apre il nostro nuovo foglio e possiamo iniziare a sperimentare...proviamo a importare un'immagine o una nostra foto da utilizzare come sfondo dell'header. In questo esempio utilizzeremo una immagine presa dal sito http://www.freestockimages.org/ un'ottima fonte di immagini di qualità completamente free. Ecco un link all'immagine che abbiamo scelto: una interessante foto di un vecchio tronco d'albero.

Una volta che abbiamo deciso quale suggestione visiva vogliamo utilizzare per rappresentarci salviamola sul computer. Per modificarla in Gimp è sufficiente trascinare il file sull'area di lavoro che avevamo in precedenza impostato. Sulla destra possiamo verificare che nella finestra layer si è creato un nuovo livello contenente l'immagine che abbiamo importato.

layer_immagineHeader_gimp.jpg

Come potrete notare, dato che l'immagine è più grande dell'area del documento che abbiamo creato, una parte risulta nascosta perché eccede i limiti della pagina: a questo punto possiamo decidere di ridimensionare l'immagine per adattarla al nostro spazio utilizzando gli strumenti ruota, inclina, scala, ecc. presenti nella palette Strumenti oppure nella voce Immagine del menù a tendina in alto (tip: tenendo premuto CTRL mentre usiamo lo strumento Scala attiviamo l'opzione di scalatura proporzionale, per evitare distorsioni nell'immagine), oppure possiamo provare semplicemente a muovere l'immagine con lo strumento sposta (click e drag oppure freccette direzionali) per inquadrare una porzione specifica e dare un taglio più accattivante all'immagine. Vediamo i progressi fatti finora...

albero1_immagineHeader_gimp.jpg

Ora proviamo ad aggiungere una scritta. Possiamo farlo utilizzando lo strumento testo: comparirà la finestra dell'editor di testo di Gimp, scriviamo il testo desiderato e clicchiamo chiudi. Dopodiché potremo impostare il font, la dimensione e il colore del testo nel pannello strumenti.

textEditor_immagineHeader_gimp.jpg

 

Come tocco finale possiamo creare un nuovo livello cliccando sull'icona con la pagina bianca nella scheda Livelli confermare i parametri del nuovo livello e con lo strumento sfumatura (short-cut: L) sperimentare diverse possibilità per aggiungere profondità e appeal all'immagine. Se la sfumatura compromette la leggibilità della scritta sarà sufficiente trascinare il layer contenente la sfumatura sotto quello contenente il testo per invertire l'ordine di sovrapposizione e possiamo anche provare a giocare con la modalità di sovrapposizione dei livelli (che di default è impostata su normale) e la trasparenza.

Ultimo passaggio: salviamo con nome il file in formato Gimp per poterlo modificare in seguito, mentre per la pubblicazione sul web sceglieremo di salvarne una copia selezionando il "tipo file per estensione" e scegliendo JPG o PNG.

 

Ecco una semplice composizione realizzata utilizzando esclusivamente questi strumenti:

 

albero2_immagineHeader_gimp.jpg

 

Facile e d'impatto ;)

E voi cosa aspettate? Divertitevi a personalizzare il vostro blog per renderlo sempre più cool !!

 

11:16 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (0) | Trackback (0) | Segnala | Tag: gimp, tutorial, open source, header, personalizza blog | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook

21/02/2011

Google Chrome e panico da cache? Ci pensa MyBlog!

chrome icon.jpgBene, siamo giunti al quarto e ultimo appuntamento di questa piccola rubrica dedicata alla manutenzione dei vostri browser.

Ci siamo occupati di Internet Explorer, Mozilla Firefox e di Safari. Per chiudere, non potevamo non parlare di Chrome, il browser di Google.

Tutti pronti? Andiamo!

 

Come cancellare la cache con Google Chrome per Microsoft Windows

1.     Cliccate sull'icona della chiave nell'angolo in alto a destra del browser per aprire il contestuale menu a tendina.

chrome_1.jpg

2.     Selezionate Cancella dati di navigazione dal menu a tendina.

3.     Nella finestra di dialogo Cancella dati di navigazione,  spuntate le caselle degli elementi da rimuovere: Svuota la cacheElimina cookie.

chrome_3.jpg

4.     Dal menù a tendina Cancella dati nel seguente periodo selezionate le informazioni che desiderate eliminare. Di default, Google Chrome cancella solo le informazioni raccolte nelle ultime 24 ore. Per cancellare le informazioni di navigazione per un periodo di tempo più lungo, selezionate un'altra opzione nel menu a tendina. Per eliminare tutti i dati, seleziona Tutto.

5.     Cliccate su Cancella dati di navigazione per confermare l'eliminazione.

 

Ora che anche la messa a punto di Google Chrome è terminata, non ci resta che augurarvi una buona navigazione tra le pagine dei vostri MyBlogger preferiti :D

 

Safari e panico da cache? Ci pensa MyBlog!

apple_safari.jpgCari MyBlogger,

eccoci a voi con la terza parte del tutorial sulla corretta manutenzione dei vostri browser. Dopo aver illustrato la procedura per Internet Explorer e Mozilla Firefox, oggi è il turno di Safari, il browser di Apple. Tutti pronti? Procediamo!

 

Come cancellare la cache di Safari 3.x e 4.x

Vediamo come cancellare la cache di Safari 3.x o 4.0 – la procedura di seguito elenca i passaggi da seguire per Mac OS X e Microsoft Windows (da cui sono tratti gli screenshot):

1.     Mac OS X: dal menu Safari, selezionate Resetta Safari.

2.     PC Windows: dal menu a tendina Azioni - icona ingranaggio, selezionate Resetta SafariNota: la stessa opzione è disponibile anche nel menu Modifica.

safari_2.jpg

 

3.     Nella finestra di dialogo Resetta Safari, spuntate la casella Svuota la cacheRimuovi tutti i cookie.

 

safari_3.jpg

4.     Cliccate su Resetta per avviare l'eliminazione.

Bene! E anche questa è fatta! Avanti con il prossimo browser! :D

 

 

18/02/2011

Mozilla Firefox e panico da cache? Ci pensa MyBlog!

firefoxexample.jpgCari MyBlogger,

rieccoci con la seconda parte (ne seguiranno altre due, quindi state sintonizzati!!! :D ) del tutorial dedicato alla manutezione dei vostri browser.

Come potete intuire dal titolo, oggi ci occupiamo di Mozilla Firefox.

 

Come cancellare la cache di Mozilla Firefox 3.5

Vediamo come cancellare la cache di Mozilla Firefox 3.5 su sistema operativo Windows:

1.     Dal menu Strumenti, selezionate Opzioni.

fire3_1.jpg

2.     Una volta aperta la contestuale finestra di dialogo Opzioni, cliccate su Avanzate e poi su Rete.

fire3_2.jpg

3.     Nella sezione Memorizzazione dati non in linea, cliccate su Cancella adesso e confermate premendo OK.

 

Firefox 3.5 prevede inoltre la possibilità di impostare la cancellazione automatica della cache ogni qualvolta il browser venga chiuso. Per attivare l'impostazione:

1.     Dal menu Strumenti, selezionate Opzioni.

fire3_1b.jpg

2.     Una volta aperta la contestuale finestra di dialogo Opzioni, cliccate su Privacy.

fire3_2b.jpg

3.     Nella sezione Cronologia, selezionate Utilizza impostazioni personalizzate dal menu a tendina Impostazioni cronologia.

4.     Spuntate Cancella la cronologia alla chiusura di Firefox e cliccate su Impostazioni.

5.     Nella finestra Impostazioni per cancellare la cronologia, spuntate la casella Cache. Inoltre, per prevenire indesiderati problemi di navigazione potrebbe essere necessario eliminare i cookie. Per questo ulteriore passaggio, spuntate la casella Cookie.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche, ecc.

fire3_avvertenza.jpg

6.     Cliccate su OK per chiudere la finestra di dialogo Impostazioni e ancora OK per chiudere la finestra di dialogo Opzioni.

 

Come cancellare la cache di Mozilla Firefox 1.5, 2.0 e 3.0

Per chi avesse una versione meno recente del browser , vediamo come cancellare la cache con Firefox 1.5, 2.0 o 3.0 su sistemi operativi Windows o Mac OS X:

1.     Dal menu Strumenti, selezionate Opzioni (Windows). Dal menu Firefox, selezionate Preferenze (Mac OS X).

2.     Una volta aperta la contestuale finestra di dialogo Opzioni, cliccate su Avanzate e poi sulla scheda Rete.

fire1_2.jpg

3.     Nella sezione Memorizzazione dati non in linea, cliccate su Cancella adesso e confermato cliccando OK.

 

Come Firefox 3.5, anche per le versioni precedenti (Firefox 1.5, 2.0 o 3.0) prevede la possibilità di cancellare automaticamente la cache quando il browser viene chiuso. Vediamo come fare:

1.     Dal menu Strumenti, selezionate Opzioni.

fire1_1b.jpg

2.     Dalla finestra di dialogo Opzioni, cliccate su Privacy.

fire1_2b.jpg

3.     Nella sezione Dati privati per attivare la cancellazione automatica della cache, spuntate la casella Cancella sempre i dati privati alla chiusura di Firefox.

4.     Cliccate su Impostazioni per accedere alle altre opzioni della finestra di dialogo Cancella dati privati.

fire1_4b.jpg

5.     Da qui, spuntate la casella Cache. Inoltre, per prevenire indesiderati problemi di navigazione potrebbe essere necessario eliminare i cookie. Per questo ulteriore passaggio, spuntate la casella Cookie.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche, ecc.

6.     Cliccate su OK per chiudere la finestra di dialogo Cancella dati privati.

7.     Nella finestra di dialogo Opzioni, cliccate su Cancella adesso e poi su OK per chiudere la finestra di dialogo.

 

Bene. Anche Firefox è pronto a sfrecciare in Rete. Buona navigazione! :)

 

17/02/2011

Internet Explorer e panico da cache? Ci pensa MyBlog!

homer.jpgSpesso i piccoli problemi di visualizzazione in cui vi imbattete possono dipendere da una carente manutenzione dei vostri browser. A molti di voi sarà capitato di scriverci in preda al panico perché il vostro blog è impazzito e sentirvi rispondere "hai vuotato la cache del browser?". Vi assicuriamo che non è una risposta automatica e che chi legge le vostre e-mail non fa "copia e incolla" :D

Dunque, eccoci qui con una guida che vi accompagnerà passo passo in quella che è la prima delle operazioni da effettuare per una navigazione in tutta tranquillità. Nello specifico, vedremo come intervenire su Internet Explorer (dalla versione 6.0 alla 8.0), Mozilla Firefox (dalla versione 1.5 alla 3.5), Apple Safari (versione 3.x e 4.x) e Google Chrome.

Prima di passare alla fase operativa, vediamo di capire cos'è questa misteriosa cache che vi dà così tanti grattacapi.

 

Cos'è la cache?

La cache contiene una copia temporanea degli elementi scaricati dal Web - pagine Web, immagini, suoni e a volte cookie. Avere tali file memorizzati su disco locale vi permette di caricare più velocemente le pagine Web alla successiva visualizzazione aumentando di fatto la velocità generale di navigazione (più sono i file salvati, più sono le pagine a cui potrete accedere velocemente). Tuttavia, può capitare che le pagine modificate dall'ultima visita non vengano aggiornate con il contenuto attuale: il browser carica ciò che ha in memoria senza recepire le modifiche che intanto sono intervenute sulla nuova pagina del sito.

La prima conseguenza è la generazione di comportamenti negativi delle pagine dei siti che visitate.

La cancellazione della cache invia tutti i file in essa contenuti nel cestino, costringendo il browser a caricare da capo tutti i nuovi contenuti delle pagine Web. Questa procedura, oltre a poter risolvere gran parte delle bizzarrie in cui ci si imbatte durante surfando in Rete, può liberare spazio sul disco fisso del computer e aumentare la velocità di uscita dal browser. Oggi ci occuperemo di Internet Explorer.

 

Come cancellare la cache di Internet Explorer 7.0 e 8.0

Vediamo come cancellare la cache di Internet Explorer 7.0 e 8.0 su sistema operativo Windows:

1.     Dal menu Strumenti, selezionate Opzioni Internet per aprire la finestra Proprietà Internet.

2.     Al tab Generale, alla voce Cronologia di navigazione, cliccate su Elimina e quindi su OK per confermare per eliminare tutti i file nella cache.

explorer8_2.jpg

3.     Nella finestra di dialogo Elimina cronologia di navigazione, spuntate File Internet temporanei. Per evitere le stranezze di cui paralavamo sopra, potrebbe essere utile eliminare i cookie: per fare questo, spuntate Cookie.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche e così via.

explorer8_3_att.jpg

4.     Cliccate su Elimina e poi su OK per chiudere la finestra di dialogo Proprietà Internet.

 

Come cancellare la cache di Internet Explorer 6.0

Per chi avesse una versione meno recente del browser, vediamo come cancellare la cache con Internet Explorer 6.0 su sistema operativo Windows:

1.     Dal menu Strumenti, selezionate Opzioni Internet per aprire la finestra di dialogo delle Opzioni Internet.

2.     Al tab Generale, nella sezione File Internet temporanei, cliccate su Elimina file.

Explorer6_2.jpg

3.     Cliccate su OK per cancellare tutti i file nella cache.

Explorer6_3.jpg

 

4.     Per risolvere strani comportamenti del browser, potrebbe essere utile eliminare i cookie: per farlo, cliccate su Elimina cookie.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche e così via.

explorer6_4att.jpg

5.     Nella finestra di dialogo Elimina cookie, cliccate OK per eliminare i cookie salvati sul disco fisso.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche e così via.

6.     Nella scheda Generale, nella sezione Cronologia, cliccate su Cancella cronologia e poi per confermare l'eliminazione della cronologia dei siti Web visitati.

explorer6_6.jpg

7.     Cliccate su OK per chiudere la finestra di dialogo Opzioni Internet.

 

Bene, adesso il vostro Internet Explorer è tornato a funzionare magnificamente.

Buona navigazione! :D

07/01/2011

Come inserire un effetto rollover sulle immagini con link

In questo articolo vi mostriamo un metodo per migliorare l'aspetto grafico del blog, come sostituire un'immagine quando si posizione il puntatore sopra di essa. Questa tecnica è chiamata rollover e potete utilizzarla per distinguere le immagini che hanno un collegamento ad un articolo, nei menu formati da immagini oppure per semplici scherzi divertenti, come questo.



Lo script da utilizzare è molto semplice. La base è la stessa che si utilizza per inserire una immagine con link in un post o nelle barre laterali di navigazione.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http://immagine1.jpg"></a>     


A questa riga di codice aggiungiamo alcuni parametri.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http:// immagine1.jpg" 
onmouseover='this.src = "http:// immagine2.jpg";'
onmouseout="this.src='http:// immagine1.jpg';"></a>


Dove:

  • a è il tag utilizzato per la creazione dei link;
  • href=”http://pagina_da_aprire.it” contiene, all'interno delle virgolette, l’indirizzo della pagina che si apre cliccando sopra l’immagine;
  • img è il tag utilizzato per la creazione delle immagini;
  • src="http:// immagine1.jpg" contiene, all'interno delle virgolette, l’indirizzo della prima immagine da visualizzare;
  • onmouseover='this.src = "http:// immagine2.jpg";' contiene, all’interno delle virgolette, l’indirizzo dell’immagine che si vuole mostrare al passaggio del mouse;
  • onmouseout='this.src = "http:// immagine1.jpg";' contiene, all’interno delle virgolette, l’indirizzo della prima immagine che si era voluto mostrare.


Questo è il metodo più semplice per creare un effetto rollover anche se esistono script che possono adattare meglio e rendere più flessibile l’effetto all’interno di un contesto.

 

10:35 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (0) | Trackback (0) | Segnala | Tag: tutorial, script, effetto rollover, immagine, link | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook

03/01/2011

Tag rare: marquee, per far scorrere del codice HTML

<marquee>

161558476.jpg


Il tag <marquee> è utilizzato per far letteralmente muovere un parte del codice HTML. Con questo tag è possibile creare effetti decorativi all’interno del blog, creare una galleria di foto scorrevoli o per far muovere una serie di banner.

Esempio di <marquee>:

HTML

  <marquee width="100" heigth="50" behavior="scroll" 
scrolldelay="100" direction="left" loop="infinite"
scrollamount="7">Codice HTML che scorre</marquee>



ESEMPIO
Codice HTML che scorre

Vediamo nel dettaglio cosa significano i singoli elementi:

behavior definisce il tipo di movimento che il codice HTML deve avere e può essere:

  • scroll: il codice si muove nella direzione indicata, quindi scompare e riappare nel punto di partenza;
  • slide: il comportamento è lo stesso dello scroll soltanto che una volta arrivato alla fine, il codice non riappare;
  • alternate: il codice HTML quando raggiunge la fine inverte la sua direzione e torna indietro.


scrolldelay definisce ogni quanto tempo, in ms, verrà riaggiornato il movimento.

direction definisce la direzione nella quale si deve muovere il codice HTML e può essere

  • left (sinistra);
  • right (destra);
  • down (giù);
  • up (su).

Se non viene indicata nessuna direzione il codice si muoverà automaticamente verso sinistra.

loop definisce il numero di volte il movimento dovrà ripetersi una volta raggiunta la fine. Accetta come parametro un qualsiasi numero intero oppure infinite se si vuole che il movimento non si fermi mai. Se nel parametro behavour è stato inserito il valore slide, però, qualsiasi valore di loop non verrà preso in considerazione.

scrollamount definisce la velocit, in pixel al secondo, con la quale il codice HTML si muoverà.

29/12/2010

Come personalizzare i titoli degli articoli

In questo articolo vi mostriamo come personalizzare i titoli dei post, come hanno già fatto alcuni amici di MyBlog.it:

titoli-myblog.jpg


Quello che dovete modificare è l’elemento “.content h3” all’interno del Foglio di stile.
Quindi, andate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Nella colonna destra scrivete:

  .content h3 {
}



All’interno delle parentesi graffe dovete inserire i valori da attribuire all’elemento. Come esempio vediamo alcuni dei parametri utili a gestire e personalizzare la grafica dei titoli degli articoli.

margin: 0px 0px 0px 0px;
definisce lo spazio che deve esserci tra l’elemento titolo e gli elementi che lo circondano, rispettivamente sopra, a destra, sotto e a sinistra.

padding: 5px 10px 5px 10px;
definisce lo spazio che deve esserci tra il bordo del titolo e il parametro margin, rispettivamente sopra, a destra, sotto e a sinistra.

font-size: 12px;
definisce la dimensione che deve avere il testo.

font-weight: bold;
associa l’effetto grassetto al testo. E’ possibile sostituire l’effetto bold con altri valori come normal, bolder, lighter, inherit oppure valori da 100 a 900 (es. 100, 200, 300…).

line-height: 150%;
definisce lo spazio che deve esserci tra una riga di testo e l’altra.

color: #FFF;
definisce il colore che deve avere il testo. E’ possibile sostituire i valori esadecimale (es. #FFF = bianco) con i nomi inglesi dei colori. Es. color: red; per avere un testo rosso, oppure blue e così via.

background: #4c4c4c;
definisce il colore di sfondo che devono avere i titoli.

background-image:url("http://indirizzo_immagine.jpg");
background-repeat:no-repeat;

definisce, se lo si desidera, l’immagine da utilizzare come sfondo ai titoli.


Il risultato finale che dovrete avere nella colonna destra del Foglio di stile è il seguente:

  .content h3 {
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
font-size: 12px
font-weight: bold;
line-height: 150%;
color:#FFF;
background-image:url("http://indirizzo_immagine.jpg ");
background-repeat:no-repeat;
}

 

10:49 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (1) | Trackback (0) | Segnala | Tag: tutorial, titolo, articolo | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook

22/12/2010

Come decorare la prima lettera di ogni paragrafo

paragrafo-myblog.jpg

In alcuni siti, specialmente in quelli di poesia, i paragrafi iniziano sempre con una lettera a cui è associato uno stile diverso dalle altre. Un paragrafo in HTML è compreso tra i tag <p> e </p>.
Oltre a migliorare l’effetto grafico, questa decorazione diventa utile nella lettura per non sbagliare riga in testi molto lunghi.

Entrate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile. Nella colonna destra incollate le seguenti righe.

CSS

    #center p:first-letter{
font-size:200%;
font-weight: bold;
}


Il codice CSS che abbiamo scritto sopra è solo un punto di inizio da cui partire per dare l’effetto che più desiderate. Potete cambiare il colore, aggiungere dei bordi, etc. Ad esempio:

CSS

    #center p:first-letter { 
border-style: outset;
border-width: 2px;
padding: 2px;
font-weight: bold;
font-size: 200%;
background-color: yellow;
}

 

 

10:41 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (4) | Trackback (0) | Segnala | Tag: tutorial, css, paragrafo, testo, script | OKNOtizie | |  del.icio.us | | Digg! Digg |  Facebook

Tutti gli articoli