Come personalizzare un blog su Blogger: guida completa

by fashionsnobber

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

Come fare backup di un blog su Blogger.

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.

Come modificare il codice HTML di un blog su Blogger.

Si aprirà una schermata in cui ci troveremo davanti tutto il contenuto HTML relativo alla struttura del nostro template su Blogger.

Come modificare codice HTML di 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:

  1. Direttamente nel codice del tema entrando in Modifica HTML e andando ad aggiungere il comando CSS prima della chiusura del tag ]]></b: skin>.
  2. 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.

Come modificare codice CSS su Blogger.

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

Come applicare le modifiche CSS su Blogger.

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

Come aggiungere un widget.

Come aggiungere un widget.

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.

Come configurare e attivare un widget HTML/JavaScript.

! 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 + &quot;_headerimg&quot;' 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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>

Visibile ovunque eccetto nei singoli post:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

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.

You may also like

Leave a Comment

Utilizzando questo modulo, accetti l'archiviazione e la gestione dei dati da parte di questo sito Web.
*By using this form you agree with the storage and handling of your data by this website.

Questo sito utilizza cookie analitici e di profilazione, propri e di terze parti, per finalità di analisi, per migliorare l’esperienza dell’utente e per mostrargli offerte affini ai propri interessi. Cliccando su "Ok" acconsenti all’uso dei suddetti. Accept Read More