Abbiamo più volte parlato della possibilità di personalizzazione grafica e strutturale che la piattaforma Blogspot di Google mette a disposizione. Come saprai già Blogger è un servizio gratuito che mette a disposizione molti template già pronti e la possibilità di caricarne di nuovi. Per questo oggi andiamo a vedere come creare un tema personalizzato partendo da zero.
Metteremo a tua disposizione una guida base per la creazione dei template su blogger, quello che proprio devi sapere per creare una tema per il tuo blog. Segui attentamente ciò che c’è scritto e non scoraggiarti, basta capire come funziona e non avrai problemi!Questa è la prima parte della guida, oggi parleremo della base, ossia dei requisiti per creare un template per blogger.
Requisiti tecnici
Se non hai alcuna conoscenza di base non preoccuparti, grazie alle informazioni facilmente reperibili e al sistema semplificato del quale Blogger si avvale, chiunque può cimentarsi nella creazione di un template. Tuttavia è chiaro che grazie ad alcune competenze un po’ più avanzate il lavoro sarà semplificato, più completo e pulito. La piattaforma blogger utilizza i linguaggi HTML, CSS, XML e JavaScript.
Requisiti pratici
Ciò che è davvero imprescindibile è la profonda conoscenza della piattaforma Blogger e delle sue sezioni: come funzionano le pagine, i post, cosa sono i gadget e come si usano e tutte queste piccole cose che risuteranno fondamentali per capire come funziona anche il codice.
Strumenti
La prima cosa da fare è avere un blog per sperimentare, non vorrai che gli eventuali errori causino problemi al tuo blog!
- Crea un blog di prova
- Scivi almeno 10 articoli di prova, di diverse lunghezze e corredati di immagini
- Inserisci elenchi puntati, citazioni ed altri codici che usi, ti serviranno a controllare che vengano mostrati come vuoi.
La struttura Base di un template per Blogger
Ora che sei sicuro di possedere requisiti e strumenti necessari possiamo cominciare. Vediamo come prima cosa la struttura base di un template Blogspot:
<?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><b:include data=’blog’ name=’all-head-content’/>
<title>
<b:if cond=’data:blog.pageType == "index"’>
<data:blog.pageTitle/>
<b:else/>
<b:if cond=’data:blog.pageType != "error_page"’>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title><b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></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 copi ed incolli questo codice non visualizzerai altro che un pagine bianca: questa è infatti la struttura base, alla quale vanno aggiunte ancora tutte le informazioni. Il formato del template sarà XML. Analizziamo e capiamo quello che c’è scritto:
Tag HTML e XML: questi tag si trovano all’inizio poichè specificano i linguaggi che saranno utilizzati.
Codice completo per <title>:
Sotto il tag head puoi osservare un lungo codice, si tratta di un codice completo, che prevede il titolo per i post, la homepage e la paggina di errore 404 – non trovato.
Tag <b:skin>
per il foglio di stile: il foglio di stile su blogger si scrive dentro all’interno di questo tag. Ogni elemento CSS, che riguarda dunque la visualizzazione degli elementi, dovrà essere scritta qui dentro.
Tag <b:section>
per i Widget: con questo tag si creano i Widget. Quelli default sono la Testata e il contenuto del Blog. Gli altri widget potranno essere creati in questa sezione.
Resta sintonizzato per conoscere gli step successivi che ti porteranno a saper creare un template per piattaforma Blogger. Se qualcosa non è chiaro o vuoi dirci la tua non esitare a commentare!