Panoramica dei modelli classici.

Molti articoli descrivono dettagliatamente i tag modello di Blogger, ma questo articolo è una dimostrazione dell'interazione di tutti i tag per la creazione di un modello completo.

Durante i vari passaggi, verrà illustrato cosa accade in ciascuna sezione.

I tag Blogger verranno evidenziati e di conseguenza distinti dai tag HTML e CSS.

E ora iniziamo!
blogger modello html
<html><head><title><$BlogPageTitle$></title> 
Questo è l'inizio del modello. In genere, per il titolo viene utilizzato <$BlogPageTitle$> , poiché utilizza automaticamente il nome della pagina corrente.
<style>

/* style modified from glish: 

http://www.glish.com/css/ */

body{margin:0px 0px 0px 0px;font-family:trebuchet 

ms, verdana, sans-serif; background-color:white;}

#Title{font-size:63px; padding-left:15px; 

padding-top:10px; text-transform:uppercase; 

font-family:trebuchet ms, verdana, sans-serif;}

#Title a {text-decoration:none; color:inherit;}

#Description{padding:0px; padding-top:10px; 

font-size:12px; font-weight:normal}

.DateHeader{border-bottom:none; font-size:15px; 

text-align:left; 

margin-top:20px; margin-bottom:14px; padding:1px; 

padding-left:17px; color:gray; 

font-family:trebuchet ms, verdana, sans-serif;}

.PostTitle{font-size:18px; font-weight:bold}

.Post{padding-left:20px; margin-bottom:20px; 

text-indent:10px; 

padding-right:20px; line-height:22px}

.PostFooter{margin-bottom:15px; margin-left:0px; 

color:black; font-size:10px}

#leftcontent{background-color:whitesmoke; 

border-right:2px dashed #000; 

border-bottom:0px dashed #000; float:left; 

padding-bottom:20px; 

margin-right:15px; padding:0px; width:67%; 

border-top:0px dashed #000}

.SideBarTitle{font-weight:bold; font-size:18px}

h1{font-size:14px; padding-top:10px}

a{text-decoration:none}

a:hover{border-bottom:dashed 1px red}

#rightcontent{font-size:12px; height:100%; 

margin-left:0px; text-transform:none; 

padding-right:10px; background-color:white;}

.blogComments{font-size:15px; text-align:left; 

margin-top:20px; margin-bottom:14px; padding:1px; 

padding-left:17px; color:gray; font-family:trebuchet 

ms, verdana, sans-serif;}

.blogComment{margin-top:10px; margin-bottom:10px; 

color:black; text-indent:10px; padding-right:20px; 

line-height:22px}

.deleted-comment {font-style:italic; color:gray;}

.byline{margin-bottom:20px; margin-left:0px; 

margin-right:10px; color:black; 

font-size:10px; display:inline}

#profile-container { }

.profile-datablock { }

.profile-img {display:inline;}

.profile-img img {float:left; margin:0 10px 0px 0; 

border:4px solid #ccc;}

#profile-container p { }

#profile-container .profile-textblock { }

.profile-data strong {display:block;}

</style> 
Questa sezione rappresenta il foglio di stile che descrive colori, caratteri, bordi e altre proprietà degli elementi della pagina. Per ulteriori informazioni, consultare Come posso cambiare i colori o i caratteri del modello? e Cosa posso fare con i CSS?
<!-- Meta Information -->

<$BlogMetaData$>

</head> 
Alla fine della sezione head, viene visualizzato il tag <$BlogMetaData$>. Si tratta di un tag particolarmente utile poiché consente di immettere automaticamente con un'unica operazione tutti i meta-tag necessari al blog.

A questo punto, possiamo dedicarci alla parte centrale del modello. Si tratta della parte che appare nella finestra del browser quando viene visualizzato il blog.
<body>
 
<div id="leftcontent">

<div id="Title">

<ItemPage><a href="<$BlogURL$>"></ItemPage>

<$BlogTitle$>

<ItemPage></a></ItemPage> 

</div> 
Il tag <$BlogTitle$> costituisce il titolo del blog. Il codice aggiuntivo è un link che consente di tornare alla home page. Il tag <$BlogURL$> fornisce l'indirizzo. Dal momento che non è necessario disporre di un link per tornare alla home page quando questa è già visualizzata, il link si trova all'interno di tag <ItemPage>, affinché sia visualizzato soltanto sulle pagine dei messaggi.

Adesso, proseguiamo con i post:
<Blogger>

<BlogDateHeader>

<div class="DateHeader"><$BlogDateHeaderDate$></div>

</BlogDateHeader> 

<div class="Post">

<a name="<$BlogItemNumber$>"> </a>

<BlogItemTitle><span class="PostTitle">

<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL> 

<$BlogItemTitle$></a></span></BlogItemTitle>

<$BlogItemBody$>  <span class="PostFooter">

&para; <a href="<$BlogItemPermalinkURL$>" 

title="permanent link"> <$BlogItemDateTime$></a> 

<MainOrArchivePage><BlogItemCommentsEnabled>  <a href="<$BlogItemCommentCreate$>" 

   <$BlogItemCommentFormOnClick$>>

  <$BlogItemCommentCount$> comments</a> 

</BlogItemCommentsEnabled></MainOrArchivePage>

</span>

</div>
Nota il tag <Blogger> all'inizio di questa sezione. Corrisponde a un altro tag </Blogger> che si trova più avanti. Il contenuto di questi tag verrà ripetuto su tutti i post della pagina.

I tag con il segno del dollaro ($) di questa sezione fanno riferimento ai dati che saranno diversi in ciascun post. Ad esempio, <$BlogItemTitle$> consente di visualizzare il titolo mentre <$BlogItemBody$> consente di visualizzare tutto il testo del post.

I tag senza il segno del dollaro indicano se determinati elementi dovranno essere visualizzati sulla pagina o meno. Ad esempio, <BlogItemTitle> e

</BlogItemTitle> delimitano il codice e il testo che saranno presenti sulla pagina soltanto se l'elemento dispone di un titolo. Analogamente, il testo tra <MainOrArchivePage> e </MainOrArchivePage> sarà visualizzato solo nella pagina principale o nelle pagine degli archivi. Questo tag viene utilizzato per i link ai commenti poiché non è necessario mostrare i commenti nelle pagine dei messaggi.

A proposito di commenti: è necessario generare il codice per la visualizzazione dei commenti aggiunti agli elementi. Nota che ci troviamo sempre all'interno dei tag <Blogger> poiché i commenti sono correlati ai singoli post.
<ItemPage> 

<div class="blogComments">

<BlogItemCommentsEnabled><a name="comments"></a>

Commenti:

<BlogItemComments> 

<div class="blogComment">

<a name="<$BlogCommentNumber$>"></a>

<$BlogCommentBody$><br />

<div class="byline">

<a href="<$BlogCommentPermalinkURL$>" 

title="link permanente">#</a> 

postato da <$BlogCommentAuthor$> : 

<$BlogCommentDateTime$>

</div> 

<$BlogCommentDeleteIcon$> 

</div>

</BlogItemComments> 

<$BlogItemCreate$>

  </div>

</BlogItemCommentsEnabled> 

<br /> <br />

<a href="<$BlogURL$>"><< Home</a> 

</div>

</ItemPage>

</Blogger>  

</div> 
I tag <ItemPage> e <BlogItemCommentsEnabled> fanno sì che il codice venga visualizzato solo nelle pagine di post dei messaggi in cui sono consentiti i commenti. I tag <BlogItemComments> e </BlogItemComments> sono simili a <Blogger>, poiché contengono il codice che verrà utilizzato per ogni commento della pagina. Osservando il contenuto di questi tag si nota che la visualizzazione dei commenti è simile alla visualizzazione dei post. Per il testo del commento viene utilizzato <$BlogCommentBody$> e così via.


Il funzionamento di alcuni tag è leggermente diverso. <$BlogCommentDeleteIcon$> consente di inserire automaticamente un'icona di eliminazione e un link per ciascun commento. <$BlogItemCreate$> aggiunge un link da utilizzare per aggiungere un nuovo commento. Per ulteriori dettagli sui tag di commento, consultare questo articolo.


Abbiamo appena trattato tutti gli elementi della sezione principale del modello. Passiamo adesso alla sidebar.
<div id="rightcontent"> 

<div id="Description"><$BlogDescription$></div>
Il tag <$BlogDescription$> è simile al tag <$BlogTitle$> descritto sopra. Esso visualizza la descrizione del blog.
<p> 

<div id="profile-container">

<div class="SideBarTitle">INFORMAZIONI PERSONALI</div> 

<dl class="profile-datablock">

<dt class="profile-img">

  <img src="<$BlogOwnerPhotoUrl$>" 

  width="68" alt="" />

</dt>

<dd class="profile-data"><strong>Name:</strong> 

  <$BlogOwnerNickname$></dd>

<dd class="profile-data"><strong>Location:</strong> 

  <$BlogOwnerLocation$></dd> 

</dl>

<p class="profile-textblock">

<$BlogOwnerAboutMe$>

</p>

<p class="profile-link">

<a href="<$BlogOwnerProfileUrl$>">Visualizza il mio profilo</a>

</p> 

</div> 
Questa sezione contiene le informazioni del profilo personale, incluso un link alla pagina del profilo completo. I nomi dei tag sono descrittivi, ad esempio <$BlogOwnerNickname$>, affinché sia semplice intuire cosa consentono di visualizzare.

Un altro elemento comune nella sidebar è l'elenco di tutti i link all'archivio.
<div class="SideBarTitle">ARCHIVI</div> 

<BloggerArchives>

<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>

</BloggerArchives> 

<br /></p> 
I tag <BloggerArchives> hanno uno scopo ben preciso: per ciascun file di archivio visualizzano il valore restituito dal codice che delimitano.

È possibile aggiungere altri elementi alla sidebar, ad esempio link e altro testo. Per creare altre intestazioni simili, è possibile copiare la formattazione del titolo ARCHIVI.

Alla fine del modello, poi, abbiamo l'onnipresente pulsante Powered by Blogger.
<br />

<p style="text-align:center">

<a href="http://www.blogger.com">

<img alt="Powered by Blogger" border="0" 

src="http://buttons.blogger.com/bloggerbutton1.gif">

</a> 

</p> 

</div> 

</body>

</html> 
E questo è tutto per il modello. Se desideri utilizzare o modificare questo modello, devi richiamarlo dall'elenco dei modelli in cui è stato salvato con il nome Tekka.

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:

Commenti

nome-foto