Come aggiungere colonne alle Blogger Templates sul blog?

Aggiungere un'altra colonna / barra laterale per il tuo modello di sito web minimi blogger e distinguersi dalla folla! Ecco una semplice guida su come aggiungere una colonna per i modelli di blog.

A+ A-

Se si sta visualizzando i modelli di blog di default di blog e sono stanco di esso, qui è qualcosa di eccitante. Aggiungere un'altra colonna / barra laterale per il tuo minimi blogger modello di sito web e distinguersi dalla folla! Anche se la ricerca di siti web modelli di blog su Internet non è un compito ardente, provare qualcosa di nuovo, creativo e avventuroso è più divertente. Inoltre questo dà una migliore utilità del spazio di layout. Ecco una semplice guida su come aggiungere una colonna per i modelli di blog.

Prima di iniziare, cerchiamo di essere a conoscenza di alcune terminologie di layout. Parti di un modello di sito web sono chiamati 'contenitori'. 'Esterno Wrapper' è quello che contiene l'intero layout. I nomi di 'Intestazione e piè di contenitori' sono autoesplicativi. Il 'principale contenitore' è la principale area di contenuto e 'Sidebar' è il pannello su un lato (che di solito è pieno di widget).

Prima di iniziare qualsiasi avventura, è in gran parte ottiene vi consiglia sulla sicurezza! Qui, il consiglio è quello di eseguire il backup di tutto il tuo blog sul vostro sistema. Non dimenticarlo.

  • Cruscotto> Design> Modifica HTML> Copia l'intero codice (insieme con i widget in posizione)> incollarlo su un blocco note e conservare in modo sicuro.
  • Edit HTML Add Sidebar Blogger

  • Ora decidere circa la larghezza della vostra nuova barra laterale. Mi permetta di mantenere il più px 'w'. Tutto quello che dovete fare ora è quello di modificare alcuni pezzi di codice.
  • Trova questo pezzo di codice:
    #outer-wrapper {
    width: 660px;
    

    NOTA: Usa 'Ctrl + F' per una più rapida la ricerca di testo / codici.

  • Ora per questo 660px, aggiungere 'w'px (larghezza della nuova colonna). Modificare il numero nel codice qui sopra per la nuova larghezza, per accogliere nuova colonna. Ora abbiamo creato spazio per la nuova colonna.
  • Aumentare la 'width' di 'header-wrapper' e 'footer-wrapper' anche per la nuova larghezza.
  • Trovare il codice:
    #sidebar-wrapper {
    background: XXX;
    margin-left: 10px;
    width: 220px;
    float: $endSide;
    ……………………… }
    
  • Copiare il pezzo codice esatto indicato sopra e incollarlo appena sopra lo stesso codice. Ora avete creato un'altra colonna. Cambiare il nome '# sidebar-wrapper' per qualcosa di diverso per la nuova barra laterale.
  • Variazione galleggiante nella nuova colonna a 'float: left;' Aggiungi 'margin-left: 10px' ad entrambe le colonne. Ricorda anche di cambiare la 'width' per quello che aveva deciso in precedenza e gestirlo con il margine.
  • Trova questo codice:
    <div id=’sidebar-wrapper’>
    <b;section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    </b:section>
    </div>
    
  • Copiare il codice di cui sopra ed incollarlo esattamente sopra di esso. Cambiare il nome 'sidebar-wrapper' per il nome è stato selezionato per la nuova colonna prima. Anche cambiare l'id = 'sidebar' (nel 2 ° linea) per 'sidebar2'. Salvarlo e anteprima.
  • Ecco a voi, con il vostro tutto nuovo modello blog avere un'altra colonna. Se hai trovato interessante, non giocare con i codici; modificare le variabili di proprietà come il colore, l'allineamento, margini e così via. Spero che questo articolo è valsa la pena il tempo trascorso a leggerlo. Non condividere. Blogging felice