REDAZIONE

Cari MyBlogger,

in questo tutorial vi mostriamo alcuni modi per personalizzare il template dei vostri fotoblog. Partendo da uno dei template a scelta che troviamo nella sezione “Presentazione > Template”, ad esempio:

vogliamo creare un nuovo template come questo:

Vediamo passo dopo passo come fare.
Partiamo effettuando alcune modifiche al Foglio di stile già installato nel Fotoblog.
Dalla sezione “Presentazione > Opzioni avanzate”, clicchiamo sul link “Modifica modello” del Foglio di stile e all’interno della colonna destra della finestra che si è apre scriviamo le righe riportate di seguito.

Per prima cosa vogliamo sostituire lo sfondo con una immagine che sfuma verticalmente da un blu scuro ad un blu chiaro (come questa):

  body {
  background: #002844 url("http://...background.gif") 
  repeat-x top left;
  }
            
  #container {
  background-color: transparent;
  }           

Procediamo modificando la header del Fotoblog, eliminiamo lo sfondo e cambiamo il colore e la posizione del titolo:

  #banner {
  background-color: transparent;
  padding: 10px 0 0 0;
  color: #FFF;
  }
            
  #banner a {
  color: #FFF;
  text-decoration: none;
  }
            
  #banner h1 {
  margin-top: 10px;
  font-size: 255%;
  }
            
  #banner .nav {
  border-bottom: 2px solid #77aee3;
  }
            
  #banner .nav a {
  color: #86FF3F;
  }           

Fatto questo, vogliamo aumentare la distanza tra le anteprime delle foto ed inserirgli attorno una cornice azzurra che al passaggio del mouse si scurisce:

  .sidebar img{
  padding: 0px;
  margin-top: 30px;
  margin-left: 10px;
  border: 5px solid #BBDDFF;
  width:100px;
  }
            
  .sidebar a:hover img{
  border: 5px solid #77aee3;
  }
            
  #foot li.album {
  display: inline;
  padding: 0px;
  margin: 10px;
  }
            
  #foot h2 {
  color: #86FF3F;
  font-size: 155%;
  margin-top: 20px;
  }           

Nei template standard non appaiono i titoli delle foto, ma nel nostro template li vogliamo mostrare sotto ad ogni anteprima, quindi iniziamo a creare lo stile che dovranno avere, poi andremo ad inserirli nel codice HTML.
Vogliamo che i titoli si visualizzino con un testo bianco su uno sfondo nero, quindi:

  .titolo{
  color:#BBDDFF;
  background-color: #000;
  padding:7px;
  margin-left:-110px;
  }           

Per finire, vogliamo inserire in fondo alla pagina una riga di testo in cui diciamo che siamo noi gli autori di questo Fotoblog. Il testo dovrà essere bianco e i link contenuti dovranno essere sottolineati per essere più riconoscibili:

  #footer {
  font-size: 70%;
  color: #FFF;
  }
            
  #footer a{
  color: #FFF;
  text-decoration: underline;
  }           

Salviamo il Foglio di stile e prepariamoci ad effettuare le modifiche all’interno del codice HTML delle pagine. In questo articolo vi mostriamo come modificare la Home Page, quindi clicchiamo sul link “Modifica modello” posizionato a destra di “Modello della homepage”.

Partiamo dalla header. Abbiamo deciso di non mostrare il sottotitolo, quindi lo disattiviamo trasformandolo in commenti HTML.
Per inserire dei commenti in HTML basta inserire i seguenti simboli <!- - e - - > rispettivamente all’inizio e alla fine di quello che si vuole commentare, ad esempio:

  <!- - CONTENUTO DEL COMMENTO - ->           

Quindi, cerchiamo all’interno del codice le seguenti righe e inseriamo nei commenti il sottotitolo come mostrato di seguito:

  <div class="banner-decorator">
  <h1><a href="{$blog.url}">{$blog.title}</a></h1>
  <!-- <h2>{$blog.description|default:"&nbsp;"}</h2> -->
  <span class="nav">&#160;</span>
  </div>           

La Home Page dei template standard mette in primo piano una foto grande. Nel nostro template, invece, vogliamo mettere in risalto soltanto  le anteprime delle ultime foto che abbiamo caricato. Quindi, sempre trasformando il codice in commenti, disattiviamo la foto grande come mostrato di seguito:

  <!—
  <div id="center">
  <div class="center-decorator1">
  <div class="center-decorator2">
  <div class="content">
  {foreach from=$posts item=post}
  <a id="a{$post.id}"></a>
  <h1 class="photoblog"><a href="{$post.post_permalink}">
  <img src="{$blog.url}photos/{$post.photo}" 
  alt="{$post.title|htmlspecialchars}" /></a></h1>
  <h2>
  {date_header date="`$post.pubdate`"}
  {$post.pubdate|date_format:"`$blog.date_format`"} | {$post.title}
  {/date_header}
  </h2>
  <p>{$post.source|trimlonglines:60}</p>
  <p class="posted">
  {post_footer}
  </p>
  <div style="clear: both;">&#160;</div>
  {/foreach}
  </div>
  <div style="clear: both;">&#160;</div>
  </div>
  </div>
  </div>
  -->           

Nel template standard, in Home Page, vengono visualizzate le ultime 6 anteprime, noi invece vogliamo mostrare le anteprime delle ultime 10 foto che abbiamo inserito. Quindi cerchiamo:

  {posts assign="post" lastn="6" type="photo"}           

e sosituiamo il numero 6 con il numero di anteprime che vogliamo visualizzare, in questo caso 10.

 

Come abbiamo detto sopra, quando stavamo creando gli stili in CSS, vogliamo mostrare sotto ad ogni anteprima il titolo della foto. Per inserirlo cerchiamo il seguente codice:

  <li class="album iteration{$post.iteration}">
  <a href="{$post.permalink}">
  <img src="{$blog.url}photos/{$post.thumbnail}" 
  alt="{$post.title|truncate:30:"..."|htmlspecialchars}" 
  title="{$post.title|truncate:30:"..."|htmlspecialchars}" 
  border="0" /></a>        

e subito dopo incolliamo questa riga:

  <font class="titolo">{$post.title}</font></li>           

Per concludere le modifiche nella Home Page, non ci resta che inserire la riga che separa il contenuto del nostro fotoblog con il piè di pagina (o footer) e il testo in cui diciamo di essere gli autori del Fotoblog. Sostituiamo le seguenti righe:

  {if $post.last}</ul>{/if}
  {/posts}
  </div>
  <div class="column2">{sidebar file="sidebar2.htm"}</div>           

Con le seguenti:

  {if $post.last}</ul>{/if}
  {/posts}
  </div>
        
  <hr color="#77aee3" />
  <div id="footer" align="left">Fotoblog creato da 
  <a href="inserisci l'indirizzo web del tuo profilo">
  Tuo Nickname</a>.</div>
            
  <div class="column2">{sidebar file="sidebar2.htm"}</div>           

Salviamo le modifiche e andiamo a vedere la trasformazione che abbiamo effettuato sulla nostra Home Page.

Ora non ci rimane che eliminare lo sfondo marrone che si visualizza ogni volta che andiamo a vedere una fotografia ingrandita.

Per farlo, basta aggiungere nel Foglio di stile questo attributo all'elemento center:

  #center {
  background-color: transparent;
  }           

 

Ora tocca a voi. Non appena avrete modificato il template del vostro Fotoblog, se vi và, segnalatecelo, lo pubblicheremo all’interno del Blog Redazione.

Buon lavoro!

 

 

 

Con il freddo degli ultimi giorni a chi di voi non verrebbe voglia di abbracciare un cucciolo di Husky come quello del foto blog  il mio branco? Conoscete questa fantastica razza di cagnolini dagli occhi blu come il cielo? Il nome di questo cane deriva da quello del popolo del freddo nord, gli Eschimesi, e si diffuse in Alaska, dove subì variazioni passando da Esky, a Eskimo, fino a diventare quello che tutti noi adesso conosciamo: Husky... Per conoscere Ice e gli altri cuccioli, non vi resta che fare un salto su il mio branco :-)

 

Eccola, Laura, che con le sue manine fatate crea veri capolavori, dea del riciclo e dell’uncinetto, nei suoi blog ci delizia con creazioni artigianali originalissime!
Laura è un vulcano di idee carine, sui suoi blog puoi trovare  semplici tutorial per fare da soli ad esempio delle calde sciarpe di lana morbida morbida (e con questo freddo…direi che ce n’è un gran bisogno) oppure dei guanti originali … se amate le sue creazioni ma non avetre la pazienza di cimentarvi anche voi nell’impresa… perchè non fare un salto sul suo fotoblog?

Di sicuro potrete trovare qualche idea carina per fare dei regalini alle vostre amiche :-) Ma Laura è davvero una ragazza speciale, che unisce alla passione del “hand made” una grande sensibilità.

Sul Blog redazione ci ha segnalato un’iniziativa di cui è promotrice:
 “Le farfalle si sono messe in testa di far volare le tartarughe”
Un’iniziativa che nasce con lo scopo di far conoscere l’associazione Sindrome di Crisponi e Malattie rare (associazione impegnata nello studio e ricerca relative alle difficoltà pedagogiche e comunicative che nascono tra medico e paziente) a tutti gli amici blogger! Per partecipare basta inviare un disegno, una foto, una poesia, una frase, una creazione, una favola, un saluto sul tema della farfalla e della tartaruga, sulle malattie rare o la disabilità.
I lavori più belli saranno raccolti nel calendario 2010 dell’associazione!
Basta andare sul Fotoblog dedicato per conoscere il regolamento e partecipare all’iniziativa!

Windsurf  windsurf veleggia e và, cantava qualche anno fa il mitico Lucio Battisti in una canzone che non tutti ricorderanno… ( ma noi di MyBlog ve la riproponiamo in un video amatoriale qui sotto )
Avete mai provato  l'emozione di volare sul mare sentendovi in armonia con gli elementi, sentendovi un tutt'uno col vento e l'acqua? Guardando il Fotoblog mauiaddicted capirete di certo a cosa mi riferisco…

Ecco un' immagine davvero suggestiva proposta dal FotoBlog La forza della natura.
La foto raffigura una delle esperienze più straordinarie che possono capitare se ci si trova in Islanda, qui la potenza della natura si fonde appieno con la bellezza dei paesaggi regalandoci emozioni uniche chiamate geyser.
I geyser sono manifestazioni vulcaniche capaci di alzare colonne d’acqua calda ad intervalli regolari, creando spettacoli di grande attrazione proprio come si può vedere in questa fotografia!
Se siete curiosi sul FotoBlog potete ammirare la fotogallery completa!