La maggior parte delle persone che si avvicina al mondo del blogging parte con il creare un blog affidandosi ad una piattaforma gratuita come Blogger. E’ successo anche a me ed è proprio lì che ho cominciato a studiare i codici HTML e CSS. Una necessità indetta dal voler personalizzare ulteriormente il mio diario online andando a modificare piccoli o grandi dettagli di un qualsiasi template di Blogger avessi attivato. Dopo aver visto come creare un blog su Blogger in meno di un’ora ho pensato di raccogliere in un unico post tutte quelle basi di codice utili a sapere come personalizzare un blog su Blogger. Una piccola guida con tutte le principali personalizzazioni da fare quando vogliamo migliorare o aggiungere determinate funzioni al nostro sito web.
Cosa sono i codici HTML e CSS
Prima di spiegare passo passo come personalizzare un blog autonomamente intervenendo sugli script di programmazione occorre capire cosa sono e come funzionano i codici HTML e CSS che andremo ad utilizzare per ottenere le nostre modifiche.
- HTML. L’Hyper Text Markup Language è il principale linguaggio di programmazione che viene utilizzato per costruire un sito internet. E’ un file testuale formato da dei marcatori specifici che servono per dare dei comandi al browser in modo che possa interpretare il documento trasformandolo in quello che l’utente vede.
- CSS. Il Cascading Style Sheet è un particolare linguaggio di programmazione utilizzato per gestire e personalizzare l’aspetto grafico di una pagina web. Dai colori ai font e persino i bordi, il posizionamento degli elementi ecc.
Se vuoi approfondire queste due tematiche ti consiglio di leggere “Come è fatto un sito web: introduzione al codice HTML” e “Come è fatta una pagina web: introduzione al codice CSS“.
Come modificare il codice HTML e CSS su Blogger
Per poter procedere in tutta sicurezza, prima di personalizzare un blog su Blogger, occorre fare sempre un salvataggio del template procedendo in questo modo:
- Accedere alla propria bacheca di Blogger.
- Scegliere il blog da salvare nel caso ne stiamo gestendo più di uno.
- Selezionare Tema nel menu a sinistra.
- Nella sezione Il mio tema cliccare sulla freccia vicino a Personalizza.
- Selezionare dal menu a tendina Esegui backup.
- Si aprirà una finestra con scritto “Scarica una copia di backup del tuo tema per non perdere le modifiche. Tieni presente che alcuni gadget non possono essere sottoposti a backup” su cui bisogna cliccare Scarica.
Verrà salvato nel pc un file con estensione .XML che potremo rinominare con il nome del blog e sarà utile a ripristinarlo in caso di errori o mal funzionamenti dovuti alle nostre modifiche. Per ripristinare il blog da un salvataggio precedente si procede così:
- Accedere alla propria bacheca di Blogger.
- Scegliere il blog da ripristinare.
- Nel menu a sinistra selezionare Tema.
- Nella sezione Il mio tema cliccare sulla freccia vicino a Personalizza.
- Dal menu a tendina cliccare su Ripristina.
- Si aprirà una finestra con scritto “Puoi caricare un tema da un file sul tuo computer” su cui dobbiamo cliccare Carica.
A questo punto selezioniamo e carichiamo il file .XML salvato nel nostro pc applicando il modello.
Come modificare il codice HTML di un blog su Blogger
Dopo aver precedentemente salvato il template del nostro blog su Blogger procediamo con il modificare il codice HTML del in questo modo:
- Accedere alla bacheca di Blogger.
- Scegliere il blog da aggiornare qualora se ne gestiscano più di uno.
- Selezionare e cliccare su Tema nel menu a sinistra.
- Nella sezione Il mio tema cliccare sulla freccia vicino a Personalizza.
- Selezionare dal menu a tendina Modifica HTML.
Si aprirà una schermata in cui ci troveremo davanti tutto il contenuto HTML relativo alla struttura del nostro template su Blogger.
Come è fatto il codice sorgente HTML di un template su Blogger
Sulla sinistra del codice troviamo mostrati i numeri delle righe che lo caratterizzano e vicino ad alcuni di essi delle freccette nere. Le frecce nere suddividono il codice in sezioni e cliccandoci sopra servono per mostrare o nascondere automaticamente ulteriori blocchi di codice inerenti a quella sezione. In alto a destra invece troviamo 5 icone a pulsanti che servono rispettivamente a:
- Vai al widget. L’icona con i quattro quadratini permette di individuare subito il codice sorgente dei widget che abbiamo attivato nel template.
- Anteprima tema. L’occhio serve per vedere un’anteprima del blog via via che interveniamo nel codice. In questo modo possiamo verificare subito il risultato e se non siamo soddisfatti cancellare le ultime modifiche.
- Ripristina i temi widget ai valori predefiniti. L’icona con la pagina e la freccia circolare al suo interno riporta alle impostazioni predefinite tutti i widget.
- Annulla le ultime modifiche. La freccia annulla l’ultima modifica apportate al codice.
- Salva. Il dischetto salva e applica tutte le nostre modifiche.
Giunti a questo punto per inserire una nuova porzione di codice, digitando o inserendo le stringhe relative con il copia-incolla del mouse, basta posizionarsi con il cursore alla fine della riga precedente e digitare il tasto Invio sulla tastiera per andare a capo e procedere come opportuno.
! Per facilitarti la lettura del codice tieni presente che ogni sezione inizia con <b:includable id='...>
e termina con </b:includable>
.
Come modificare il codice CSS di un blog su Blogger
Quando occorre personalizzare un blog su Blogger intervenendo nel codice CSS di un template si può operare in due modi:
- Direttamente nel codice del tema entrando in Modifica HTML e andando ad aggiungere il comando CSS prima della chiusura del tag
]]></b: skin>
. - Servirsi dell’apposita opzione Aggiungi CSS messa a nostra disposizione direttamente dalla piattaforma Blogger procedendo in questo modo:
- Accedere alla bacheca di Blogger.
- Selezionare Tema nel menu a sinistra.
- Nella sezione Il mio tema cliccare su Personalizza.
- Nel menu a sinistra andare su Avanzate.
- Selezionare la freccia in basso e scorrere fino alla dicitura Aggiungi CSS.
Si prosegue inserendo nella finestra bianca sottostante il codice CSS necessario per poi cliccare sul pulsante Salva (l’icona a forma di dischetto posta in basso a destra nella schermata).
! In Modifica HTML la sezione <b:skin></b:skin>
è quella che racchiude tutti i CSS del template. E’ consigliabile aggiungere le nuove regole partendo sempre dalla fine in entrambe le soluzioni.
Come personalizzare un blog aggiungendo i gadget di Blogger
Nell’accingerci a personalizzare un blog su Blogger, a seconda della funzione che vogliamo integrare, può capitare di dover ricorrere all’aggiunta di codici HTML o JavaScript in un gadget (o widget) di Blogger. In questo caso si deve procedere in questo modo:
- Accedere alla bacheca di Blogger.
- Scegliere il blog da modificare qualora ne gestissimo più di uno.
- Selezionare Layout nel menu a sinistra.
- Nell’area da modificare cliccare su Aggiungi gadget.
- Nella finestra che si apre scegliere HTML/JavaScript.
- Cliccare sul pulsante con simbolo “+” Aggiungi.
Si aprirà una finestra nella quale possiamo facoltativamente dare un nome/titolo al gadget (se vogliamo che questo appaia nel blog) e al cui interno del form va scritto o incollato il codice HTML o JavaScript di nostro interesse. Infine cliccando su Salva il gadget sarà attivo. Per modificare successivamente le impostazioni del gadget basterà cliccare su Modifica presente sotto ogni widget nella schermata generale del layout. Di seguito un esempio di widget About Me creato e configurato per il blog di prova fashionsnobber.blogspot.com che utilizzo durante le mie consulenze per blogger nel spiegare come funziona e personalizzare questa piattaforma gratuita.
! Nel caso in cui occorra intervenire nel codice HTML del template per modificare i gadget è bene ricordare che ognuno di essi inizia con la riga <b:widget id=...>
e termina con </b:widget>
.
Come personalizzare un blog su Blogger: le basi di codice più utili
Dopo aver capito come e dove mettere le mani all’interno di un template standard di Blogger possiamo passare ad una raccolta con le principali basi di codice da copiare e utilizzare, con le opportune modifiche, al fine di velocizzare la nostra personalizzazione del blog.
Centrare l’header quando si utilizza un’immagine logo
Molti blog sono caratterizzati da un logo personale che spesso viene preferito inserire centralmente nell’header. Per centrare il logo nell’intestazione del blog bisogna andare in Modifica HTML e cercare il pezzo di codice (generalmente posto all’interno della prima metà) che similmente dichiara:
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
Sostituendo la riga evidenziata con:
style='display:block; margin-left:auto; margin-right:auto;'/>
Oppure in Aggiungi CSS inserire:
#Header1_headerimg {
display: block;
margin-left: auto;
margin-right: auto;
}
Aggiungere più elementi gadget all’header
Di default i template standard di Blogger non consentono l’aggiunta di ulteriori widget nella sezione dell’intestazione. Per ovviare a questo problema possiamo andare in Modifica HTML cercando la seguente stringa di codice:
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
Il valore evidenziato va cambiato con il numero di gadget che si desidera inserire nell’header come in questo esempio in cui è stato modificato con 3:
<b:section class='tabs' id='crosscol' maxwidgets='3' name='Cross-Column' showaddelement='no'>
Una volta salvata la modifica appena entriamo nella pagina Layout ci sarà consentito spostare un qualsiasi widget sopra o sotto il Gadget Intestazione Pagina.
Come personalizzare il menu di navigazione delle pagine
Molto spesso i blogger più esigenti non si accontentano di come appare di default il menu principale delle pagine. Occorre quindi intervenire personalizzandolo. Vediamo come in base ad ogni esigenza.
Centrare il menu nel layout:
Se vogliamo fare in modo che il menu delle pagine sia centrato nel layout di un blog di Blogger bisogna inserire in Aggiungi CSS il seguente codice:
.PageList {
text-align:center !important;
}
.PageList li {
display:inline-block !important;
float:none !important;
}
Impostare in grassetto solo la voce del menu attiva
Per fare in modo che la voce del menu attiva sia in grassetto basta inserire il seguente codice in Aggiungi CSS:
.PageList LI.selected A {
font-weight: bold !important;
}
Eliminare la sfumatura dal menu
Alcuni template standard di Blogger hanno una sfumatura gradiente che caratterizza il menu di navigazione. Per eliminarla occorre andare in Modifica HTML e cercare una stringa di codice simile a questa:
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
Cancellando la dicitura evidenziata la sfumatura sparirà. Nel caso venga segnalato un errore cancellare solo la dicitura tra le due parentesi tonde lasciandole vuote così: $
()
.
Aggiungere, eliminare o modificare i bordi al menu
Nel caso in cui il template standard del nostro blog su Blogger presenti dei bordi intorno al menu di navigazione non di nostro gusto possiamo intervenire andando in Modifica HTML e nella stringa di codice simile a questa:
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) none $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) none $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) none $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
Sostituire le voci evidenziate con il valore di nostro gradimento.
Ricordo che i principali valori da utilizzare per personalizzare i bordi di un elemento sono:
- none. Nessuno.
- hidden. Per nasconderlo.
- dotted. Puntinato.
- dashed. Tratteggiato.
- solid. Linea continua piena.
- double. Doppio bordo.
! In Modifica HTML tutti i tag caratterizzati dalla nomenclatura tabs sono quelli in cui intervenire per modificare il menu di navigazione.
Inserire un banner
Nel personalizzare un blog serve sempre sapere come inserire un banner nel layout. Per farlo basta semplicemente andare in Layout e aggiungere un gadget HTML/JavaScript in cui inseriremo il seguente codice:
<div align:center><a href="https://url_del_sito_su_cui_vogliamo_rimandare" target="_blank><img src="https://indirizzo_immagine" alt="nome_immagine"/></a></div>
Se volessimo mettergli anche una didascalia invece avremo:
<div align:center><a href="https://url_del_sito_su_cui_vogliamo_rimandare" target="_blank><img src="https://indirizzo_immagine" alt="nome_immagine"/></a><p>Testo della didascalia</p></div>
Le diciture evidenziate vanno ovviamente modificate in base alle nostre esigenze.
Inserire dei pulsanti social nel layout di Blogger
E’ sempre più opportuno e buona norma inserire dei bottoni social che rimangano sempre visibili all’interno del layout principale di un blog. La scelta migliore è quella di inserirli sotto il logo nell’header del blog. Per farlo occorre andare in Layout e aggiungere un widget HTML/JavaScript composto da questo codice:
<!-facebook->
<a href='https://link_pagina_facebook/' target='_blank'><img alt='facebook' src="https://indirizzo_immagine.png" width= "25" height="25" title=''/></a>
<!-instagram->
<a href='https://link_profilo_instagram/' target='_blank'><img alt='twitter' src="https://indirizzo_immagine.png" width= "25" height="25" title=''/></a>
<!-pinterest->
<a href='https://link_profilo_pinterest/' target='_blank'><img alt='pinterest' src="https://indirizzo_immagine.png" width= "25" height="25" title=''/></a>
<!-twitter->
<a href='https://link_profilo_twitter/' target='_blank'><img alt='twitter' src="https://indirizzo_immagine.png" width= "25" height="25" title=''/></a></!-twitter-></!-pinterest-></!-instagram-></!-facebook->
Le diciture evidenziate vanno modificate in base ai nostri link social, ai link delle immagini che caratterizzeranno i pulsanti e i valori numerici in base alla grandezza in pixel che avranno i bottoni. I pulsanti saranno posizionati uno di fianco all’altro e ovviamente possiamo aggiungerne anche altri semplicemente inserendo una stringa di codice in più inerente ad ogni social.
Centrare i titoli dei post blog
Di default i titoli dei blog post sono allineati a sinistra. A gusto personale c’è chi li predilige centrali e chi a destra. Per personalizzarne l’allineamento basta andare in Aggiungi CSS ed inserire uno dei due seguenti codici in base alle nostre esigenze.
Allineamento centrale:
h3.post-title {
text-align:center !important;
}
Allineamento a destra:
h3.post-title {
text-align:right !important;
}
Nascondere il titolo nelle pagine statiche
Il più delle volte le pagine statiche sono quelle presenti anche nel menu di navigazione e molti blogger non amano ne sia visibile il titolo visto che già è evidenziato dal menu come pagina attiva. Per far si che il titolo delle pagine non appaia bisogna andare in Modifica HTML e senza espandere i modelli widget cercare la riga con tag di chiusura </head>
. Subito sopra si incolla il seguente codice:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
h3.post-title {
display:none;
visibility:hidden;
}
</style>
</b:if>
Nascondere la data di pubblicazione dei post
Molti blogger sostengono che la data di pubblicazione può essere un deterrente che allontana i lettori da tipologie di contenuti ritenute “sempre verdi“. Ossia post blog che trattano un argomento poco incline ad aggiornamenti e sempre valido anche a distanza di anni. Per questo motivo sentono la necessità di nascondere la data di pubblicazione inserendo in Aggiungi CSS il seguente codice:
.date-header {
display: none;
}
Sostituire “Post più recente“, “Home” e “Post più vecchi” con delle icone personalizzate
Di default Blogger presenta la navigazione sotto i post blog con una semplice dicitura testuale di “Post più recente“, “Home” e “Post più vecchi“. Ai blogger più esigenti può risultare poco accattivante e desiderano sostituirle magari con delle icone personalizzate. Per farlo bisogna andare in Modifica HTML, cercare il codice che inizia con <B:includable id='nextprev'>
e cancellarlo tutto fino a </b:includable>
sostituendolo con:
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='https://link_immagine_bottone_post_precedente.png'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='https://link_immagine_bottone_post_successivo.png'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='https://link_immagine_bottone_homepage.png'/></a>
</div>
<div class='clear'/>
</b:includable>
Le diciture sottolineate vanno sostituite con i link delle immagini icone che abbiamo scelto. Successivamente, sempre rimanendo in Modifica HTML, si cerca la riga ]]></b:skin>
e immediatamente sopra incolliamo queste nuove classi di stile:
#blog-pager-older-link {
float: right;
}#blog-pager-newer-link {
float: left;
}
#blog-pager {
taxt-align: center;
}
Salvare e così avremo finalmente personalizzato la navigazione tra i post del nostro blog su Blogger.
Eliminare la dicitura “Powered by Blogger“
E’ un dato di fatto, i crediti di attribuzione “Powered by Blogger” piacciono veramente a pochi. E’ possibile eliminarli andando in Aggiungi CSS ed inserendo il seguente codice:
#Attribution1 {
display: none;
}
Inserire i propri crediti di attribuzione
In Layout, nella sezione Piè di pagina inserire un gadget HTML/JavaScript al cui interno sarà incollato il seguente codice:
<div align="center">Copyrights© 2019 Fashion Snobber blog di moda e lifestyle. All right reserved.</div>
La dicitura evidenziata va ovviamente modificata a seconda delle proprie esigenze.
Centrare il footer dei singoli post
Di default i template di Blogger presentano etichette, social ecc allineati sulla sinistra. Qualora si preferisca un allineamento diverso basta andare in Aggiungi CSS ed inserire uno dei due codici:
Allineamento centrale:
.post-footer {
text-align:center;
}
Allineamento a destra:
.post-footer {
text-align:right;
}
Eliminare “Iscriviti a commenti sul post (atom)” in fondo a Blogger
La possibilità di iscriversi ai feed di un blog è sempre molto importante ma non a tutti interessa mostrarla in questo modo effettivamente non proprio bellissimo. In Aggiungi CSS possiamo eliminare la dicitura “Iscriviti a commenti (atom)” inserendo il seguente codice:
.feed-links {
display: none;
}
Come personalizzare i widget di un blog su Blogger
Eliminare lo sfondo colorato
In alcuni template standard di Blogger può capitare nei gadget ci sia uno sfondo colorato o sfumato di cui non abbiamo assolutamente bisogno. Per eliminarlo occorre andare in Modifica HTML e cercare una stringa di codice simile a questa:
Variable name="widget.outer.background.gradient" description="Sidebar Gradient" type="url" default="url(http://www.blogblog.com/1kt/travel/bg_black_50.png)
Cancellare l’url evidenziato lasciando solo le parentesi vuote così url()
.
Centrare il titolo dei gadget
Per centrare il titolo dei widget in Aggiungi CSS inserire:
.sidebarH2 {
text-align: center;
}
Centrare l’immagine inserita in un gadget
In Aggiungi CSS inserire:
#Image1 img {
display:block;
margin: auto;
}
! #Image1 va sostituito con la dicitura esatta dello specifico widget ID. Per individuarlo basta selezionare l’elemento nel blog cliccando con il tasto destro del mouse e aprire la sorgente pagina in cui potremo facilmente trovare l’ID di nostro interesse.
Avvicinare i gadget
Sempre in Aggiungi CSS incolleremo il seguente codice:
#HTML1 {
margin-bottom: -30px;
}
#HTML1 va cambiato in base all’ID specifico dell’elemento sul quale interveniamo. Il valore numerico evidenziato invece va sostituito a seconda delle nostre esigenze. Senza il simbolo “–” (meno) davanti viene considerato come aggiunta di distanziamento, mentre con il meno davanti, come nell’esempio, viene considerato in avvicinamento.
Mostrare o non mostrare i widget in determinate pagine del blog
In base alle singole esigenze è possibile decidere di mostrare o non mostrare i gadget in determinate pagine del nostro blog su Blogger. Per poter gestire autonomamente tutto questo si può inserire in Modifica HTML, cercando le stringhe di codice inerenti al widget di nostro interesse e subito dopo la riga <b:includable id='main'>
uno dei seguenti codici:
Gadget visibile solo in home page:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Visibile ovunque eccetto in home page:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
Widget visibile solo nei singoli post:
<b:if cond='data:blog.pageType == "item"'>
Visibile ovunque eccetto nei singoli post:
<b:if cond='data:blog.pageType != "item"'>
Prima di salvare inserire il tag di chiusura </b:if>
subito prima del tag di chiusura del widget che si trova poco dopo a dove abbiamo inserito uno dei codici precedenti </b:includable>
.
Bloccare il tasto destro del mouse
Per bloccare il tasto destro del mouse impedendo così che i nostri contenuti possano essere rubati con un semplice copia-incolla occorre aggiungere dalla sezione Layout un gadget HTML/JavaScript in cui incolleremo il seguente codice:
<script language=javascript>
<!--
var message="OPS! Questi contenuti sono protetti e non divulgabili senza autorizzazione della proprietaria. Se ti serve qualcosa contattami in privato. Grazie. :)";
function pulsantedestro(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=pulsantedestro;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
La dicitura sottolineata può essere modificata a piacimento.
Eliminare barra navigazione di Blogger
Non a tutti piace visualizzare la barra navigazione di Blogger posta subito in alto e desiderano eliminarla dal template. Per farlo bisogna incollare il seguente codice subito sopra la dicitura /* Variable definitions
====================
che si trova quasi all’inizio del codice in Modifica HTML. Avremo quindi:
#navbar {
height: 0px;
visibility: hidden;
display: none;
}
/* Variable definitions
====================
Come gestire la versione mobile di un blog su Blogger
Per prima cosa bisogna attivare la versione mobile procedendo in questo modo:
- Accedere alla propria bacheca di Blogger.
- Scegliere il blog a cui attivare la versione mobile.
- Nel menu a sinistra selezionare Tema.
- Nella sezione Il mio tema cliccare sulla freccia vicino a Personalizza.
- Dal menu a tendina cliccare su Impostazioni dispositivi mobili.
- Si aprirà una finestra in cui decidere quale versione del blog vogliamo mostrare nei dispositivi mobili e il tema da applicare.
- Salvare.
Se adesso abbiamo necessità di modificare e personalizzare anche la versione mobile di un blog su Blogger bisogna ricordare di intervenire nel codice sorgente in Modifica HTML all’interno della sezione contraddistinta da <b:includable id='mobile-post' var='post'>
.
Come personalizzare un blog su Blogger: conclusione
Modificare e personalizzare un blog non è un procedimento molto difficile una volta che si è capito il modo di “parlare” del proprio template installato. Certo occorre prendere familiarità con i codici di programmazione HTML e CSS ma ti garantisco che se ci sono riuscita io può farlo autonomamente chiunque. Inoltre in rete sono presenti tantissimi siti di settore che condividono basi di codice per aiutare chi ha un blog su Blogger. A tal proposito segnalo Idee per computer ed internet che mi ha aiutato tantissimo all’inizio del mio percorso di formazione. Concludendo spero questa mini guida su Blogger possa esserti stata utile e se hai qualche dubbio o incertezza non esitare a contattarmi.
15 commenti
Ciao, mi è piaciuto molto il tuo articolo, che è molto ricco di informazioni ed aiuti, però non ho trovato come fare per rimuovere il gadget che rimanda alle informazioni profilo blogger. Nel layout del mio template (“custom”) non c’è la voce relativa a questo gadget, quindi credo che si tratti di un gadget bloccato. Tu sapresti come fare per rimuoverlo? Ti ringrazio!
Ciao Davi,
Per rimuovere i gadget di Blogger bloccati devi necessariamente risalire al loro ID o nome tramite il codice template che c’è per forza e successivamente procedere in due modi:
1. Individuata la stringa di codice dell’elemento che ti interessa modificare dove c’è il tag locked=’true’ sostituisci il ‘true’ con ‘false’. In questo modo quando andrai su layout e poi in Modifica ti apparirà il pulsante per rimuovere il widget direttamente da lì.
2. Cancellare l’intero codice del gadget dal modello. Questo metodo è molto più invasivo e rischioso perciò assicurati di aver ben individuato l’ID dell’elemento che vuoi eliminare dopodiché lo cancelli da dove inizia con
.
Complimenti per la guida esaustiva, la domanda che mi pongo però è se tutte queste aggiunte sono compatibili con qualsiasi layout (anche quelli compresi già in Blogger) o solo con alcuni particolari?
Ciao Luca,
Tecnicamente sono compatibili con ogni layout dato che le regole HTML e CSS sono universali ed univoche. Ciononostante può capitare che il creatore di un template possa aver bloccato la possibilità di apportare determinate modifiche, in tal caso consiglio di contattarlo chiedendogli di risolvere il nostro problema prima di intervenire nel codice rischiando di fare disastri. :)
Ciao, non sono molto pratico, mi occorrerebbe capire come personalizzare le dimensioni delle immagini dentro post di blogger, non dall’html dei post (nel template che sto provando non mi consente di farlo) ma dall’html del template
Ciao Giovanni,
Dovresti individuare nell’html del template il codice della foto che solitamente è simile a questo:
e sostituirlo con:
Center può essere sostituito con right o left a seconda di dove vuoi posizionare la foto nel post e 350px con la misura in pixel che desideri abbia la foto.
Buonasera … non sono molto esperto di Blogger ma avrei una domanda da porti.
Mettendo il titolo personalizzato del blogger, e poi sotto l’ inizio dello spazio dei post è possibile ridurre questo spazio, perchè vedo molta distanza e mi piacerebbe che fosse più compatto. Grazie
Ciao Dario, è possibile andando nella sezione Aggiungi CSS e inserendo il seguente comando: .post-header {margin-top:-20px;} (in cui il -20px puoi cambiarlo a tuo piacimento per aumentare o diminuire la distanza). :)
ciao, torno a scriverti per un altro problema, la matitina quickedit è scomparsa dal blog, nel front-end, per cui tutte le volte che si deve modificare bisogna andare nel back-end e cercare il post sul quale si vuole agire. Sembra che in molti abbiano questo porblema. Ho cercato in tanti articoli in giro per la rete, ma difficile è la soluzione. Sai come fare? grazie
Ciao Simon,
Per prima cosa controlla di non aver tolto la spunta a “Mostra Quick Edit” che trovi nella barra a destra quando crei o modifichi un contenuto. Se la spunta c’è devi intervenire nel codice, o utilizzare i CSS, inserendo nell’apposita sezione il comando style=”display: inline;”.
ciao, complimenti per la quantità di informazioni!
In blogger sto cercando di modificare il numero di post nella versione mobile, vorrei limitare il numero massimo nella pagina principale;
ho modificato per la versione desktop indicando 3 post nelle impostazioni blogger, ma nella versione mobile continuo a vedere 5 post, come risolvere? Grazie
Ciao Simon,
Dovresti entrare nel codice template, individuare la sezione dedicata al mobile e modificare da lì se te ne dà la possibilità. Purtroppo, almeno che non sia cambiato qualcosa negli ultimi mesi, per la sezione mobile non dava molte possibilità di scelta e personalizzazione.
ciao grazie della risposta, purtroppo ho già cercato lì nel codice le sezioni <b:includable…
ma non ho trovato quello che cerco
posso chiederti se è possibile avere una spiegazione su come creare il banner dei cookie come il tuo ?
Ciao Nino,
Se usi Wordpress è un plugin apposito che si chiama “GDPR Cookie Consent” per Blogger al momento non conosco nessun codice che possa personalizzarlo. Dovresti provare ad entrare nel template, individuare dove è inserito il banner cookie e modificare da lì attraverso HTML e CSS. :)