COME IMPOSTARE UN BLOG

logo
EnglishFrenchGermanItalianRussianSpanish
Select Language
Vai ai contenuti

COME IMPOSTARE UN BLOG

TEMPLATEWEBDESIGN
Pubblicato da TEMPLATEWEBDESIGN in TUTORIAL · Venerdì 10 Nov 2023
Tags: IMPOSTAREUNBLOG
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




Non sono presenti ancora recensioni.
0
0
0
0
0
Torna ai contenuti