I tag obbligatori che debbono essere presenti in un modello minimo di Blogger per poi iniziare la sua personalizzazione.
Blogger è un CMS che può essere usato anche per creare una pagina HTML singola. Lo abbiamo già visto nel post su come creare una pagina HTML bianca con Blogger. In questo articolo vedremo meglio quali siano i requisiti minimi affinché Blogger possa salvare un modello creato da noi.
Questa operazione è consigliata solo a chi abbia una certa conoscenza del linguaggio HTML e CSS e che abbia in mente di creare con Blogger un sito assolutamente originale. È importante conoscere anche i Tag dei Dati per i Layout di Blogger che sono una specie di funzioni che danno un risultato che dipende dalle variabili inserite.
La dichiarazione del tipo di documento o Doctype è una breve stringa di markup che indica la tipologia del documento e quindi ne determina anche la sintassi. Tale Doctype è obbligatorio e deve essere inserito all'inizio del modello di Blogger. Insieme a questa dichiarazione debbono per forza essere presenti i tag fondamentali delle pagine web <html>, <head>, <body>, </html>, </head> e </body>. L'ultima riga del modello sarà invariabilmente </html> che è la chiusura di <html>. Solitamente </body>, la chiusura di <body>, è la penultima.
I TAG OBBLIGATORI DI BLOGGER
Oltre ai tag obbligatori di una pagina web ci sono anche quelli obbligatori di Blogger.
- <b:skin> e la sua chiusura </b:skin> sono i tag che contengono i CSS del modello. Entrambi questi tag devono essere compresi tra <head> e </head>.
- <b:section> e la sua chiusura </b:section> determinano una zona del Layout che contiene un gruppo di gadget. Può essere la zona main che è l'area del post oppure quella di una sidebar.
- <b:widget> e la sua chiusura </b:widget> per l'inserimento di un gadget. Il gadget fondamentale è quello denominato Blog1 che contiene gli articoli. I tag <b:widget> con la loro chiusura debbono essere contenuti all'interno di una <b:section>.
Per tirare le prime somme ecco come potrebbe essere il codice minimo di un modello di Blogger
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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>
<!-- INIZIO INTESTAZIONE -->
<!-- TAG META, LINK, JAVASCRIPT, ECC -->
<b:skin>
<![CDATA[
/* POSIZIONAMENTO DEI CSS */
]]></b:skin>
<!-- POSIZIONAMENTO DI ALTRI CSS CON <style>, ecc -->
<!-- FINE INTESTAZIONE -->
</head>
<body>
<!-- INIZIO HTML -->
<!-- IL MINIMO È 1 b:section e 1 b:widget -->
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Post del blog' type='Blog'></b:widget>
</b:section>
<!-- FINE HTML -->
</body>
</html>
<!DOCTYPE html>
<html 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>
<!-- INIZIO INTESTAZIONE -->
<!-- TAG META, LINK, JAVASCRIPT, ECC -->
<b:skin>
<![CDATA[
/* POSIZIONAMENTO DEI CSS */
]]></b:skin>
<!-- POSIZIONAMENTO DI ALTRI CSS CON <style>, ecc -->
<!-- FINE INTESTAZIONE -->
</head>
<body>
<!-- INIZIO HTML -->
<!-- IL MINIMO È 1 b:section e 1 b:widget -->
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Post del blog' type='Blog'></b:widget>
</b:section>
<!-- FINE HTML -->
</body>
</html>
Se incollare questo codice nel modello di un blog di prova vi accorgerete che Blogger vi permetterà di salvare il template. Visualizzerete il vostro sito in un modo super minimalista.
Non ci saranno widget né sidebar ma solo l'area del post. Si tratta di un mero esercizio che però può essere l'inizio di una personalizzazione di un sito statico o di una singola pagina web. Per creare una pagina web bianca al posto del widget Blog1 conviene inserire il widget Navbar
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
per poi aggiungere la riga
#navbar-iframe {height:0px; visibility:hidden; display:none;}
subito sopra al tag ]]></b:skin> per nasconderla alla vista.
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
per poi aggiungere la riga
#navbar-iframe {height:0px; visibility:hidden; display:none;}
subito sopra al tag ]]></b:skin> per nasconderla alla vista.
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