Come creare un modello di Blogger che sia una pagina completamente bianca da poter usare come pagina HTML.
Non ci sono poi molti servizi in rete che permettono di creare una pagina HTML completamente bianca da poter usare come meglio vogliamo. Per esempio come portale di accesso a un network di siti oppure semplicemente come pagina per una galleria fotografica o una galleria di video. L'unico affidabile di cui mi ricordo è l'italiano Altervista che comunque è molto buono.
In un precedente articolo mi ero occupato di come creare dei sottodomini per un dominio personalizzato di Blogger. Ciascun sottodominio sarebbe stato puntato verso un blog gratuito del tipo Blogspot in cui inserire dei contenuti quali una galleria o un forum creato con Google Gruppi.
L'utilizzo di un blog presenta però delle difficoltà in quanto ci sono l'header, la paginazione dei post, i commenti e altre cose quali la sidebar che possono intralciare la nostra idea di layout. Se noi provassimo a andare su Modello > Modifica HTML e cancellassimo tutto il codice presente tra <body> e </body> che indica appunto gli elementi visibili vedremo che Blogger non accetterebbe questa modifica mostrandoci un messaggio in cui veniamo avvertiti come il modello non possa essere salvato non essendoci alcuna <b:section>.
Per ovviare a questo problema e fare in modo di creare un blog con Blogger completamente candido in cui inserire l'HTML che ci pare si usa la sezione che contiene il widget della Navbar che poi tanto viene nascosta con il solito sistema. Per creare quindi una pagina HTML con Blogger dobbiamo per prima cosa creare un blog andando su Bacheca > Nuovo Blog. Si digita il Nome del blog e il relativo URL verificando che sia disponibile. Non si deve scegliere un modello Dynamic View, che è il primo proposto, ma per esempio quello Simple che è subito accanto
Si va su Crea blog per terminare. Tale blog apparirà nella nostra Bacheca. Clicchiamoci sopra e andiamo su Modello > Modifica HTML > Procedi. Clicchiamo con il destro del mouse quindi scegliamo Seleziona tutto e cancelliamo l'intero codice. Al suo posto incolliamo quest'altro codice
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1000' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
#navbar-iframe { height:0px; visibility:hidden; display:none }
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]></b:skin> </head><body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section> </body>
</html>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1000' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
#navbar-iframe { height:0px; visibility:hidden; display:none }
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]></b:skin> </head><body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section> </body>
</html>
Se andiamo su Salva modello saremo avvertiti che saranno eliminati alcuni widget presenti di default. Andiamo su Cancella per terminare la configurazione. Se adesso clicchiamo su Visualizza blog vedremo una pagina completamente bianca che poi è proprio quello che volevamo.
La sezione con la Navbar, l'unica presente è stata colorata di rosso insieme al CSS che la nasconde alla vista. In un modello come questo non possono essere postati articoli o inseriti widget in modo tradizionale. Possiamo però inserire codice HTML subito sopra alla riga </body>, incollare i fogli di stile subito sopra a ]]></b:skin> e i javascript sopra a </head>. In questo modo una pagina bianca come questa può essere usata per esempio come ricettacolo della Mappa del sito con miniature
Altri utilizzi di questi template di Blogger completamente bianchi li vedremo in articoli futuri. Concludo osservando che se si va su Layout si vedrà solo il widget per inserire la favicon personalizzata, o icona preferita, e che l'unico parametro da personalizzare sia la larghezza della pagina (1000 pixel).
che bello, devo provare ..... grazie per queste info!!
RispondiEliminaAspettero' gli altri post sulle pagine bianche.
Non e' possibile inserire altre pagine statiche in blogger? grazie :)
potrei fare una pagina pubblicitaria!?
RispondiEliminamagari aggiungo una pagina link al mio blog chiamandola "Pubblicità" per i pubblivori in cui ci metto le pubblicità che mi piacciono come ad esempio l abbigliamento femminile, la lingerie....quindi potrei arricchire il blog senza deturparlo esteticamente mischiando la pubblicità e guadagnarci qualcosina se chi ci clicca sopra fa un acquisto ;) ma Google gradirebbe?
@nanussa
RispondiEliminaSi possono pubblicare fino a 20 pagine statiche
@ivanobellini
La pagina bianca se non inserita in un sottodominio è un altro sito a tutti gli effetti quindi Google lo tratta come una entità a sé stante
lo so che sono 20 le pagine statiche..... intendevo oltre le 20 pagine statiche.
Eliminaimmagino che non sia possibile, vero?
Ok...lo tratta come una entità a sé stante, ma lo tratta bastonate nel senso che Google forse vorrebbe la SUA pubblicità anzichè la mia o no!?
RispondiEliminaÈ dimostrato che Google tratta meglio la pubblicità degli altri della propria e in ogni caso quello che conta è la visibilità della pagina banca sul tuo sito più che il suo posizionamento @
RispondiEliminaciao Ernesto mi ha incuriosita qst tuo post, ma questa pagina blog bianca non sarebbe come l equivalente di una pagina che si crea nella sidebar nel blog stesso? non ho ben capito l'utilità!
RispondiEliminaSalve Ernesto, come mi hai suggerito via e.mail ti posto la domanda inerente il mondo H1,H2,H3.......è ormai troppo tempo che cerco un chiarimento ed una soluzione per il caso internazionale su blogger e sul quale non trovo da nessuna parte una santa risposta. Per ottimizzare al meglio un sito si dovrebbe usare l'H1 con i titoli del post, H2 titolo blog, H3 data....è possibile modificare il codice Html su blogger e portare le varianti sopraindicate?? Non ho trovato un tuo articolo su questo caso...potresti aiutarmi per favore , evidenziano le modifiche da fare???
RispondiEliminaGrazie mille...
Sarò lieto un giorno di offrirti una colazione!!!con molto piacere...!!
Un saluto
Massimo
@Fioredicollina
RispondiEliminaL'utilità massima si ottiene quando si vogliono creare dei sottodomini del blog tipo
mappa.ideepercomputeredinternet.com
comunque se si vogliono postare contenuti non in linea con il resto del blog sono utili perché si tratta di un altro dominio e non occorre personalizzare le pagine statiche
@massimocanteri
Fossi in te non mi perderei troppo dietro a questa problematica che in fondo credo che conti poco. Da qualche tempo su Blogger si possono configurare i titoli automaticamente con tutti i tag. Leggi la parte finale di questo post
http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
Ti ricordo che il tag < h2 > è bene non usarlo per i titoli perché in Blogger serve per richiamare la data.
ciao, vorrei creare una gallery tipo questa, mi sai aiutare?
RispondiEliminahttp://giampierofinocchiaro.blogspot.it/p/gallery-foto-e-video.html ecco l'esempio
RispondiElimina@# E' più semplice di quanto non sembri. Leggi questo post su come creare una galleria fotografica con Windows Live Writer
Eliminahttp://www.ideepercomputeredinternet.com/2012/08/galleria-immagini-blogger.html
Al posto del codice delle sole immagini ha inserito anche quello delle descrizioni o captions. Tali codici si possono prelevare dall'Editor di Blogger dopo che si è configurata ciascuna foto. Essendo le foto di diversa misura la tabella non è risultata simmetrica ma con un effetto casuale.
Ciao,
RispondiEliminavolevo sapere se c'è un modo su blogger per inserire nelle pagine del blog (intendo quelle che il layout di blogspot ha già tra le opzioni) e inserire in automatico un elenco di link, con titoli in ordine alfabetico.
Sul mio blog sto accumulando molti post con titoli di film ecc, mi piacerebbe creare una pagina cliccata sulla quale compare un elenco con tutti i titoli dei post in ordine, per ora sto usando i tag, ma sono nella colonna laterale e sta diventando troppo lunga.. non so se ti ho spiegato bene o se c'è già qualcosa di simile..
Anna
@# Prova con queste personalizzazioni
Eliminahttp://www.ideepercomputeredinternet.com/2011/12/come-mostrare-gli-ultimi-1000-articoli.html
http://www.ideepercomputeredinternet.com/2012/05/elenco-dei-titoli-di-tutti-i-post-in.html
http://www.ideepercomputeredinternet.com/2013/01/blogger-sitemap-etichette.html
Ciao, Ernesto. A me funziona perfettamente, ho anche inserito una gallery, che ho spostato da una normale pagina statica.
RispondiEliminaCi sono però alcune questioni da risolvere :
A) nella versione mobile il blog creato, vuoto ovviamente, si vede. Compare cioè titolo, la scritta nessun blog, ecc. In sostanza tutto quello che si vede, quanto si inizia un blog da zero. La pagina pulita si vede insomma solo su desktop.
B) Anche la regolazione della larghezza pagina pare funzionare solo a pc.
C) non mi pare che sul telefono funzioni il responsive, pur utilizzando un template responsive.
Ci devo ancora studiare bene, ma pensi sua possibile risolvere in qualche modo? Hai per caso scritto qualcosa a riguardo?
Grazie
Questo post è stato scritto nel 2012 quando ancora neppure si parlava di template responsive. Per la larghezza prova a mettere width=100% al posto di width=1000. Potrebbe funzionare.
Elimina@#
Ho visto che il post è vecchiotto, però vabbè .... ci provo! Grazie!
Elimina