Archivi categoria: Internet, blog

Customizzazione del blog “Cosmesi Naturale”

Ecco il mio ultimo lavoro, la customizzazione del blog di una mia amica:

http://cosmesinaturale.myblog.it

 

cosmesi.bmp

 

Nel lavoro di personalizzazione sono state effettuate le seguenti operazioni:

  • sostituzione dell’header (la testata) originaria del blog, con la foto di una splendida rosa viola;
  • modifica del tipo e dimensione dei caratteri degli articoli del blog;
  • inserimento della licenza creative commons;
  • inserimento dei  contatori delle visite;
  • disposizione dei vari elementi del blog sulle colonne laterali.

Spero che il risultato sia di vostro gradimento, attendo vostri commenti

Myblog: come creare e inserire un box in un articolo

 

Per realizzare i box interni agli articoli, sono utilizzati per evidenziare concetti o righe di codici, ho utilizzato i CSS (Cascade Style Sheet).

Ho creato il box chiamato “boxemi” con le seguenti caratteristiche:

– float: center (il box è posizionato centralmente)
– width:70% (indica la larghezza del box, il 70% della larghezza di dove è collocato)
– height: auto (la sua altezza si regole automaticamente in base all’altezza del contenuto del box)
– padding: 20px (indica la distanza espressa in pixel che deve avere il contenuto del box dal bordo del box stesso)
– border: 5px (indica lo spessore del bordo del box in pixel)
– border-color: #032c48 (indica il codice esadecimale del colore del bordo del box)
– margin: auto (colloca il box lasciando la stessa distanza dagli altri elementi presenti)

Ecco come si presenta il codice del CSS relativo al box che abbiamo elaborato:

#boxemi {
float:center:
color: #032c48;
width: 70%;
height:auto;
padding: 20px;
border: 5px solid;
border-color:#032c48;
margin:auto;
}

Questo codice andrà copiato nel template del nostro blog e salviamo il tutto, effettuata questa operazione tutto è pronto per poter essere utilizzato.

box.jpg
box1.jpg

Ogni volta che vorremo utilizzare il box per evidenziare qualcosa dovremo usare i seguenti codici:

<div id=”boxemi”> “contenuto da inserire nel box” </div>

Per effettuare questa operazione dovremo cliccare sul pulsante “html” per poter manipolare il codice HTML relativo al nostro articolo.

box2.jpg
box3.jpg

Ecco il risultato a lavoro terminato
box4.jpg