REDAZIONE

Ciao Myblogger,
vi segnaliamo un Myblog che, se amate la grafica glitter e luccicante fa al caso vostro: Dolly Doll, dove potete trovare tantissimi suggerimenti e idee per abbellire il vostro blog!

Visto l’argomento un’immagine vale più di mille parole…

Ecco allora immagini floreali:

Tematiche:

O a tema musicale:

Questo è solo un assaggio, sul Myblog in questione se ne trovano molti di più!

A presto,
la Redazione

Ciao MyBlogger, volete dilettarvi a creare un logo e non sapete dove trarre ispirazione?

Abbiamo selezionato qui di seguito alcuni dei siti migliori a cui ispirarvi per le vostre creazioni.

Consigliatissimo Creattica, un sito davvero molto ricco e diviso con estrema precisione tra le diverse tematiche e tecniche con le quali un logo si può concepire.

Altro sito interessante in questo senso è Logo Gala, che spicca, oltre che per l’interesse e la varietà dei logo anche per la simpatica e utile idea della ricerca di logo per colore.

Altra ricca galleria di logo la troviamo in Logomoose con simpatiche premiazioni per il logo del mese.

Molto ricco anche Logo Fury, dal nome assai minaccioso, ha oltre 4000 logo per tutti i gusti ai quali ispirarsi.

Infine tanti logo elaborati e divertenti li troviamo anche su The Design Inspiration.

Allora Myblogger, pronti a farvi ispirare?

A presto,

la Redazione

In questo tutorial vi mostriamo un modo per modificare il widget del calendario standard con uno personalizzato come questo:

Per effettuare questa trasformazione dobbiamo modificare due pagine nella sezione “Presentazione > Opzioni avanzate”: il “Foglio di stile” e il “Modello del calendario”.

Se andiamo ad aprire il “Modello del calendario”, vediamo che nel codice il calendario è suddiviso in mese, settimana e giorni. Ad ognuno di questi elementi dobbiamo applicare le nostre modifiche.

Come modificare il titolo del calendario “Mese+Anno”
Noi vogliamo:

1. aggiungere, prima del titolo del calendario “NOVEMBRE 2008”, la parola “ARTICOLI”;
2. aggiungere uno sfondo personalizzato.

Procediamo cliccando il link “Modifica modello” del “Modello del calendario” e cerchiamo questa riga di codice:

      <h2>{$month_name}&nbsp;{$year}</h2>      

Per aggiungere la parola “ARTICOLI” scriviamo il testo subito dopo il tag <h2>:

      <h2>ARTICOLI - {$month_name}&nbsp;{$year}</h2>      

In questo modo vedremo comparire nel Calendario il titolo “ARTICOLI – NOVEMBRE 2010” proprio come volevamo. Ora vogliamo aggiungere sotto al titolo del calendario questa immagine e colorare di azzurro chiaro il testo:

Quindi aggiungiamo lo stile CSS direttamente in questa pagina all’interno del tag h2 come segue:

      <h2 style=
      "background:url('http://ilmioblog.myblog.it/sfondo_titolo.png') 
      no-repeat; color:#e4effc;”>
      ARTICOLI - {$month_name}&nbsp;{$year}</h2>        

Dove:

• background:url)(‘http://ilmioblog.myblog.it/images/sfondo_titolo_calendario.png') è l’indirizzo in cui si trova la nostra immagine;
• color:#e4effc; definisce l’azzurro chiaro che dovrà avere il nostro titolo.

Salviamo.


Come modificare lo sfondo del calendario
Apriamo il Foglio di stile cliccando sul link “Modifica modello”.
Nella colonna destra della finestra che si apre incolliamo le seguenti righe:

   TABLE.calendar {
   background: #0f315f;
   }        

Dove #0f315f è il colore blu che abbiamo scelto per lo sfondo.
Se volete, è anche possibile associare un’immagine come sfondo in questo modo:

   TABLE.calendar {
   background: url(“http://url-della-mia-immagine-di-sfondo.jpg”) 
   no-repeat;
   }        

Come modificare i “giorni della settimana”
Sempre nella colonna destra del Foglio di stile scriviamo:

  TH.day-of-week {
  color:#367ed6;
  }        

Dove color:#367ed6; definisce il colore che devono avere le iniziali dei giorni della settimana (Lunedì, Martedì, Mercoledì, …)



Come modificare i “giorni del calendario”
Per modificare la grafica dei giorni, nel Foglio di stile, scriviamo:

  .sidebar TABLE.calendar a {
  color: #e4effc;
  padding-left:3px;
  padding-right:3px;
  }        

Dove

• color: #e4effc; definisce il colore che devono avere i giorni durante i quali sono stati pubblicati dei post;
• padding-left e padding-right definiscono lo spazio che deve esserci a sinistra e a destra tra i giorni.

  .sidebar TABLE.calendar a:hover {
  color:red;
  }        

Dove color:red; definisce il colore che devono avere i giorni con link quando si passa sopra con il mouse.

 TD.day {
 background:url('http://ilmioblog.myblog.it/sfondo_giorno.png') 
 no-repeat center;
 width:25px;
 height: 17px
 }  

Dove:

• background:url('http://ilmioblog.myblog.it/images/sfondo_giorno_del_calendario.png') no-repeat center; definisce l’immagine di sfondo che devono avere i giorni in cui sono stati pubblicati dei post, in modo da renderli più facilmente riconoscibili;
• width e height sono le dimensioni dell’immagine di sfondo.

Il risultato finale sarà questo:

Salviamo.

Avete presente quelle iconcine piccine picciò che si trovano a sinistra della URL nella barra degli indirizzi e nel menu dei Preferiti dei browser?

Personalizzarla è molto facile e qualche tempo fa vi abbiamo proposto sulle pagine del Blog Redazione un tutorial per inserire una favicon sul vostro blog… ora vi proponiamo di partecipare ad un contest: L’albero delle favicon che premierà con un bel gagliardetto le favicon più carine e divertenti!
Se avete bisogno di qualche consiglio, ci sono degli amici MyBlogger che hanno dedicato dei post molto interessanti sull’argomento, come Mille pasticci che ha creato e regala tante favicon molto carine per il vostro Blog e Html che vuole regalare delle dritte in più per creare delle favicon davvero personali!
Prendete esempio dai Blogger mauiaddicted, napoilitania, freereturn, guardatevi bene in giro e fateci vedere di cosa siete capaci!

Oggi parliamo di web design e di come la nostra Blog Community sia piena di giovani (e meno giovani) talenti che sul web mettono a disposizione la loro arte, i loro lavori e le loro conoscenze per aiutare i meno esperti!

Scritte glitter, GIF animate e sfondi
I MyBlogger che amano personalizzare i proprio Blog con immagini e testi glitterati, GIF animate o sfondi originali sono tanti e Sandra rosso drago lo sa bene, infatti ha trasformato il suo Blog in un gigantesco contenitore di immagini gratuite da condividere con tutti e scaricare!

Personalizzare il template del Blog
Se invece volete personalizzare il template del vostro Blog, non potete perdervi le lezioni su Artisteer, l’applicazione che permette di creare da zero dei fogli di stile CSS per il vostro Blog!

Scaricare l’audio dai video in Rete
Avete trovato su DailyMotion o su YouTube il nuovo video del vostro cantante preferito e volete scaricare solo la traccia audio in formato MP3 per ascoltarla quando volete? Se usate Firefox per navigare su internet, potete installare un plug-in utilissimo che potete trovate sul Blog electropage, che propone anche a tutti i blogger un modo gratuito per pubblicizzare il proprio Blog!
Andate a visitarlo per scoprirne di più.

In questo tutorial vi mostro come creare un menù orizzontale con le categorie del Blog e come inserirlo sotto l'immagine dell'header, ad esempio come nel Blog GossipWorld.

Le possibilità sono due:

1) creare un menù in flash
2) creare un menù utilizzando i CSS e l'HTML

Per il primo caso potete seguire questo tutorial, per il secondo vediamo adesso come possiamo procedere. Prima di tutto, dopo aver creato le categorie dei post, salviamo in un documento i link di ogni categoria.

Dal pannello di controllo del Blog andiamo in Presentazione > Opzioni avanzate e clicchiamo il link Modifica modello del Foglio di stile. Qui andremo a scrivere il codice CSS che definirà l'aspetto grafico del nostro menù, vediamo come.

Foglio di stile: CSS (tra i simboli /* e */ ci sono i commenti che spiegano il funzionamento di ogni riga):

#menu_orizzontale { /* al posto di “menu_orizzontale” potete inserire il nome che più vi è comodo */
background-color:#353535; /* definisce il colore di background in formato RGB esadecimale */
padding: 3px 15px 3px 15px; /* definisce la posizione dei link nel menù */
}

Definiamo ora la grafica dei link del menù:
a.menu_orizzontale:link {
font-family:Arial, FreeSans, sans-serif; /* sono i font che il menù deve utilizzare */
font-size:16px; /* è la dimensione che i link devono avere */
color:#FFFFFF; /* è il colore in formato RGB esadecimale che i link devono avere */
}

Ora, quando si passa il mouse su una delle voci del menù vogliamo che il colore dei link cambi. Quindi, sempre nel Foglio di stile, scriviamo i valori del menù nella fase denominata “:hover”:

a.menu_orizzontale:hover{
color: #999997;
}

In questo modo abbiamo impostato l’aspetto grafico che il menù orizzontale dovrà avere, ma il menù vero e proprio non lo abbiamo ancora realizzato.
Per creare ogni voce di menù dobbiamo inserire il seguente codice HTML:

<a class=”menu_orizzontale” href=http://NomeDelBlog.myblog.it/NomeCategoria>Voce del menù</a>

Dove:
class richama la grafica dal codice CSS nel Foglio di stile;
href contiene il link ad una delle categorie del Blog;
Voce del menù è il nome di una delle voci menù visibili dai visitatori del Blog.

Se vogliamo separare ogni voce di menù con un’immagine, basta inserire tra una voce e l’altra il seguente codice:

<img src=”http://UrlImmagineDaInserire”>

Dove href contiene l’indirizzo web in cui si trova l’immagine che desideriamo inserire.
Il risultato del codice finale sarà questo:

Ora possiamo finalmente inserire il menù orizzontale nel nostro Blog: dal pannello di controllo entriamo in Presentazione > Opzioni avanzate e clicchiamo sul link Modifica modello delle seguenti  pagine:

•    Modello della home page
•    Modello della pagina categoria
•    Modello della pagina dei commenti
•    Modello di pagina di Link permanente

Incolliamo il codice del menù tra queste due righe:

Salviamo le modifiche e guardiamo il risultato finale.
Se volete un’idea più concreta visitate http://gossipworld.myblog.it.

Quando avrete creato il vostro nuovo menù segnalatecelo, stiamo pensando di premiare i più belli offrendo più visibilità ai vostri Blog all'interno di MyBlog!

La Community di Virgilio cambia e si rinnova con una nuova grafica e nuovi servizi!

La nuova home page è stata sviluppata per avvicinarsi alle esigenze degli utenti sempre alla ricerca di novità e spazi in cui esprimersi.

Con la nuova grafica e la navigazione facilitata è possibile passare molto più velocemente da un canale tematico all’altro, rimanere aggiornati su quello che sta accadendo e interagire in diretta con gli altri utenti della Community.

In questo tutorial mostriamo come modificare l’header del Blog.
Per chi non lo sapesse, l’header è la parte alta del Blog in cui sono presenti l’immagine e il titolo del Blog.

Per cominciare, con il tasto destro del mouse clicchiamo sull’immagine dell’header facendo apparire il menu a tendina. Cliccate su Salva sfondo come… (su Internet Explorer) o Visualizza immagine di sfondo (se utilizzate Firefox).

Avete già scelto l’immagine da sostituire? Bene.
Allora aprite l’immagine appena salvata con un programma di grafica.
Poi importate anche l’immagine da sostituire e adattate le sue dimensioni con quelle dell’immagine originale, in questo modo quando la inseriremo nel Blog sarà omogenea con il resto della grafica.
Salvate il file con la nuova immagine (vi consigliamo di salvarlo nel formato JPG o PNG) e caricatelo nel vostro Blog da Pannello di Controllo > Gestione File.
Cliccate sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare la foto nel Blog.
Dopo pochi secondi vedrete la vostra immagine apparire nell’elenco dei file all’interno della cartella images.
Cliccate con il tasto destro del mouse sul nome del file e selezionate Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo avete copiato la url della vostra immagine. Incollatela in un file di testo e salvatela, ci servirà tra poco.

Ora dobbiamo inserire nel codice del Blog il link della nuova immagine che abbiamo caricato.  Andate in Presentazione > Opzioni avanzate e cliccate su Modifica modello del Foglio di stile. Si aprirà una finestra popup contenente il codice CSS.
Cercate queste righe di codice:

 #banner {
    width:925px;
    height:188px;
    background: #4583D0 url('http://blog.alice.it/graphics/design/preview/set1/4583D0/banner.jpg') no-repeat;
    color: #FFFFFF;
    margin-left:auto;
    margin-right:auto;
    line-height: 140%;
}

La riga di codice che dovete modificare è una sola: background.
Copiate la URL dell’immagine che avete salvato poco fa e incollatela all’interno delle parentesi tonde. La riga di codice diventerà così:

background: #4583D0 url('http://nomeblog.myblog.it/lamianuovaimmagine.jpg’) no-repeat;

Cliccate su Salva queste informazioni e andate a vedere il vostro Blog.
L’immagine è cambiata!

Buon lavoro!