Pubblicato il 26/10/11e aggiornato il

È ora possibile personalizzare i blog su Blogger a Visualizzazione Dinamica.

I modelli del tipo Dynamic Views recentemente introdotti sono stati accolti con grande interesse dagli utenti, basti pensare che sono stati ben 500.000 coloro che li hanno utilizzati come template predefinito. I feedback ricevuti da Blogger hanno però chiaramente indicato nella impossibilità di personalizzazioni il loro limite più evidente. Sono corsi ai ripari e, tramite Blogger Buzz, veniamo informati che sono già possibili le prime modifiche ai modelli standard.
Dopo aver scelto uno dei template a Visualizzazione Dinamica, andando su Modello > Personalizza si possono togliere le personalizzazioni che avevamo eventualmente inserito per quello che riguardava l'header cliccando su Rimuovi personalizzazioni
rimuovere personalizzazioni
Successivamente andando su Sfondo si può modificarne il colore oppure inserire una immagine di background tra quelle proposte
immagine-di-sfondo
Si va su Applica al blog per rendere effettive le modifiche. Si può applicare anche l'inserimento di un header personalizzato che però dovrà essere alto 65 pixel. Alternativamente si possono scegliere i temi già predisposti. Andando su Avanzato si può modificare l'aspetto di specifici elementi quali i colori dei caratteri, i colori dell'header, la famiglia dei font, ecc. Ulteriori strumenti di personalizzazioni saranno introdotti nelle prossime settimane. 




22 commenti :

  1. Me ne sono accorta per caso anch'io l'altra sera, però ancora nessuna nuova riguardo un'eventuale sidebar e l'inserimento di widgets. Aspettiamo fiduciosi...

    RispondiElimina
  2. ma per i widget nelle dynamic views ancora niente?
    dormono, quelli di blogger? :)

    RispondiElimina
  3. "...Si può applicare anche l'inserimento di un header personalizzato..."
    Scusami Ernesto, ma non riesco ad inserirlo...

    grazie

    RispondiElimina
    Risposte
    1. @fr@ncesco_qci_
      Adesso non è più necessario usare questo meccanismo. Si può mettere un header personalizzato anche nei modelli a Visualizzazione Dinamica andando su Modello > Personalizza. Leggiti anche questo post
      http://www.ideepercomputeredinternet.com/2011/10/come-personalizzare-in-blogger-l-header.html
      Comunque ora la cosa dovrebbe essere anche più semplice

      Elimina
    2. Scusami Ernesto, ma non riesco proprio a capire come inserire un header personalizzato. Perchè dovrebbe essere più semplice? Come fare?
      Grazie

      Elimina
    3. fatto grazie. E' possibile aumentare l'altezza della zona header?

      grazie come sempre

      Elimina
    4. @Fr@ncesco_qci_
      Il sistema ssarebbe quello di mettere nei CSS questo codice

      #header-container {
      height:120px !important;
      }

      dove al posto di 120 si può mettere un altro numero. Il fatto è che non funziona. Gli altri CSS sono #header #header-bar e #header-drawer

      Elimina
    5. Perchè, anche se ho posizionato l'immagine header sopra l'intestazione e la descrizione del blog, mi compare comunque sull'immagine.
      C'è un modo per rimediare a questo inconveniente?
      Grazie

      Elimina
    6. @ Fr@ncesco_qci_
      Nei blog a Visualizzazione Dinamica si possono fare veramente poche cose

      Elimina
    7. Per cancellare l'intestazione e la descrizione blog, ecco la soluzione:

      #header.header .title a h1, #header.header .title h3{
      display: none;

      Adesso mi rimane la problematica di aumentare l'altezza dell'Header...

      Elimina
  4. Ciao Ernesto,
    Quindi non c'è una soluzione al mio problema, perchè il menù , a quanto ho capito, viene nascosto dall'header personalizzato che nel mio caso è alto 300 px rispetto ai 65 del menù alto quindi cambierò sistema passerò ad un altro tema.

    RispondiElimina
  5. Cioè a me ora serve spostare la barra del menù più sotto ed il gioco è fatto.

    RispondiElimina
    Risposte
    1. @Paolo58
      Hai detto poco :) Il fatto è che nei modelli a visualizzazione dinamica non si può accedere al modello. Comunque se hai qualche conoscenza tecnica puoi provare a usare Firebug per trovare il CSS della barra per poi impostare un margin-top adeguato
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html

      Elimina
  6. Ma non c'è bisogno di questo strumento guarda, firefox lo offre già infatti basta selezionare l'elemento che ci interessa tasto destro> Analizza Elemento e funge allo stesso modo di quel componente aggiuntivo, forse prima firefox non disponeva di questa funzionalità ma adesso si. Comunque tornando al discorso di prima il menù lo avevo analizzato e trovo questo <div class="header-drawer " che non riesco a trovare nella sezione "Modifica html" quindi mi sembra impossibile cercare di spostare la barra del menù perchè nonostante il css che hai pubblicato l'immagine va a sovrapporre il menù mettendo sotto l'immagine un bordo senza menù è solo quest'ultima cosa il problema se no il mio sito poteva già partire.

    RispondiElimina
  7. @Paolo58
    Se lo hai trovato non vuol dire che non c'è nel modello. Puoi provare a andare su Avanzato > Aggiungi CSS e incollare una cosa del genere

    .header-drawer {margin-bottom:100px;}

    dove puoi sostituire bottom con top e mettere anche il meno davanti al numero di pixel perché non ho capito bene se vuoi abbassare l'elemento che sta sotto o alzare quello che sta sopra.

    RispondiElimina
  8. @Ernesto Tirinnanzi
    Ti invito a visitare il mio blog rossanoedintorni.tk e vedrai che ho alzato l'header personalizzato con il tuo css a 45px, giusto per farti vedere che c'è di sotto il menu che viene nascosto. Ora quel menù voglio spostarlo più sotto in modo che sia sotto l'immagine che ho scelto di mettere come banner del sito. Vedi se tu riesci ad analizzarlo meglio di me così vedi se è giusto quello che dico.

    RispondiElimina
  9. @Paolo58
    Prova con
    .header-bar {
    margin-bottom:80px;
    }
    Non sono un professionista e quindi non so se andrà.

    RispondiElimina
    Risposte
    1. @Paolo58
      Prova con
      .header-bar {
      margin-bottom:80px !important;
      }

      Elimina
  10. Niente ugualmente ora ti faccio vedere come ho inserito il css
    .header-bar {
    margin-bottom:80px !important;
    background-color:#cccccc !important; /* Colore di sfondo */
    background-image:url(http://3.bp.blogspot.com/-WZ1s8GAsW4c/UACaBkUGXsI/AAAAAAAAAD8/gjDZOfu_Q5o/s800/rossano%2Be%2Bdintorni_logo.png) !important; /* Immagine di sfondo */
    background-repeatmargin-bottom:80px;:no-repeat; /* Per non ripetere l'immagine */
    height:40px !important; /* Altezza della intestazione */
    border-bottom:0px solid #990000; /* Bordo inferiore */
    }
    #header .header-bar .title h1 {display:none;}
    #header a:hover {text-decoration:true !important;}
    #main {margin-top:260px !important;} /* Distanza tra intestazione e contenuto

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.