Come arrotondare i bordi delle foto inserite in un post del blog di Blogger

Per modificare la visualizzazione degli angoli delle immagini postate negli articoli su un blog di Blogspot e cambiare i bordi rettangolari delle foto per farli diventare tondi è possibile utilizzare uno specifico foglio di stile CSS da aggiungere da "Modello">"Personalizza" nel menu "Avanzato">"Aggiungi CSS" del Designer di Modelli di Blogger seguendo la specifica procedura per aggiungere CSS in Blogger.
Il CSS da inserire per rendere tondeggianti gli angoli delle foto nei post di Blogger è il seguente:

.post-body img, .post-body .tr-caption-container { 
border-radius: 20px;
}

Per aumentare o diminuire la parte rotonda dei bordi arrotondati delle immagini nei post di Blogger è possibile variare il valore in pixel (al momento 20px) presente nel CSS.
E' possibile visualizzare un esempio di un blog su Blogger contenente nei post immagini con i bordi arrotondati al seguente link: viaggiareconilweb.com

Come risolvere problemi di layout nei template delle Visualizzazioni Dinamiche di Blogger

Per superare alcuni inconvenienti relativi alla corretta visualizzazione nel browser web  degli elementi del Layout e della grafica dei modelli delle Visualizzazioni Dinamiche di Blogger al momento può essere utile intervenire direttamente con una modifica HTML nel codice del template di Blogger.
La modifica prevede, dopo aver individuato con una scorciatoia da tastiera specifica per Blogspot, lo script:

<script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 0);
    </script>

la sostituzione nel codice del valore 0 con il valore 800 in modo da vedere correttamente, in attesa di una risoluzione definitiva di questo tipo di inconveniente, il blog di Blogspot che utilizza come modello un template delle Visualizzazioni Dinamiche di Blogger,

Come aggiungere gli attributi ALT e TITLE alle immagini inserite in un post di Blogger

Per far conoscere ancor meglio a Google il contenuto delle foto postate in un blog di Blogger ed ottimizzare così in ottica SEO le immagini presenti in un post  è possibile aggiungere al tag IMG delle foto l'attributo ALT (alternativo) e l'attributo TITLE da mettere direttamente dalla barra degli strumenti che si visualizza dopo aver caricato una foto nel post dall'apposito strumento di inserimento immagini dell'editor di Blogger.

Per aggiungere quindi al tag IMG dell'immagine con l'attributo ALT un testo alternativo che descrive il contenuto dell'immagine e con l'attributo TITLE ulteriori informazioni sull'immagine (che si visualizzano in un tooltip passando con il mouse sopra l'immagine) possiamo cliccare sul link "Proprietà" sull'icona a forma di ingranaggio "Cambia" della barra per aprire la finestra che consente l'inserimento degli attributi ALT e TITLE alle foto di Blogspot direttamente con l'editor in modalità "Scrivi" senza dover aggiungere gli attributi in modo manuale in modalità HTML

In "Proprietà Immagine" "Modifica Immagine" bisognerà riempire gli appositi campi per l'attributo ALT lo spazio "Testo alternativo" e per l'attributo TITLE il campo "Testo del titolo" con i contenuti testuali che servono per descrivere in modo più completo e diretto al motore di ricerca di Google cosa rappresenta l'immagine inserita nel post di Blogger.

Come mettere un link in una immagine all’interno di un post di Blogger

Come visualizzare sul PC la versione per smartphone di un blog su Blogger

Per vedere sullo schermo del PC o del notebook la versione per dispositivi mobili di un blog di Blogger (attivabile nella Bacheca di Blogger da "Impostazioni">"Modello">"Cellulare")  così come la vedono i lettori che si collegano al blog con uno smartphone è possibile aggiungere all'URL del blog di Blogspot (o del dominio personalizzato) la query   /?m=1

Per controllare quindi la versione per smartphone sarà necessario inserire l'URL nella barra degli indirizzi del browser che si utilizza, per i blog di Blogger con dominio personalizzati in questa forma:
 http://www.viaggiareconilweb.com/?m=1
oppure per i blog di Blogspot in questo modo:
http://fabriziocastelli.blogspot.com/?m=1

! Attenzione !

Al momento disattivare la versione per dispositivi mobili di Blogger disabilita contemporaneamente le funzionalità "Avanzate" del Designer di Modelli che non potranno più essere utilizzate se non ripartendo da una versione senza personalizzazioni di un template di Blogger.

Come centrare il contenuto del gadget Statistiche di Blogger con un CSS

Per posizionare al centro il contenuto del gadget contatore delle "Statistiche" in un blog di Blogger è possibile, seguendo la procedura per inserire un CSS dal Designer di Modelli, utilizzare il seguente foglio di stile CSS:

#Stats1{ 
text-align:center; 
}

L'inserimento del CSS consente di mettere al centro del gadget, posizionato nella sidebar o nel footer, i dati relativi alle visualizzazioni totali e il grafico delle visite del blog presente nel modulo.

Come creare GIF animate dalle proprie foto direttamente online

Per realizzare GIF animate da immagini o foto conservate sul proprio PC , da URL già online o da Webcam è possibile utilizzare direttamente su Internet il servizio Picasion GIF Maker
L'applicazione web Picasion consente infatti di caricare tramite il tasto "Scegli file" le foto dal proprio PC (è possibile aumentare il numero delle immagini da inserire nella GIF animata da "Add one more picture") che, dopo aver impostato la dimensione (Size) e la velocità (Speed),verranno mostrate in sequenza nella GIF animata da creare.
Dopo aver cliccato su "Create Animation" nella schermata successiva si potrà ottenere il link diretto alla GIF, il codice HTML da utilizzare per incorporare l'immagine creata nel blog di Blogger (tramite il gadget HTML/Javascript) o di Wordpress (in un widget "Testo")  il BBcode da utilizzare per i Forum e, da "Save this animation" sarà possibile scaricare la Gif animata sul proprio computer.

Come centrare la didascalia in un gadget FOTO di Blogger

Per posizionare al centro il testo utilizzato come "Didascalia" sotto ad una immagine inserita nel layout del blog tramite il gadget "Foto"di Blogger (come il banner di Prove di blogger presente nella colonna laterale di Web per blog ) è possibile inserire il testo nell'apposito campo "Didascalia" della finestra di configurazione del gadget Foto in questa forma:

<div style="text-align:center;">Testo della didascalia</div>

Nello stesso banner per centrare la foto rispetto alla colonna che la ospita nel blog di Blogger è stata utilizzata questa soluzione:

Come centrare l'immagine inserita in un gadget FOTO di Blogger con un CSS

Per centrare i titoli dei gadget (nell'esempio: Realizzato con) presenti nella sidebar di Blogspot è possibile utilizzare il seguente procedimento:

Come centrare il titolo dei gadget in un blog di Blogger

Per chi desiderasse aprire il link del gadget "Foto" in una nuova finestra del browser è possibile applicare una modifica direttamente nel codice HTML del blog

Come aprire il link del gadget FOTO in una nuova finestra del browser in un blog di Blogger

Come evidenziare in grassetto le etichette dei post di Blogger

Per visualizzare in grassetto e mettere così in maggior evidenza le etichette presenti nel gadget "Etichette" della sidebar di Blogger è possibile aggiungere, utilizzando la procedura per aggiungere un CSS ,il seguente foglio di stile:


#Label1 {
font-weight: bold;
 }

leggi anche...
Come cambiare il colore delle etichette nella Tag Cloud di Blogger con un CSS dal Designer di Modelli

Come avere le foto di uguale larghezza nei post di Blogger

Per inserire in Blogger le immagini dei post con una larghezza fissa ed uguale in tutti i post è possibile aggiungere dal Designer di Modelli, utilizzando la procedura per aggiungere un CSS ,il seguente foglio di stile CSS:

.post-body img { width: 450px; height: auto;
}

Il valore di larghezza in pixel (450) che imposta in modo automatico le foto del blog può essere eventualmente aumentato o diminuito in base alla dimensione della colonna del post che le contiene.

Come visualizzare le immagini con Lightbox in un blog di Blogger

Per mostrare le foto del blog su Blogger con la visualizzazione Lightbox che permette al lettore ,dopo aver cliccato su una foto,di visualizzare l'immagine in una nuova finestra sovrapposta al blog è possibile selezionare in "Impostazioni">"Post e Commenti" dal menu a tendina alla destra di "Mostra immagini con Lightbox" la voce "SI" e cliccare poi in alto a destra su "Salva Impostazioni".

L'opzione,se il post comprende più immagini, consente di vederle tutte in sequenza ed anche disponibili come miniature nella parte bassa della finestra indipendentemente dal fatto che siano caricate sul blog di Blogspot o inserite da URL esterni o di altri servizi di hosting online per immagini.

(Nella precedente bacheca di Blogger è possibile attivare la funzione Lightbox da "Impostazioni">"Formattazione")

Come centrare il titolo dei gadget in un blog di Blogger

Per posizionare al centro il titolo dei gadget della colonna laterale in un blog di Blogger è possibile,seguendo la procedura per inserire un CSS dal Designer di Modelli,utilizzare il seguente foglio di stile CSS:

.sidebar h2 {
text-align:center;
}

che consente di mettere al centro il titolo dei widget della sidebar come visibile in comefareblog.blogspot.com

Come ingrandire il link “commenti” nella Home Page di un blog di Blogger

Per mettere in maggior evidenza,in un blog di Blogger, il link “commenti” che mostra il numero dei commenti già postati e che collega alla pagina del post nella quale si possono leggere i commenti dei lettori ed inserire nuovi commenti è possibile utilizzare un foglio di stile CSS da applicare al blog dal Designer di Modelli .

Il CSS che permette di modificare ed aumentare la dimensione in pixel del carattere, come visibile sotto ai post nella Home Page di Test per blogger, è il seguente:

.post-comment-link {
font-size: 16px;
}

e può essere aggiunto al codice del template utilizzando direttamente la procedura per inserire un CSS in Blogger .


Per impostare una diversa grandezza del font del link “commenti” rispetto a quella che si ottiene inserendo il CSS è sufficiente cambiare il valore in pixel (16) con un numero maggiore o minore in base alla dimensione che si desidera visualizzare nella Home Page di un blog su Blogger.

Come visualizzare un gadget solo in un post o in una specifica pagina di un blog su Blogger

Per inserire nel layout di un blog su Blogger un gadget da far vedere ai lettori solo in uno specifico post è possibile aggiungere dalla Bacheca di Blogger in “Design”>”Modifica HTML” una “condizione” che consenta di ottenere questo tipo di visualizzazione del gadget nella sidebar del blog.
Dopo aver,per sicurezza,salvato una copia del template e selezionato lo strumento “Espandi modelli widget” bisognerà trovare con una scorciatoia da tastiera  inserendo nella casella di ricerca il codice che identifica il gadget  (nell’esempio in basso HTML1)  la sezione di codice HTML che si riferisce al widget che si desidera mostrare solo in un post o in una singola pagina statica.
Individuata la sezione di codice HTML del gadget è necessario inserire subito dopo la stringa:

<b:widget id='HTML1' locked='false' title='' type='Text'>
<b:includable id='main'>

Il seguente codice:

<b:if cond='data:blog.url == "URLdelPost"'>

e subito prima di:

</b:includable>
</b:widget>

Bisognerà aggiungere il codice HTML:

</b:if>

 

Questa modifica (da salvare cliccando a destra su “SALVA MODELLO”) consente,sostituendo nel codice aggiuntivo a URLdelPost l’esatto indirizzo del post ,di rendere visibile un gadget presente nella colonna laterale di un blog di Blogger solo ai visitatori di quella specifica pagina che contiene il post.

Come mettere un form di iscrizione per email ai nuovi post pubblicati nel blog di Blogger

Per aggiungere in un blog di Blogger,per il quale è già stato creato un feed con le funzionalità avanzate di FeedBurner, un widget che consenta ai lettori del blog di iscriversi per ricevere una newsletter automatica con i nuovi post direttamente nella propria mail è possibile utilizzare, oltre che il form specifico di FeedBurner, anche il gadget automatico disponibile dalla Bacheca di Blogger nella sezione “Layout” cliccando sul modulo “Aggiungi un gadget”.

Tra i gadget “Base” di default è infatti disponibile il modulo “Segui tramite email” per rendere più facile la lettura del blog agli utenti che, dopo l’iscrizione, riceveranno automaticamente un messaggio di posta elettronica per confermare l'iscrizione; da quel momento, con frequenza giornaliera (solo nei giorni in cui vengono pubblicati nuovi post), riceveranno una email automatica contenente l’aggiornamento dei nuovi post pubblicati dall’autore del blog di Blogger.
Nella successiva finestra di configurazione di “Segui tramite email” il feed di FeedBurner del blog viene individuato automaticamente dal sistema ed è possibile (prima di aggiungere il form nel layout cliccando su “SALVA”) modificare il titolo da dare al gadget “Iscriviti per email” del blog di Blogspot.

Grazie a Moon del blog Figlia della Luna per il premio “Stylish Blogger Award”



a MR Sartoria di Una sarta a casa vostra per il premio “Liebster Blog”

ed a  Francesca Moggi di AcquaCluster per il “Sunshine Award 2011”

che condivido con molto piacere con tutti i lettori di APPUNTI PER BLOGGER !

Come cambiare il carattere utilizzato nella Descrizione di un blog di Blogger

Per modificare il font utilizzato nella Descrizione in un blog su Blogger (nei casi in cui non è permesso sostituire il carattere con uno nuovo direttamente dal sottomenu “Descrizione del blog” nel menu “Avanzato” del Designer di Modelli di Blogger) è possibile applicare un foglio di stile CSS per poter mettere un diverso carattere nel testo posizionato in basso sotto al titolo del blog.
Dalla Bacheca di Blogspot nella sezione “Design”>”Designer di Modelli” in “Avanzato”>”Aggiungi un CSS” è necessario inserire con copia incolla,seguendo la procedura per aggiungere un CSS,il seguente codice:

.Header .description {
font-family:Arial;
}

Nel quale il termine che indica il carattere (Arial) può essere sostituito con il nome di un diverso font,tra quelli disponibili nel blog,in modo da utilizzare per la descrizione di un blog su Blogger un carattere diverso da quello applicato di default e modificabile solo dal sottomenu “Testo pagina” insieme al carattere utilizzato per scrivere il post.

Come recuperare la password smarrita o lo username dimenticato in un blog di Blogger

Per il recupero della password dimenticata o del nome utente utilizzato per creare un blog su Blogger è possibile compilare con le informazioni richieste direttamente il modulo automatico “Hai dimenticato nome utente o password”.
Questo modulo di Blogger consente inserendo l’URL del blog su Blogspot o l’indirizzo email relativo all’account con il quale è stato creato il blog di ottenere per email le informazioni su username e password smarrite e le indicazioni relative alla procedura per ripristinare l’accesso al proprio account e poter quindi fare correttamente il login dalla Home Page di Blogger per accedere alla propria Bacheca dalla quale gestire il blog di Blogspot .

Come modificare il link Ulteriori Informazioni in un post di Blogger

Per cambiare il testo da visualizzare nel “Continua a leggere” (Read More) inserito in un post di Blogger utilizzando lo strumento Stecca da Biliardo dell’editor di Blogspot è possibile modificare l’impostazione direttamente dalle opzioni del post di Blogger.
Dalla Bacheca di Blogger in "Design">"Elementi pagina" "Layout">”Post sul blog” possiamo accedere infatti cliccando su “Modifica” alla finestra “Configura post sul blog” nella quale in alto troviamo le opzioni della pagina principale.
Per modificare i termini e le parole che automaticamente verranno visualizzate nel link “Continua a leggere” è sufficiente sostituire nello spazio in corrispondenza di “Testo del link della pagina di post” alla frase di default "Ulteriori informazioni" “Continua a leggere …”  il nuovo testo con i termini da visualizzare e cliccare su “Salva” in basso nella stessa finestra per applicare la modifica che permette di far leggere ai visitatori del blog una frase diversa nel link che serve per rimandarli,dalla Home Page,alla lettura del post completo nella singola pagina del post in un blog di Blogger.

Come collegare il blog alla pagina fan di Facebook ed al profilo con RSS Graffiti

Per collegare il blog a Facebook in modo da pubblicare automaticamente i post di un blog su Blogger sulla pagina fan o sul profilo personale del blogger è possibile utilizzare in alternativa al collegamento con Networked Blogs anche l’applicazione di Facebook RSS Graffiti.

RssGraffiti consente infatti,dopo l’autorizzazione dell’utente,di collegare uno o più  feed RSS /Atom,di un sito web,di un blog,di Twitter o di un canale YouTube ad un profilo Facebook ed a tutte le pagine fan,eventi o di altre applicazioni create ed amministrate da quel profilo e di pubblicare quindi  automaticamente gli aggiornamenti con i nuovi post.


Per postare e visualizzare quindi direttamente sulla pagina fan o sul profilo Facebook i post di un blog di Blogger è sufficiente inserire il feed del proprio blog nella pagina di configurazione dell’applicazione RSS Graffiti ed autorizzare la pubblicazione automatica del flusso con gli aggiornamenti sulla pagina di Facebook da parte di RSSGraffiti.

Come inserire un CSS in un blog su Blogger

Per inserire un foglio di stile CSS in Blogger,in modo da poter applicare comandi specifici o modifiche alle caratteristiche di un elemento del layout oppure ad un gadget del blog, è possibile utilizzare dalla Bacheca di Blogspot nella sezione “Design” "MODELLO" da "PERSONALIZZA" direttamente il Designer di Modelli che nel menu “Avanzato” prevede la possibilità di aggiungere automaticamente un CSS dal sottomenu “Aggiungi un CSS” come in questi esempi:

Come centrare il titolo in un blog di Blogger
Come nascondere la Navbar in un blog su Blogspot

Dopo aver inserito il CSS con copia incolla nella finestra di “Aggiungi un CSS” e visualizzato l’anteprima della modifica in basso nella stessa pagina (può essere necessario dopo aver posizionato il cursore alla fine del CSS,cliccare sul tasto “INVIO” della tastiera del computer per attivare il CSS) è possibile cliccare in alto a destra sul bottone “Applica al blog” per rendere definitiva la modifica.

Nella stessa finestra possiamo mettere,a seguire dal rigo successivo,anche più di un CSS per applicare modifiche diverse al codice HTML del blog di Blogspot ed ignorare quelle previste di default nel modello.

Per cancellare eventualmente le modifiche applicate al template,ad un elemento del post oppure ad un widget di un blog di Blogger con un foglio di stile CSS è sufficiente cancellare il codice con il cursore e cliccare subito dopo sul pulsante “Applica al blog”.

Come non visualizzare il modulo del post e le colonne laterali in una pagina statica di Blogger

Per non mostrare in una pagina aggiuntiva di Blogger l’elemento centrale del post e le sidebar laterali è possibile inserire nel codice HTML del template prima del tag:
</head>

la seguente condizione:

<b:if cond='data:blog.url == &quot;URLPAGINA&quot;'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
.columns, .fauxcolumns {
display:none !important;
}
</style>
</b:if>

Inserendo al post di URLPAGINA l'indirizzo specifico della pagina.