Come mostrare una pagina di manutenzione ai lettori del sito di Blogger quando si vuole modificare la grafica lasciando all'amministratore la possibilità di visualizzare il blog per modificarne l'aspetto.
Avete un sito su piattaforma Blogger di cui volete modificare il tema ma volete farlo senza sguardi indiscreti e mantenendo la nuova grafica nascosta fino a che non sia pronta? La scelta migliore in questi casi è quella di mostrare una pagina fissa con un avviso per i lettori che il sito tornerà presto con un nuovo aspetto.
Contemporaneamente però quando si operano queste modifiche c'è anche l'esigenza di visualizzare il layout del sito per poterlo migliorare con maggiore precisione. In sostanza è meglio operare direttamente sul modello originale del blog che non utilizzare un blog di prova in cui è sempre molto difficile aggiungere bottoni, icone o banner pubblicitari.
Il trucco che vado a proporvi utilizza la classe item-control blog-admin che serve per mostrare solo all'amministratore del sito tutto quello è all'interno dei tag che la comprendono. In sostanza mostreremo una immagine con un avviso che sarà quello che visualizzeranno i visitatori che aprono il sito mentre il proprietario del blog potrà scorrere verso il basso e operare sul sito senza difficoltà. Quindi mentre i lettori visualizzeranno questa immagine con il messaggio subito sotto
Per ottenere questo risultato si salva il template per l'eventuale ripristino e si va su Modello > Modifica HTML. Si cerca la riga </head> e, subito sopra, si incolla questo codice
<style>
body#layout #manutenzione {display:none !important;}
body#layout .blog-admin {display:block !important;}
</style>
body#layout #manutenzione {display:none !important;}
body#layout .blog-admin {display:block !important;}
</style>
Si scende quindi in basso e si cerca la riga
<body expr:class='"loading" + data:blog.mobileClass'>
quindi subito sotto si incolla questo nuovo codice
<div id='manutenzione' style='background:#FFFFFF; height:1000px;'>
<div style='margin-top:-30px; text-align: center; padding-top:100px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqbjHx7b7HZLQrbducfDX7bLB6AJm_u4xZM60bTy-NkLrEteFGxYiBiyWXRbUWeA-M3t_bPSqcMBRrSjh0JyytadnBdL0uXKfhjO9JHnxufYlKfu1GaXHu9vpdnKbxlcIB7UFCsVpnP0/s1200-Ic42/manutenzione.jpg'/></div>
<div align='center'><p style='font-size:200%; color:#036; font-weight:bold;'>STIAMO LAVORANDO PER VOI</p></div>
</div>
<span class='item-control blog-admin'>
<div style='margin-top:-30px; text-align: center; padding-top:100px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqbjHx7b7HZLQrbducfDX7bLB6AJm_u4xZM60bTy-NkLrEteFGxYiBiyWXRbUWeA-M3t_bPSqcMBRrSjh0JyytadnBdL0uXKfhjO9JHnxufYlKfu1GaXHu9vpdnKbxlcIB7UFCsVpnP0/s1200-Ic42/manutenzione.jpg'/></div>
<div align='center'><p style='font-size:200%; color:#036; font-weight:bold;'>STIAMO LAVORANDO PER VOI</p></div>
</div>
<span class='item-control blog-admin'>
L'ultima riga del codice colorata di blu introduce la classe indicata sopra. Dobbiamo quindi inserire anche il suo tag di chiusura alla fine del codice. Si cerca quindi il tag </body> che si trova nelle ultime righe del modello e, subito sopra, si incolla l'ultimo tag di chiusura
</span>
Finalmente si salva il modello. Le personalizzazioni riguardano i codici dei colori, l'URL della immagine da visualizzare, le dimensioni in altezza della pagina di manutenzione, il testo dell'avviso colorato di viola, il suo colore e le sue dimensioni. Quando sarà completata la modifica del blog basterà cancellare dal modello queste righe per mostrare la nuova grafica.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy