Visualizzazione post con etichetta Designer Modelli. Mostra tutti i post
Visualizzazione post con etichetta Designer Modelli. Mostra tutti i post

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;
}

Come arrotondare bordi rotondi foto immagini blog blogger css

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 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 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 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 .

come ingrandire link commenti home page blogger 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 .

come modificare ingrandire carattere font link commenti home page blog 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 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 cambiare sostituire font carattere descrizione blog blogger

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.

come applicare modifiche css blog blogger designer modelli
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 cambiare il colore delle etichette nella Tag Cloud di Blogger con un CSS dal Designer di Modelli

Per modificare il colore predefinito utilizzato nel gadget “Etichette” di Blogspot dopo aver selezionato l’opzione “Nuvola” che consente la visualizzazione delle etichette in una Tagcloud con diverse misure (tra le cinque dimensioni disponibili in base al numero di post presenti in ogni etichetta di Blogger) ed utilizzare cinque colori diversi è possibile inserire un CSS direttamente dal Designer di modelli di Blogger.
Dalla Bacheca di Blogger nella sezione “Design”>Designer di modelli” nel menu “Avanzato”>”Aggiungi CSS” possiamo inserire nella finestra di testo il codice con il foglio di stile CSS:

.label-size-1 a {color: #FF0000;}
.label-size-2 a {color: #FF9900;}
.label-size-3 a {color: #F400A1;}
.label-size-4 a {color: #0000FF;}
.label-size-5 a {color: #03C03C;}

come cambiare colori etichette tag cloud blog blogger

Dopo l’inserimento del CSS in basso nella stessa pagina del “Designer di Modelli è possibile vedere l’anteprima con i nuovi colori delle etichette nella Tag cloud del gadget “Etichette” e salvare la modifica cliccando in alto a destra su “Applica al blog”
I colori inseriti nel CSS e visibili in viaggiareconilweb.blogspot.com possono essere eventualmente sostituiti dall’autore del blog,con altri più adatti allo sfondo del proprio blog di Blogger,semplicemente sostituendo nel CSS indicato il codice esadecimale del colore utilizzato per ogni misura di etichetta della Tagcloud di Blogger.

Come modificare la posizione dei gadget nel Footer di un blog su Blogger dal Designer di Modelli

Per modificare la disposizione e la dimensione degli elementi Gadget nel footer (il piè di pagina posizionato sotto al post) in un blog di Blogspot è possibile utilizzare dalla Bacheca di Blogger in “Design”>”Designer di modelli” nel menu “Layout” l’opzione “Layout piè di pagina” per scegliere se visualizzare un singolo elemento più grande oppure due o tre colonne composte da elementi più piccoli.

come modificare layout footer blogger

Come rimuovere in Blogger la scritta “Home” “Post più vecchi”/”Post più recenti” con un CSS nel Designer di Modelli

Dalla Bacheca di Blogger nella sezione “Design”>Designer di modelli” nel menu “Avanzato”>”Aggiungi CSS” inserire nella finestra di testo il codice con il foglio di stile CSS:

#blog-pager {
display:none;
}

come eliminare link blogger home post più vecchi recenti

Come cambiare il carattere e la dimensione del titolo del post con il Designer di Modelli di Blogger

Dalla Bacheca di Blogger in Design > Designer Modelli > Menu Avanzato > Titolo post > selezionare il carattere,impostare grassetto,corsivo e dimensioni del titolo del post > APPLICA AL BLOG

come cambiare dimensione carattere titolo post blogger

Come cambiare colore al titolo del blog con il Designer di Modelli di Blogger

Dalla Bacheca di Blogger in Design > Designer Modelli > Menu Avanzato > Titolo blog > Colore Titolo > APPLICA AL BLOG

come cambiare colore titolo blog

Come rimuovere in Blogger la scritta "Iscriviti a: Post (Atom)" con un CSS nel Designer di Modelli

Dalla Bacheca di Blogger in “Design”>Designer di modelli” nel menu laterale “Avanzato” selezionare ”Aggiungi CSS” ed aggiungere nella finestra di testo  il foglio di stile CSS:

.feed-links {
display:none;
}

come eliminare link iscriviti post atom blogger

Cerca tra gli appunti per Blogger !

Ricerca personalizzata