COME IMPOSTARE UN BLOG

Oggi parleremo di come impostare un buon blog per i vostri siti. Seguite il tutorial passo passo....

Innanzitutto comincio con un ringraziamento a Giancarloweb.it dal quale ho appreso le principali nozioni che poi ho cambiato secondo le mie necessità e dopo prove su prove.

Partiamo con una visualizzazione a schermo intero per PC su monitor da 27 pollici.

STEEP 1

PREPARATE IMMAGINI PER LE COPERTINE BLOG CON LE SEGUENTI MISURE:

1573 X 720

---

SETUP INIZIALE

Portatevi al passo 3 MAPPA e fate doppio click su BLOG PAGINA PRINCIPALE

Questo è quello che vi troverete davanti: ▼

IMPOSTARE:

COPERTINA A SINISTRA,TITOLO E CONTENUTI A DESTRA

CARD PER RIGA =1 (Sono la copertina e l'immagine con sotto i contenuti)

RIGHE PER PAGINA:=5 (sono i blocchi delle immagini dei vari articoli ma se ne possono scegliere anche di più)

ALTEZZA CARD= 300

MARGINE TRA CARD=10

DIMENSIONE DELLA COPERTINA = 65%

MARGINE COPERTINA=TUTTI ZERO

MARGINE CONTENUTI=10,10,35,30

VISUALIZZA BLOCCHI LATERALI=SI

VISUALIZZAZIONE:NESSUN ARTICOLO IN EVIDENZA

ARTICOLI IN EVIDENZA=3

ALTEZZA CARD=450

---

ANDARE SU ELEMENTI E SETTARE COME NELLE IMMAGINI: ▼

SFONDO - LO SFONDO CHE VOLETE IO HO MESSO UN GRIGIO TENUE

VARI SETTAGGI  PER LO SFONDO

Potete scegliere anche la visualizzazioni di rettangoli puri quì varia a seconda dei gusti personali l'importante è poi non diversificarlo dal pulsante a

prescindere dal suo colore.

COPERTINA ▼

Nulla vieta che se volete un effetto al passaggio del mouse sull'immagine si possa utilizzare uno degli effetti preimpostati sulla voce EFFETTO SU PASSAGGIO. Io ho scelto nessuno.

ATTENZIONE: NON FLAGGARE LA CASELLA ADATTA ALLE DIMENSIONI MA LASCIARLA ► VUOTA.

TITOLO

Settaggio del Font e della grandezza: ▼

Potete scegliere anche dei vostri font ma rispettate se vi è possibile l'impostazione della grandezza

DESCRIZIONE ▼

Potete scegliere anche dei vostri font ma rispettate se vi è possibile l'impostazione della grandezza

DETTAGLI ▼

Potete scegliere anche dei vostri font ma rispettate se vi è possibile l'impostazione della grandezza

PULSANTE ▼

Potete scegliere anche dei vostri font ma rispettate se vi è possibile l'impostazione della grandezza

SETUP PULSANTE

FATTA QUESTA 1^ PARTE PASSIAMO ALLO STEEP 2

Andare al passo 3 MAPPA e fare doppio click su BLOG PAGINA ARTICOLO

Settare come da immagine ▼

Andate al setup dei commenti e settate come da immagine: ▼

Come notate bisogna creare una sottocartella sul server dove salvare i dati del blog. potete anche lasciare in bianco viceversa andate tramite ftp sulla rooth principale del vs sito e create la cartella dandogli i permessi 777.

Non dimenticatevi di inserire la vostra e-mail per ricevere notifiche di eventuali commenti ciò vi consentirà di eliminare subito quelli non graditi.

---

STEEP 3

Andare al passo 1 IMPOSTAZIONI BLOG

Settare come da immagine . NOTARE CHE LA LARGHEZZA E' STATA IMPOSTATA A 200 MA POTETE FARE DELLE PROVE ANCHE CON MISURE SUPERIORI.▼

STEEP 4

Andare al passo 3 E SELEZIONARE BLOG PAGINA PRINCIPALE E FARE DOPPIO CLICK SU PROPRIETA'

aprite il pannello esperto e incollate questo codice: PRIMA DELLA CHIUSURA DEL TAG HEAD

ATTENZIONE : SE AVETE IMPOSTATO HEADER E STIkYBAR non inserire le prime 5 righe di style viceversa se avete impostato la sola Stikybar in discesa allora inserite il codice. Potete variare l'altezza agendo sulla modifica del padding-top 150px. per adattarlo al meglio al layout di pagina. IN QUESTO SITO L'HEADER E' STATO MESSO A ZERO.

---

<style>

#imContent {

padding-top: 150px !important;

}

</style>

<style>

#imBlogSidebar {

padding-top: 1px !important;

}

</style>

<style> .imBlogHighlightedCards div { background-size:cover !important } </style>

<style> .imBlogHighlightedCards div { background-size:cover !important } </style>

<style> .imBlogPostBody img {width:100%} </style>

<style> #imPgTitle, #imPgTitle a, .imPgTitle, .imPgTitle a {

      font: normal normal bold 16pt 'Open Sans';

      color: #004f73;

}

</style>

<style> .imBlogPostCardDetails {

    overflow: visible!important;

    background:#eeeeee;

    padding: 12px 12px 12px 12px;

}

  

  </style>

<style> .imBlogPostCardAuthor a {

       color: #222222;

  background: #ffffff;

  padding: 4px 8px;

  border-radius: 2px;

  }

      

  </style>

  

  <style> .imBlogSeparator {

       display:none; !important;

  }</style>

  

  <style> .imBlogPostCardDate {

       color: #222222;

  background: #ffffff;

  padding: 4px 8px;

  border-radius: 2px;

  }

      

  </style>

  

  <style> .imBlogPostCardButton:hover a {

background: #FF0000;

border: solid thin #FF0000;

color:#ffffff;

 transition: all 0.2s ease-in;

}

   

</style>

      

<style> .imBlogPostCardButton {

   padding: 10px 12px 10px 12px!important;

}

   

</style>

---

VARIANTI DA PROVARE:

Nello Steep 1 alla voce VISUALIZZAZIONE:NESSUN ARTICOLO IN EVIDENZA, potete anche impostare uno slider con 3 articoli in sequenza orizzontale. La mia scelta è stata quella di non avere nessun Slider.

Nello steep 1 voce SFONDO potete visualizzare lo sfondo che volete, potete scegliere se visualizzare il contenuto in una immagine a rettangolo o a bordi arrotondati  con o senza ombra. Dipende da come volete che si presenti graficamente il vostro articolo.

Nello steep 1 voce TITOLO e DESCRIZIONE , potete scegliere il font che più vi aggrada e con la misura che a voi piace di più ma dovete fare delle prove di anteprima per vederne il risultato.

Impostazione dei Breack-point da utilizzare: 1340/1280/1150/960/720/600/480

---

FINE DEL TUTORIAL

Se è stato fatto tutto avrete un blog come quello che vedete sul sito.

CREDITI - Giancarloweb

---