Aggiungere una sezione inferiore al blog

Finalmente ho trovato il tempo di scrivere un articolo particolarmente interessante.

Dopo le innumerevoli richieste da parte vostra, ho deciso di pubblicare una guida su come aggiungere una sezione inferiore al blog.

Per sezione inferiore del blog, intendo il contenitore (per chiamarlo così) che si trova a fine pagina e può contenere 3 elementi a piacere.

Cominciamo col dire che quello proposto è solo un elemento base, modificabile a piacere.

Come prima operazione, rechiamoci in Layout/Modifica HTML ed eseguiamo, per precauzione, il backup del nostro modello.

Quindi ricerchiamo la stringa <b:skin><![CDATA[/ e subito dopo inseriamo questo codice CSS:

#front-popular {
font-size:0.7em;
color:#fff;
width: 940px;
background:#2c2c2c url(http://img211.imageshack.us/img211/4930/bottombar.png) bottom no-repeat;
margin: 0 auto;
padding:10px;
}

#recentpost, #mostcommented {
width:280px;
float:left;
padding:10px;
border:1px solid #fff;
}

#mostcommented {
margin-left:17px;
}

#recent_comments {
width:280px;
float:right;
padding:10px;
border:1px solid #fff;
}

#recentpost a, #mostcommented a, #recent_comments a {
color:#fff;
}

#recentpost ul, #mostcommented ul, #recent_comments ul {
margin-top:5px;
}

#recentpost ul li, #mostcommented ul li, #recent_comments ul li {
list-style:none;
border-top:1px dotted #fff;
padding:5px;
display:block;
}

#recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {
background:#3C78A7;
color:#fff;
}

#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
border-top:0px dotted #fff;
}


#footer {
margin: 0 auto;
width: 960px;
font-size:0.6em;
padding-top:10px;
padding-bottom:10px;
}


/* Float Properties*/

.clearfloat:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfloat {
display: inline-block;
}


/* Hides from IE-mac \*/
* html .clearfloat {
height:1%;
}

*+html .clearfloat {
height:1%;
}

.clearfloat {
display:block;
}

Inserito il codice, scorriamo fino alla fine del modello e ricerchiamo il testo </body>.

Facendo particolare attenzione, incolliamo questo codice HTML subito prima:


<div class='clearfloat' id='front-popular'>

<div class='clearfloat' id='recentpost'>
<b:section class='extra-bottom' id='extra-bottom1' preferred='yes' showaddelement='yes'>
<b:widget id='Text22' locked='false' title='Aggiungi un elemento' type='Text'/>
</b:section>
</div>

<div class='clearfloat' id='mostcommented'>
<b:section class='extra-bottom' id='extra-bottom3' preferred='yes' showaddelement='yes'>
<b:widget id='Text23' locked='false' title='Aggiungi un elemento 2' type='Text'/>
</b:section>
</div>

<div class='clearfloat' id='recent_comments'>
<b:section class='extra-bottom' id='extra-bottom2' preferred='yes' showaddelement='yes'>
<b:widget id='Text24' locked='false' title='Aggiungi un elemento 3' type='Text'/>
</b:section>
</div>

</div>

Salviamo il modello e avremo così inserito una sezione inferiore nel blog.

Tendo a precisare che il modello proposto è quello ufficiale della camera dei blog. Per qualsiasi modifica, basta editare il codice CSS proposto precedentemente.

E' inoltre possibile inserirvi qualsiasi elemento, semplicemente andando in Layout\Elementi pagina.

Aspetto con ansia di sapere cosa ne pensate!