.
Home | Journal | Cerca | Manuale | Soluzioni | Tags

Modello di template

Quello che segue è un modello di codice html per un template standard in Splinder.
Può fornire una buona base per imparare la struttura e il funzionamento dei template e iniziare a modificare il proprio.

Sulla destra l'elenco di tutti i tag con le relative sintassi e modalità d'uso.


Attenzione: le scritte in rosso sono solo dei suggerimenti, non fanno parte del codice ;-)

STRUTTURA

1) Contenitore generale ( o "container")

2) Testata ( o "header")

3) Colonna sinistra

4) Contenitore dei post

5) Colonna destra

6) Piede ( o "footer")




















CODICE

<html>
<head>
<title><$BlogTitle$></title>
<META NAME="Keywords" CONTENT="...">
<META NAME="Description" CONTENT="<$BlogDescription$>">

<style type="text/css">

All'interno di questo tag trovi le classi di stile per il tuo template. Puoi anche tagliare tutto ciò che è compresto tra <style> e </style> e incollarlo nel campo CSS della pagina del tuo template per una maggiore velocità di caricamento del blog.

/* GENERICHE

============================== */

body{
margin: 0;
padding: 0;
text-align: center;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
}

a {
color:#706E55;
text-decoration: underline;
}

input,select{
color: #A9A9A9;
font-size: 11px;
}

textarea{
background-color: White;
color: #A9A9A9;
font-size: 11px;
}
hr{
color: Silver;
background-color: Silver;
height: 2px;
}

#container {
margin: 0 auto;
width: 740px;
background-color: #fff;
}

#contentmain {
margin: 0;
padding: 0;
width: 740px;
background: url(http://www.splinder.com/misc/templates/img/desk/bg_colori.gif);
font-size: 12px;
text-align:left;
float:left;
overflow: hidden;
}

#contentright {
float:left;
padding: 0;
display:inline;
margin: 0;
text-align: left;
overflow: hidden;
width: 200px;
}

#blog {
margin: 0;
margin-bottom: 20px;
width: 540px;
float:left;
overflow: hidden;
font-size: 12px;
}

 

/* HEADER

============================== */

#contentheader{
margin: 0;
width: 520px;
float:left;
text-align:left;
padding-top:270px;
background: url(http://www.splinder.com/misc/templates/img/desk/header.jpg) no-repeat left top;
}
h1#blogtitle{
padding:15px 0 5px;

}
h1#blogtitle,h1#blogtitle a{
margin:0;
font-size: 24px;
color: #B5A99C;
text-transform: uppercase;
text-decoration: none;
}

#blogdescription {
padding: 0 0 20px;
margin: 0;
font-size: 12px;
color: #C5BBB1;
}

.media-thumb{border:0px;}

/* COLONNA

=============================== */

.boxSidebar{
margin:0;
padding:0 0 10px;
font-size: 11px;
color: #333;
width: 200px;
}

h2.sectiontitle{
color: #666;
text-transform: uppercase;
font-size: 11px;
background: #B5A99C;
margin:10px 0 5px;
padding:2px 10px
}
.boxSidebar p {
padding:0 10px;
margin:0
}

#recent-media {margin-left:8px;font-size:11px}

/* FOOTER

================================= */

.footer {
background: url(http://www.splinder.com/misc/templates/img/desk/bg_colori.gif);
float:left;
width: 740px;
margin: 0px;
padding: 0px;

}

.footer p {
color: #000;
font-size: 11px;
margin: 0;
float:left;
position:relative;
padding: 10px 10px 10px 550px;
}

/* POST

================================= */
.entriEs {width:520px;padding:0}
.dateheader {
margin: 0;
padding: 5px 0 10px;
width:520px;
text-align: right;
color: #666;
}

h2.itemtitle {
margin:0 30px 0 0;
padding: 3px 8px;
background: #B5A99C;
text-align: left;
font-size: 14px;
text-transform: uppercase;
color: #666;
width:500px;
}

.data {
margin: 0 30px 10px 0;
display:inline;
padding: 10px 0px;
color: #999;
font-size: 12px;
/* Fix for IE6 disappearing float bug */
height: 100%;
}

.read-more {
margin: 4px 0;
padding: 4px 8px;
text-align: left;
}

.itemPost{
margin-bottom: 10px;
overflow: hidden;
color: #999;
padding: 15px 8px;
font-size:12px
}

 

/* COMMENTI

============================== */
.comment {
margin: 1em 0 0 0;
padding: 0;
width:520px;
background:transparent;
/* Fix for IE6 disappearing float bug */
height: 100%;
overflow: hidden;
}

.comment-body {
margin: 0;
padding: .2em 0 .9em 10px;
text-align: left;

color:#999;
font-size: 11px;
padding-right:10px;
}

.comment-body textarea {
}

.comment-top {
margin: 0;
padding: 0 0 .7em 0;
text-align: right;
border-bottom: none;
background:transparent;
color: #666;
font-size: 10px;
}

.comment-bottom {
margin: 0;
padding: .5em 0 .75em 0;
background:transparent;
text-align: left;
color: #999;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #D3D3D3;
}

.comment-tips {
background:transparent;
text-align: left;
color: #87B1BE;
font-size: 9px;
padding-left: 10px;
}

.comment-form-title {
margin: 0 30px 0 0;
width:490px;
padding: .3em 15px;
background-color: #D4CDC5;
text-align: left;
color: #000;
font-weight: bold;
font-size: 11px;
}

.comment-form-user {
padding: 10px 0 0 10px;
background:transparent ;
text-align: left;
color: #FFFFFF;
font-size: 10px;
line-height: 1.3em;
}
.comment-form-user input,select{
background-color: #FFFFFF;
border:1px inset #A9A9A9;
font-size: 11px;
color: #A9A9A9;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 180px;
}
.form-submit {
}
/* NAVIGAZIONE

============================== */
.navigation {

color: #49525F;
margin-bottom: 6px;
margin-top: 4px;
padding: 4px;
text-align: center;
clear:both
}

.prev {
float: left;
text-align: left;
width: 45%;
}

.next {
float: right;
text-align: right;
width: 45%;
}

.home {
text-align: center;
}

/* IMPAGINAZIONE

============================== */
#blog-pager div {
display: inline;
color: #999;
font-size: 10px;
padding: 1px;
}

#blog-pager a {
display: inline;
margin: 3px;
text-decoration: underline;
}

/* FOTO ALBUM

============================== */
#album, #album a{
font-size: 10px;
}

.blog-members {
clear: both;
margin: 0;
padding: 0 0 3px 5px;
font-size: 11px;
}

/* BORDERS
==============================*/

.cc-logo{
border:0px;
padding-bottom:1px;
}

.avatar{
border:0px;
}

.media-info{
border:0px;
}
p.blog-buttons a img {
border: none;
}
.cc-small{
border:0px;
}

.comment-bottom img.avatar {
height: 24px;
width: 24px;
border: 1px solid black;
}
/* HACKS
============================= */
.media-info{
border:0px;
/* Fix for IE6 disappearing float bug */
height: 100%;
}

*/ STILE MEDIA ALBUM
==============================*/

#album {
background: transparent;
font-size: 10px;
text-decoration: none;
text-align: center;
}

#album-link {
vertical-align:top;
}

#album-link a:link {
vertical-align:top;
}

#album img {
padding: 4px;
margin-bottom: 5px;
background-color: transparent;
text-decoration: none;
}

#album td {
text-align: center;
vertical-align: top;
}

#album table {
text-align: left;
vertical-align: top;
}

#album .title {
font-size: 9px;
margin-top: 12px;
}

 


</style>

<script language="JavaScript">
<!--

Qui puoi mettere le funzioni Javascript

-->
</script>

</head>
<body>

( 1 ) <!-- INIZIO CONTENITORE DEL BLOG -->

<div id="container">

( 2 )<!-- INIZIO TESTATA -->
<div id="contentheader">
Tag per il titolo
<p class="blogtitle"><$BlogTitle$></p>
</div>
<!-- FINE TESTATA -->

( 3 )<!-- INIZIO COLONNA SINISTRA -->

<div id="contentleft">

<div id="section">
<h2 class="sectiontitle">Categorie</h2>
Tag per le categorie
<p><$BlogTags$></p>
</div>

<div id="section">
<h2 class="sectiontitle">Feed del blog</h2>
Tag per i feed
<p style="text-align: center"><$BlogFeed$></p>
</div>

<div id="section">
<h2 class="sectiontitle">Bottoni</h2>
Tag per i preferiti
<$BlogSubscribeButton$>
</div>

<div id="section">
<h2 class="sectiontitle">Contatore</h2>
Tag per il contatore
<p><b><$BlogCounter$></b> visitatori</p>
</div>

</div>

<!-- FINE COLONNA SINISTRA -->

( 4 )<!-- INIZIO PARTE CENTRALE -->

<div id="contentmain">

Tag per il fotoalbum
<$BlogPhotoAlbum$>

<!-- INIZIO BLOCCO BLOGGER -->

Blocco di visualizzazione dei post
<Blogger>

Tag per la barra di navigazione
<$BlogNavigation$>

Blocco di intestazione della data
<BlogDateHeader>
<a name="<$BlogItemNumber$>"></a>
</BlogDateHeader>

Tag per il titolo del post
<h5 class="itemtitle"><$BlogItemTitle$></h5>

Tag per il testo del post
<p><$BlogItemBody$></p>

<br clear="all">
<h4 class="data">

Tag per il permalink e i commenti
<a href="<$BlogItemPermalink$>">permalink</a> | <$BlogItemCommentLink$><br>

Tag per le categorie del post
Categorie del post: <i><$BlogItemCategories$></i>

</h4>

Tag per il link alla lista dei commenti
<$BlogItemCommentList$>

</Blogger>

<!-- FINE BLOCCO BLOGGER -->

Tag per il pager
<div id="blog-pager"><$BlogPager$></div>

</div>

<!-- FINE PARTE CENTRALE -->


( 5 )<!-- INIZIO COLONNA DESTRA -->

<div id="contentright">

<div id="section">
<h2 class="sectiontitle">Archivio</h2>
Tag per l'archivio
<p><$BlogArchive$></p>
</div>

<div id="section">
Tag per le foto recenti
<p><$BlogRecentPhotos$></p>
</div>

</div>

<!-- FINE COLONNA DESTRA -->

( 6 )<!-- INIZIO PIEDE -->
<div id="footer">
Template by splinder.com
</div>


<!-- FINE PIEDE -->

<br clear="all">
</div>

<!-- FINE CONTENITORE DEL BLOG -->

</body>
</html>

postato da: Redazione | Permalink
tags: template standard


ArgomentI

autore
categorie
commenti
community
contatore
data e orario
feed rss
foto
link
membri del blog
paginazione pager
post
preferiti
prodotti in vendita
profilo
ricerca nel blog
social bookmarking
suggerimenti
template standard
testo e titoli



Scarica gratuitamente Blog al 100% - Crea il tuo sito in 5 minuti con Splinder
Formato: PDF
Dimensione: 9,4 MB