Avete mai pensato di creare uno spazio in più nel footer (piè di pagina) nel vostro blog per inserire altri widget di particolare importanza per promuovere i social network collegati al proprio blog? Se si ha l'esigenza di inserire widget di larghezza contenuta può essere utile suddividere il footer in tre colonne. A volte a forza di installare dei nuovi widget ci si accorge che la sidebar si è fatta lunga e pure pesante da vedere, si finisce sempre col rimuovere i widget installati per mantenere il blog pulito. Avendo più colonne nel footer è possibile spostare quelli della sidebar in basso, in modo da evitare la loro rimozione e soprattutto perché codici javascript e widget nel footer influiscono meno sulle prestazioni del blog. Solitamente questa è la soluzione perfetta e viene scelta da tanti blogger. La maggior parte degli sviluppatori di template professionali per Blogger come ThemeForest fornisce questa funzione di default nei loro modelli. Anche su Blogger è possibile suddividere il proprio footer in tre parti se si utilizza un tema di quelli predefiniti.
Si deve andare su Modello > Personalizza > Layout > Layout piè di pagina e selezionare quello suddiviso in tre parti. Così facendo dalla sezione layout avrete la possibilità di inserire tre gadget sulla stessa riga.
Se questa funzionalità non è presente perché avete scelto di utilizzare un tema diverso per il vostro blog, allora potete adottare un metodo più complicato per ottenere lo stesso risultato. Andate su Modello > Modifica HTML e prima del tag </body> dovete inserire questo codice:
Dopo aver dichiarato i widget nel template il passo successivo è quello di applicare il foglio di stile in modo che sembri compatibile con il modello del blog in uso. Si deve cercare la riga ]]></b:skin> e prima di essa aggiungere il seguente pezzo di codice che comunque può essere personalizzato a proprio piacimento:
Dopo aver salvato il modello noterete tre aree di widget nel fondo di ogni pagina del blog esattamente come nello screenshot:
E' comunque possibile aggiungere altri gadget o modificare quelli appena aggiunti in base alle proprie esigenze e necessita.
Si deve andare su Modello > Personalizza > Layout > Layout piè di pagina e selezionare quello suddiviso in tre parti. Così facendo dalla sezione layout avrete la possibilità di inserire tre gadget sulla stessa riga.
Se questa funzionalità non è presente perché avete scelto di utilizzare un tema diverso per il vostro blog, allora potete adottare un metodo più complicato per ottenere lo stesso risultato. Andate su Modello > Modifica HTML e prima del tag </body> dovete inserire questo codice:
<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes'>
<b:widget id='HTML15' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='Gallery' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
<b:widget id='HTML13' locked='false' title='About' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>
Dopo aver dichiarato i widget nel template il passo successivo è quello di applicare il foglio di stile in modo che sembri compatibile con il modello del blog in uso. Si deve cercare la riga ]]></b:skin> e prima di essa aggiungere il seguente pezzo di codice che comunque può essere personalizzato a proprio piacimento:
#footer-widgets {
padding: 20px 0 0 0;
}
.footer-widget-box {
width: 300px;
float: left;
margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
color: #374142;
}
#footer-widgets h2 {
font-family: inherit;
text-shadow: none;
font-size: 16px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
border-bottom: 4px solid #444444;
padding-bottom: 10px;
}
#footer-widgets .widget ul {
list-style-type: none;
list-style: none;
margin: 0px;
padding: 0px;
}
#footer-widgets .widget ul li {
padding: 0 0 9px 0;
margin: 0 0 8px 0;
}
#footer-widgets-containerback {
width: 980px;
margin: auto;
}
#footer-widgets-container {
background: #484848;
border-top: 10px solid #66b381;
}
.footersec {
color: #A1A6AF;
font-size: 13px;
line-height: 18px;
}
.footersec .widget {
margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}
Dopo aver salvato il modello noterete tre aree di widget nel fondo di ogni pagina del blog esattamente come nello screenshot:
E' comunque possibile aggiungere altri gadget o modificare quelli appena aggiunti in base alle proprie esigenze e necessita.
