Come creare tre colonne nel footer di Blogger


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 sopratutto 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:
<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 != &quot;&quot;'>
    <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 != &quot;&quot;'>
    <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 != &quot;&quot;'>
    <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.



2 commenti :

  1. C'è un' alternativa per chi non ha il codice b:skin??? :(

    RispondiElimina
    Risposte
    1. è presente in tutti i temi di Blogger, comunque l'alternativa è questa:
      http://www.scuolissima.com/2014/08/come-aggiungere-codice-css-blogger.html

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".