Google

BLOGGER - alcune spiegazioni - 1^ parte - COMPOSIZIONE

Bene ritrovati a tutti voi lettori... ;o)

Come potete vedere ho modificato un po' il "vestito" del mio blog (spero in meglio) e come avete visto è da tempo che non scrivo perchè ho sempre poco tempo ma appena posso mi butto subito a scrivere per postare qualche notizia che può interessare tutti voi...

Per i "bloggisti" ancora un po' alle prime armi o che non hanno tempo di guardarsi ed imparare il linguaggio usato come sorgente per creare il blog ho deciso di scrivere qualche piccola informazione, spiegazione o qual dir si vopglia.

Tutto quello che dirò può essere davvero utile e indispensabile per poter modificare anche di pochissimo lo stile del proprio blog in modo da farlo corrispondere più precisamente ai nostri gusti e soprattutto al nostro stile, anche perchè io credo che:

visto che il blog è nato come un diario dove ognuno può scrivere la propria storia o raccontare i propri fatti non vedo perchè non si possa modificarlo anche se solo di poco a nostro piacimento... giusto? ;o)

Allora cominciamo questa 1^ Spiegazione....

Come prima cosa voglio dirvi COME CAMBIARE LE MISURE DEL VOSTRO BLOG rendendolo quindi più largo, meno largo, ecc...

-UN BLOG FONDAMENTALMENTE E FORMATO DALLE SEGUENTI PARTI (e quindi naturalmente questi nomi li ritroviamo pari pari usati nell' html del blog per crearli) :

  1. dalla "navbar" --> la barra di navigazione di blogger in alto sul blog ;
  2. dallo "outer-wrapper" --> quello che contiene tutte la cose del blog e che si divide ancora in:
a- "header-wrapper" --> ossia quella parte del blog che contiene l'immagine iniziale con il titolo e la descrizione;

b- "content-wrapper" --> ossia quella parte che contiene la parte centrale del blog che a sua volta è formato dal:

"main-wrapper" ossia quella parte di blog nella quale vengono pubblicati i post, la data di pubblicazione, ecc.. ;
"left-sidebar"e"right-sidebar"(per chi le ha tutte e due)
ossia le colonne che si hanno nel blog con i loro contenuti;

c- "footer-wrapper" --> ossia la parte finale del blog ;

Dopo avervi spiegato come vengono denominate le varie parti che compongono il blog vi volgio spiegare anche dova andare per poterle modificare apportandogli modifiche di vario genere:

-Iniziamo con la "NAVBAR" che possiamo far sparire inserendo nel codice html, subito sopra alla seguente stringa di caratteri:
/* Variable definitions
quest'altra semplice stringa di caratteri:
#navbar-iframe
{display: none !important;}

-Possiamo proseguire con il "CONTENT-WRAPPER" che, visto che deve contenere tutte le varie parti centrali del blog, la sua larghezza dovrà essere la somma di tutte le larghezze delle varie parti centrali del nostro blog, ad esempio:

Se io ho 2 colonne da 240 px (pixel) di larghezza e uno spazio dove porre i post (main-wrapper) da 300 px il mio content-wrapper dovrà essere di 780 px.
Se poi avete anche dei bordi tra una colonna e l'altra, ecc... (come normale consuetudine per questione di ordine) allora anche quelli andranno sommati per formare il totale del content-wrapper.

Capito questo lo possiamo andare a modificare cercando la stringa "content-wrapper" (senza virgolette) nel codice html e trovato vedremo questo (ovviamente voi vedrete dei valori diversi a seconda delle grandezze vostre):

#content-wrapper {
width: 1104px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;

Dove, width è la larghezza totale in px, margin è il margine che ha da sinistra, text-align l'allineamento del testo (se a destra, sinistra, centro, ecc..), background-color il colore dello sfondo suo, border lo spessore del bordo con il rispettivo colore, ecc...

-Poi possiamo descrivere il "MAIN-WRAPPER" che è la parte che conterrà i nostri post e che quindi dovrà essere abbastanza larga e che possiamo trovare nel nostro codice html cercando "main-wrapper" (senza virgolette) , troveremo:

#main-wrapper {
margin-left: 14px;
width: 550px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Dove abbiamo la stessa legenda di prima...

-Poi possiamo continuare con la SIDEBAR(colonna) che può essere "left-sidebar" oppure "right-sidebar". Queste due ovviamente devono essere più strette del main e poi non devono creare confusione all'interno del blog quindi devono essere possibilmente di un'altro colore e divise da un bordo visibile. Le possiamo trovare nel codice html cercando "right-sidebar-wrapper" e/oppure "left-sidebar-wrapper", trovando (ne riporto solo una) :

#right-sidebar-wrapper {
margin-left: 0px;
width:264px;
border-left: 3px solid #C4C4C8;
float:left;
background-color: #F7F7F7;
font-size:95%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Dove, margin-left è il margine che ha dalla sidebar di sinistra, width è la larghezza, border-left è lo spessore del bordo di sinistra con il rispettivo colore, float è l'allineamento testo, background-color il colore dello sfondo, font-size la grandezza del carattere, ecc...

FINE

Spero che tutto questo vi sia stato utile e ricordate che non è finito quì più avanti farò delle altre lezioni per chi come me vuol fare diventare veramente suo il proprio blog !!! ;o)

PER QUALSIASI INFORMAZIONE DOMANDATE, SCRIVETE... SONO QUI' ANCHE PER VOI !!!!


CONTINUA