Pubblicato il 20/11/11e aggiornato il

Come inserire una pagina di manutenzione in Blogger.

Mi capita spesso di sentire dei lettori che hanno il loro blog in costruzione e che non permettono ad altri di vederlo. E' una scelta rispettabile che consente di lavorare sul modello senza che dei curiosi possano vedere i progressi fatti e anche eventuali errori e problemi che si presentassero. Nei blog Wordpress è possibile installare il plugin Maintenance Mode che mette il blog in standby, che consente all'amministratore di fare tutte le modifiche che vuole entrando nella Bacheca ma che mostrerà ai visitatori una pagina con l'annuncio dei "lavori in corso". Questo a prescindere dalla pagina del blog che è stata aperta.

Vediamo come anche in Blogger possa essere fatta una cosa simile. Si utilizza il tag condizionale che consente solo all'amministratore del blog di vedere un particolare widget o un determinato contenuto. L'unica cosa che occorre è una immagine adeguata o altri contenuti che possono servire alla bisogna come dei video, un testo con dei link e altre cose che si ritiene utile mostrare ai visitatori.

Si va su Modello > Modifica HTML e si salva il modello completo andando su Backup/Ripristino. Questo serve per fare un backup di sicurezza essenziale nel caso si sbagli qualcosa nella modifica del codice. Successivamente si va su Modello > Modifica HTML > Procedi e si cerca la riga </head> . Subito sopra si incolla

<style>
body#layout #manutenzione {display:none !important;}
body#layout .blog-admin {display:block !important;}
</style>

Quindi si cerca la riga <body> nei vecchi modelli o la riga

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

nei template del Designer Modelli. Subito sotto questi tag si incolla questo codice

<div id='manutenzione' style='background:#FFFFFF; height:800px;'>
<div style='margin-top:-30px; text-align: center; padding-top:100px;'>
<img border='0' src='https://lh3.googleusercontent.com/-Cc9gAlJCC8U/TsjCXdo91eI/AAAAAAAAVZw/prMxgEbhb7E/s800/sito-in-costruzione.jpg'/></div>
<div align='center'><p style='font-size:200%;'>STIAMO LAVORANDO PER VOI</p></div>
</div>
<span class='item-control blog-admin'>

Si cerca poi la riga </body> e, subito sopra, si incolla il tag

</span>

Si salva il modello. Quello che apparirà ai visitatori sarà una cosa simile a questa

sito-in-costruzione

mentre il proprietario del blog potrà visualizzare, sotto l'immagine e il messaggio, il blog nella sua interezza in modo da poter verificare visivamente le modifiche di layout e di widget che intende apportare

pagina-in-costruzione-blogger

Si può scegliere una immagine diversa da quella che ho inserito io semplicemente caricandola su Picasa o acquisendone il link diretto da sostituire a quello evidenziato di rosso. La riga evidenziata di viola rappresenta un contenuto aggiuntivo. In questo caso si tratta solo di una semplice scritta con una dimensione dei caratteri doppia di quella normale ma si possono mettere dei video, dei giochi, delle scritte scorrevoli o dei link a altri siti. L'unica limitazione è che il contenuto sia inserito in mezzo ai due tag </div> colorati di blu. Altri contenuti possono anche essere inseriti prima della immagine incollandoli nel codice subito dopo la prima riga. Non so a quanti di voi possa servire questa personalizzazione ma ritengo che sia comunque piuttosto interessante. 





12 commenti :

  1. ciao ernesto volevo chiederti se si poteva usare pure il sistema impostazioni di base e mettere la spunta in lettori di blog a solo autori del blog senza intaccare l'html della pagina

    RispondiElimina
    Risposte
    1. @GiuseppeArcuri
      Lo puoi fare certamente però in questo caso le pagine non saranno più pubbliche sul web e potresti perdere in posizionamento nei motori di ricerca.

      Elimina
  2. Ciao Ernesto. Questo tutorial capita a proposito, dato che devo cambiare template al mio blog e fare alcune modifiche. Ma siccome mi piace esagerare ti volevo chiedere se e come é possibile inserire non una immagine come tu hai descritto, ma un tema di Blogger (per esempio questo: ttp://www.templateism.com/2014/09/soonex-comming-soon-responsive-blogger-template.html).

    In questo modo, chiunque tentasse accedere al mio blog, troverebbe solo questa pagina.

    Quello che mi chiedo é, dato che in questo caso userei un template di manutenzione, come farei a modificare il mio blog e usare un tema differente. Pensavo di creare una pagina o un blog di manutenzione da usare solo in questi casi, ma come faccio a reindirizzare il mio blog per farlo andare in quello nuovo creato? (Non so se mi sono spiegato bene, ma penso che tu abbia capito, anche perché mi chiedo se non c'é modo di fare quello che chiedo, a cosa servano temi di manutenzione come quello sopra citato).

    Ti ringrazio anticipatamente per qualunque risposta o idea tu possa darmi.

    RispondiElimina
    Risposte
    1. Si può anche fare ma non è semplicissimo. Nel codice del post è presente solo una immagine. Se sei bravo ci puoi mettere altre cose. Ci puoi mettere anche un template. Salvi il modello e carichi quello del nuovo template facendo un redirect di tutte le pagine del blog alla homepage così fibniscono per vedere solo quella
      http://www.ideepercomputeredinternet.com/2012/03/come-fare-il-redirect-di-un-blog-o-di.html
      @#

      Elimina
    2. Interessante questa "cosa" del redirect. Ma in questo caso devo caricare il modello definitivo, quello che vorró usare in futuro, non quello della pagina in costruzione, giusto? Peró in questo modo i lettori non sapranno perché stanno andando solo nella Home Page, a meno che io non inserisca un post o un avviso di qualunque maniera per indicare che il sito sta in manutenzione. E in questo modo potrei modificare il blog come vorrei o, dato che "funzionerebbe" solo la Home Page, avrei dei problemi a modificarlo?

      Elimina
    3. Sei stato tu a parlare del template. Secondo me la scelta migliore è quella di mettere un avviso testuale una immagine che si visualizzi al posto dei vari contenuti.
      @#

      Elimina
    4. Ok, faró come dici, i tuoi consigli mi sono stati sempre utili. Grazie di tutto!!

      Elimina
  3. ciao, ho fatto tutto quello che hai scritto sopra, ma una volta in manutenzione non mi fa lavorare sul layout... entro ma non ci sono ...come mai per lavorarci sono costretta a farlo senza manutenzione ma non voglio mi puoi aiutare in merito..grazie per l atua attenzione ...

    RispondiElimina
    Risposte
    1. Forse è un problema di dimensioni. Ho appena testato e scorrendo la pagina verso il basso si vede il layout.
      http://i.imgur.com/WPcC5uY.png
      Per lavorare devi aprire la pagina Layout dove ci sono i widget e Modello > Modifica HTML
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.