Come applicare un'immagine di sfondo al titolo di un post

Per rispondere alla richiesta di una lettrice, vi spiego come inserire un' immagine di sfondo al titolo di un post (o ad una parte del post). E' molto semplice perché non bisogna agire sul codice. Vediamo come si fa.
Scrivete il titolo del post poi andate in modalità HTML cliccando sull'apposito tasto in alto a sx nella pagina dove state scrivendo il post.

A questo punto copiate e incollate il seguente codice prima del titolo:

<div style="background:url(URL_Immagine);">

Poi dopo il testo del titolo copiate e incollate questo:

</div>

Fate attenzione, dove dice "URL_Immagine" dovete inserire l'indirizzo dell'immagine di sfondo che avete scelto. Se l'immagine ce l'avete sul vostro computer dovete trasferirla sul web e prelevare l'URL utilizzando il programma online imageshack. Andando su questo sito dovete caricare l'immagine dal vostro computer e automaticamente il programma vi darà un URL per la vostra immagine. 

Tutto qui. Questo trucchetto funziona anche con il testo del post o parte di esso. Basta applicare il codice prima del testo a cui volete applicare lo sfondo e poi terminare col tag di chiusura </div> come abbiamo fatto per il titolo. 

Esempio di un titolo e di parte di un  post a cui è stato applicato un'immagine di sfondo verde a cerchi bianchi.

Come inserire una tabella in un post? Ma con Windows Live Writer, no?!

Oggi voglio parlarvi di uno strumento molto potente ma forse poco conosciuto da noi blogger mordi-e-fuggi. Si tratta di Windows Live Writer, un programma che potete scaricare da qui. Come dice la presentazione dello stesso sulla pagina del download, Windows Live Writer "semplifica la condivisione di foto e video pressoché in tutti i servizi di blog. Con Windows Live Writer puoi visualizzare in anteprima tutto ciò che aggiungi al blog e controllare esattamente i tipi di carattere, la spaziatura, i colori e le immagini prima di pubblicare. Vuoi foto e video sorprendenti nel tuo blog? È un'operazione facile e veloce".

Ecco come appare la schermata principale di Windows Live Writer. Lo sfondo  è quello del mio blog In pigiama.

Detto in parole più semplici è un po' come poter scrivere e pubblicare i post direttamente da un programma di videoscrittura. Se la cosa vi sembra banale provate per un attimo a pensare a come fareste per inserire una tabella in un post. Facciamo un esempio concreto. Sul mio blog In pigiama ho creato un tabellone di  foto botaniche su cui ho linkato tutti i post relativi a quelle piante. L'ho potuto fare solo con Windows Live Writer perché blogger non ha un tasto per le tabelle. "

Potete dare al  post la formattazione che volete, potete inserire una serie di emoticons, potete creare album di foto, e poi pubblicare il tutto comodamente dal programma. 

Dopo aver completato l'installazione (che può durare anche un bel po') Live Writer vi chiederà di inserire alcune informazioni sul vostro blog, come indirizzo e nome del blog, piattaforma utilizzata (Blogger, Wordpress, ecc.) e password. Non vi allarmate, questi dati serviranno al programma per comunicare col vostro blog e accedere automaticamente tutte le volte che lo utilizzate. Non c'è da spiegare altro perché il programma è uguale al Word di Microsoft  per intenderci, e immagino che quello lo sappiate usare tutti! 

Come inserire un pulsante Twitter nel nostro blog

Per inserire uno dei pulsanti che Twitter mette a disposizione per i blogger basta andare su questo link e seguire le procedure. Vediamo!

Sulla pagina sono presenti 4 tipi di pulsante:

pulsante Tweet: permette a chi clicca di  condividere un post su twitter;

pulsante Segui: permette a chi clicca di seguirci su twitter;

pulsante Hashtag: permette di condividere etichette o parole-chiave;

Pulsante Menzione: permette di consigliare il blog.

Credo che i più importanti siano i primi due, quindi se siete indecisi su quale pulsante scegliere,  vi consiglio il primo per far linkare i singoli post e il secondo per aumentare il numero dei nostri followers su twitter.

Scegliete il pulsante che vi serve e scegliete le opzioni del pulsante. Se non siete convinti di cosa selezionare fate delle prove, al massimo le cambiate. Prelevate infine il codice creato e incollatelo nel vostro blog utilizzando il widget HTML/Javascript che trovate in Design/Layout. Sistematelo nel punto desiderato e il gioco è fatto!

Come applicare uno sfondo ad un blog di Blogger

Oggi rispondo ad un'amica che mi chiede come applicare uno sfondo al  blog. E' molto semplice e abbiamo varie possibilità.  Innanzitutto si va su Modello/Personalizza/Sfondo. Si clicca sul triangolino al lato di Immagine di sfondo e si sceglie uno dei tanti sfondi messi a disposizione da Blogger. 

Se però nessuno di questi ci soddisfa, possiamo sempre crearne uno nostro con Paint o altro, o scegliere un'immagine che ci piace dal nostro computer. Per fare ciò si deve cliccare su "Carica immagine" e poi su "Scegli file", opzioni che trovate sempre nel menu di Immagine di sfondo. Fate attenzione: se l'immagine che scegliete come sfondo ha delle dimensioni inferiori a 1800x1600, l'immagine verrà riprodotta più volte. Nella foto sotto ad esempio, si vede lo sfondo con i fiori (un'immagine presa dalle carte da parati del sito di  PipStudio) che ad un certo punto si interrompe e si ripete di nuovo. E' decisamente antiestetico.

Se invece volete uno sfondo uniforme, le dimensioni dell'immagine che scegliete dovranno essere pari o superiori a 1800x1600. Blogger non accetta come sfondi, immagini che pesino più di 300 kb, è assurdo ma è così. Quindi dpi basso ma dimensioni alte.
Ovviamente potete anche non scegliere un'immagine come sfondo ma, applicare solo un colore. Questo lo potete fare da Colore tema principale.
Potete anche applicare un sfondo a motivi come quello che vedete nel mio blog Inpigiama. Questo tipo di sfondo lo trovate sotto la categoria Trasparente, sempre fra gli sfondi messi a disposizione da blogger, poi potete modificarne il colore da Temi consigliati oppure, meglio ancora, potete scegliere proprio la sfumatura di colore andando su Avanzato/Sfondi/Sfondo esterno.
Questo è tutto quello che c'è da dire sugli sfondi. Non dimenticate di salvare il tutto, cliccando su Applica a blog.
  Adios!

Come inserire un testo o un logo in filigrana sulle proprie immagini

Oggi vi spiegherò come tutelare le vostre immagini inserendo ad esempio il nome del vostro blog. Si tratta di inserire quella che viene chiamata filigrana o watermark.

Diciamo innanzitutto che ci sono 3 metodi. 

 Il primo, e anche il  più semplice, è quello che uso io:

Aprite l'immagine con Picasa o Paint o il programma che avete sul vostro PC e  che usate solitamente per il ritocco di immagini. Selezionate l'opzione testo e poi scegliete il colore, il font e la grandezza del carattere. Scrivete il testo che volete nel punto che volete (ad esempio il nome del vostro blog o il suo indirizzo) e salvate. Al posto del testo potete anche copiare e incollare sull'immagine un vostro logo.

Nell'immagine vedete 3 esempi di filigrana creati col Paint: il primo è una scritta senza sfondo,
 il secondo è con lo sfondo, il terzo è un logo copiato e incollato sopra l'immagine.

Il secondo metodo è quello di utilizzare un programma online, come PicMarkr. Accedendo alla pagina si potrà, in 3 semplici step, caricare una foto dal proprio pc o dai nostri profili nei social più popolari, inserire uno dei watermark a disposizione e salvare su pc o su picasa, facebook, flickr ecc. Il tutto gratuitamente.

Il terzo metodo consiste nello scaricare e installare sul proprio pc uno dei tanti programmi creati a questo scopo e disponibili online in versione free. Ad esempio, Fastwatermark, che però personalmente non ho provato. 

In tutti i casi io consiglio il primo metodo, non sarà professionale, ma è quello più facile e veloce.

Come eliminare il titolo da alcuni gadget di Blogger

In alcuni gadget di blogger sembra impossibile lasciare il campo titolo vuoto. Ma c'è un modo per evitare di farlo apparire. Basta scrivere nel campo titolo <h2> </h2> e il gioco è fatto!

Come eliminare il bordino intorno alle immagini e le ombreggiature ai lati del corpo centrale del blog

Monica del blog Cosa bolle in pentola? mi scrive per cercare di risolvere 2 problemi del suo blog.

Il primo riguarda il bordo delle immagini: anche se lo impostiamo su trasparente resta sembra un fastidioso bordino grigio.

Il secondo problema riguarda quelle orribili ombreggiature che appaiono ai bordi del corpo centrale dei post e della sidebar quando si imposta su trasparente o bianco sia lo sfondo esterno che quello interno. 

Entrambi i problemi si possono risolvere solo agendo sul codice HTML.

1. Andiamo in Design/Modello e clicchiamo su Modifica HTML. Clicchiamo nell'area del codice e digitiamo Ctr+F si aprirà un campo di testo in alto a destra che ci servirà per trovare il punto in cui modificare il codice. In questo campo scriviamo .post-body e diamo invio.

Se nel codice apparirà post-body, evidenziato, andiamo allo step 2, altrimenti proviamo a scrivere nella stringa di testo solamente .post. In pratica bisogna capire quale dei due tag è contenuto nel nostro modello HTML.

2. Adesso sempre tramite il campo di testo, cerchiamo ]]></b:skin> e andiamo a copiare e incollare  subito sopra questa riga  tutto il seguente codice:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

Oppure, se nel nostro modello il tag contenuto fosse .post, facciamo tutto come descritto allo step 2 ma copiamo e incolliamo questo codice invece del primo:

.post img, .post .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

A questo punto andiamo a vedere l'anteprima e il bordino grigio intorno alle foto dovrebbe essere sparito. Salviamo ed è fatta. 

Per quanto riguarda invece il secondo problema posto da Monica, dobbiamo sempre andare in Design/Modelli e cliccare su Modifica HTML. Clicchiamo poi il tasto F3 della tastiera e nella stringa di testo che apparirà scriviamo .content-outer { 

Individuata la riga dove è presente il tag .content-outer {  cancelliamo le seguenti righe di codice che troveremo subito sotto di esso:

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

 Guardate l'anteprima, le due ombreggiature dovrebbero essere sparite. A quel punto Salvate e il problema è risolto! 

N.B. Prima di effettuare qualunque operazione ricordatevi sempre di salvare per sicurezza il vostro modello HTML dallo strumento Backup/Ripristino e poi cliccando su "Scarica il modello completo".