Aggiungiamo una terza colonna al blog

Modificare un modello a due colonne proposto da blogger, o un altro modello che si puo trovare in rete per aggiungere una terza colonna alla sinistra, e abbastanza semplice ma per prima cosa va fatto il  BACKUP che ti permettono di salvare il blog in caso di errore. Questo post e stato fatto sulla base del template minima, proposto da Blogger; ovviamente e applicabile a tutti i modelli apportando delle piccole modifiche e anche le dimensioni delle colonne sono modificabili a piacimento. Una volta eseguito il backup, clicchiamo su Modifica HTML

Schiacciamo i tasti Ctrl + F e nella casella di ricerca che si apre, scriviamo #sidebar; troverete una riga uguale o simile a questa

#sidebar-wrapper {

  width: 220px;

  float: $endSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

Copiate tutta la parte scritta in blu e incollate subito dopo, aggiungendo il numero 1 (uno), poi modificate le scritte evidenziate in giallo

#sidebar-wrapper {

  width: 220px;                             modificare 220 con 210

  float: $endSide;

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

#sidebar1-wrapper {
width: 220px;                              modificare 220 con 210
float: $endSide;                          modificare end con start
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sempre nella casella di ricerca che si apre con i tasti Ctrl + F, cercate  #main-wrapper e subito dopo aggiungete le due righe blu

#main-wrapper {

margin:0 15px 0px;

padding:0 10px 0px;

Ora cercate .sidebar, copiate tutto la parte che inizia con la scritta .sidebar e copiatela subito sotto aggiungendo sempre il numero 1 come da esempio

/* Sidebar Content
----------------------------------------------- */
.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li {

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:.25em;

padding-$startSide:15px;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

.sidebar1 {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }
.sidebar1 ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar1 li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
.sidebar1 .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

Cercate <div id='main-wrapper'> e aggiungete subito sopra, la parte scritta in blu

     
      <div id='sidebar1-wrapper'>

        <b:section class='sidebar' id='sidebar1' preferred='yes'>

</b:section>

      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
</b:widget>
      </b:section>

Sempre con l'aiuto dei tasti Ctrl + f, cercate le tre righe scritte in rosso e modificate i numeri evidenziate in giallo

#header-wrapper {

width:660px;                          modificare 660 con 880
margin:0 auto 10px;
border:1px solid #333333;  
}

#outer-wrapper {

width:660px;                          modificare 660 con 880
margin:0 auto;
padding:10px;
text-align: left;
font: normal normal 100% Truebuchet MS' , Truebuchet, Verdana, Sans-serif;
}

#footer {

width:660px;                          modificare 660 con 880
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Buon lavoro e ricordatevi sempre di fare il Backup prima di fare qualsiasi modifica.

Ti è piaciuto l’articolo? Clicca su OK!


Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

leggi tutto

Scegliamo il Browser

Quello che vedete qua sopra, e un pulsante con una scritta colorata e lampeggiante, se ci cliccate sopra vi riporta alla Home page e l'ho creato utilizzando Mozilla Firefox. Di seguito vi metto le immagini che ho realizzato visualizzando il post con i vari browser disponibili.

---

Questo e ciò che potete visualizzare utilizzando Mozilla firefox, tutto funziona e si visualizza perfettamente

---

Questo e ciò che potete visualizzare utilizzando Google Chrome, i colori dell'immagine sono perfetti, il pulsante con link e perfetto ma non lampeggia.

---

Questo e ciò che potete visualizzare utilizzando Opera, i colori dell'immagine sono perfetti, il pulsante con link funziona ma e leggermente rimpicciolito e non lampeggia.

---

Questo e ciò che potete visualizzare utilizzando Safari, anche qui i colori dell'immagine sono perfetti, il pulsante con link e perfetto ma non lampeggia.

---

Questo e il peggio che potete visualizzare perchè utilizzando Internet Explorer ci ritroviamo con il pulsante che taglia la scritta , anche qui non lampeggia, ha perso la formattazione dei colori e sopratutto non riconosce il link che dovrebbe aprirsi cliccandoci sopra. Insomma, un disastro totale.

---

Quello che avete visto e solo un piccolo esempio di come i Browser si comportano con i vari codici Html. Quando facciamo qualche cosa di nuovo nel nostro blog, sarebbe sempre opportuno verificarne il corretto funzionamento con i vari Browser perchè potreste essere sfortunati e incappare in un codice che non viene interpretato come dovrebbe. Ovviamente ci sono alcuni codici che vengono interpretati solo da Internet Explorer e non dagli altri ma i casi sono sempre a sfavore dello stesso perchè e un mondo a parte che a mio avviso dovrebbe sparire o almeno essere reso compatibile con la concorrenza. Non voglio parlare male di IE ma se lo abbandonate per passare ad un altro Browser, vi fate solo un regalo.
Se lo desiderate, potete scaricare da qui un Browser alternativo cliccando sull'immagine dello stesso.

Ti è piaciuto l’articolo? Clicca su OK!


Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

leggi tutto

Modificare le dimensioni delle immagini

Girando per i blog, ho notato che in molti di essi si vedono delle immagini e video Youtube, inseriti  fuori misura. Ho creato questo esempio per darvi un idea inserendo foto troppo grosse.

Come si puo fare per ridimensionare le immagini?
Se usate il vecchio editor dei post, appena inserita l'immagine, dovete cliccarci sopra due volte per visualizzarla come nella foto di sotto

una volta che si visualizza il bordo della foto, con i quadratini neri ai vertici e sui lati, puntate il mouse su uno dei vertici della foto e tenenendo premuto il tasto di sinistra, trascinate la foto seguendo il senso della freccia fino a ridurre l'immagine al punto desiderato. Se il senso di trascinamento che effettuerete, sarà orizzontale o verticale, perderete le proporzioni. Ovviamente, trascinando nel senso opposto, si aumentano le dimensioni dell'immagine ma si perde anche in qualità della stessa.

---

Se usate il nuovo editor dei post, (non lo conosci? clicca qui) vale quanto scritto di sopra ma con l'aggiunta che quando cliccherete due volte sulla foto, visualizzerete questo nuovo strumento che vedete sotto; e un aggiunta che Blogger ci da con le ultime modifiche apportate all'editor dei post arricchito con nuove funzioni.

---

Un piccolo trucco: fate delle prove con una foto e trovate il limite massimo di larghezza, per essere visualizzate correttamente senza essere tagliata; poi usatelo quando inserite nuove fotografie nei post. Quando farete le prove, vedrete una finestrella come quella nell'immagine di sotto, appena trovata la dimensione ottimale, prendete nota della larghezza massima e quando ridimensionate le immagini nei post, saprete in anticipo quale dimensione impostare senza fare continue prove.

Ovviamente quanto scritto sopra, e valido anche per modificare le dimensioni dei video Youtube che vogliamo inserire nel post.

Ti è piaciuto l’articolo? Clicca su OK!


Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

leggi tutto

Inseriamo un link nei commenti ai post

Qualche giorno fa, un amica mi chiedeva come si faceva a inserire dei link nei commenti dei post e siccome Blogger, non sempre spiega bene come fare le cose e tanti di noi non sanno come farlo,voglio insegnarvi come fare con tre tipi diversi di link da utilizzare in maniere diverse.
L'esempio1, e il più semplice e funziona ovunque, post, commenti nei post e widget

esempio 1
<a href="Url del link">Nome del link</a>

I prossimi due esempi, non vengono accettati nei commenti dei post.
Nell'esempio 2, abbiamo aggiunto un tag e un valore; aprirà il collegamento in una nuova finestra lasciando aperta la precedente. Il tag target, indica al browser che deve aprire una nuova finestra, mentre il valore "_blank" indica che deve essere esclusiva per il link aperto. Se in un post abbiamo dieci collegamenti e ogni collegamento usa il valore  "_blank", il visitatore che li aprirà tutti si troverà con dieci finestre aperte contemporaneamente e quindi con un possibile rallentamento del sistema operativo. Per ovviare a questo problema, andremo a sostituire il valore "_blank" con una semplice "_x". (esempio 3) La x che abbiamo inserito, servirà a tenere sempre aperta la pagina principale ma chiuderà il primo collegamento aperto per fare posto al secondo, poi al terzo e così via

esempio 2
<a target="_blank"" href="Url del link">Nome del link</a>

esempio 3
<a target="_x"" href="Url del link">Nome del link</a>

Scelto il tipo di link che desideriamo utilizzare, dobbiamo sostituire la scritta in rosso con l'indirizzo del link che vogliamo inserire e la scritta verde con il messaggio che vogliamo rendere visibile al lettore sul collegamento da cliccare. L'autocomposizione che usa Blogger, e quella dell'esempio numero uno

Con la speranza di essere stata chiara, auguro a tutti voi che mi leggete una buona vita.

Ti è piaciuto l’articolo? Clicca su OK!


Blogger fai da te by Viviana. R is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Based on a work at bloggerfaidate.blogspot.com.

leggi tutto