Come ti personalizzo il blog (2.a)

Su richiesta di Fotografia Profesional ho ri-modificato il widget delle etichette in modo da poter essere utilizzato su qualsiasi blog (ovviamente su blogger) senza intervenire sul codice.

Eccovi la versione definitiva:

<b:widget id='Label1' locked='false' title='Argomenti' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
   <SELECT class='sidebar_select' name='select_etichette' onChange='document.location.replace(this.value);'>
   <!-- if cond='data:blog.homepageUrl != data:blog.url' ->  cond='data:blog.url == "http://tommity.blogspot.com"' -->
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
      <OPTION selected='selected' style='font-weight:bold;' expr:value='data:blog.homepageUrl'>Tutto</OPTION>
<b:else/>
<OPTION expr:value='data:blog.homepageUrl'>Tutto</OPTION>
</b:if>
    <b:loop values='data:labels' var='label'>
     <b:if cond='data:blog.url == data:label.url'> 
      <OPTION expr:value='data:label.url' selected='selected' style='font-weight:bold;'><data:label.name/> (<data:label.count/>)</OPTION>
     <b:else/>
      <OPTION expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</OPTION>
     </b:if>
    </b:loop>
    </SELECT>
 
  <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Sempre su sua richiesta ho anche trasformato l'elenco puntato dei link in un comodo menù a discesa!

<b:widget id='LinkList2' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <select name='links_menu' onChange='if(this.value) window.open(this.value);' class='sidebar_select' style='width: 90%;'>
   <option value='' style='font-weight:bold;' selected='selected'>Links</option>
     <b:loop values='data:links' var='link'>
       <option expr:value='data:link.target'><data:link.name/></option>
     </b:loop>
   </select>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

Un saluto a tutti,
Andrea

Mostrare una nota al passaggio del mouse

Dopo aver implementato il "doppio-click seleziona tutto", mi sono accorto che sarebbe stato opportuno segnalare questa comodità al 'potenziale' visitatore!

Ho pensato quindi che sarebbe stato comodo mostrare una nota a fianco al cursore del mouse quando questo fosse stato sopra del codice!

Questa l'idea, il problema era realizzarla vista la mia scarsa conoscenza dei layer di html...
Ma gira che ti rigira, ho capito che avrei potuto fare a meno di questi famigerati layer, anzi con l'inimitabile tag <div> e qualche riga di javascript, avrei ottenuto il risultato desiderato! C'è da dire che anche i CSS hanno fatto la loro parte!
Ecco come ho risolto!

All'interno del post ho inserito un tag <div> "invisibile":

<div id="myLayer" style="
position: absolute; z-index: 1;
-moz-opacity:0.4; filter:alpha(opacity=40);
border: 0px none #000000; font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333; width: 120px; height: 39px;
background: no-repeat url(background_url); visibility: hidden;
padding: 1px 0px 0px 0px;">

Testo da mostrare nella nota
</div>

L'invisibilità si ottiene impostando l'omonima proprietà visibility dell'attributo style su hidden. Grazie alle proprietà -moz-opacity e filter: alpha(opacity = ...) si può impostare il valore di trasparenza del tag <div>, la prima serve per firefox, la seconda per internet explorer... Altra proprietà molto importante per il mio scopo è position, che impostato a absolute, permette di posizionare il tag secondo coordinate assolute riferite ai bordi alla pagina. Le coordinate, e quindi la posizione, si definiscono tramite le proprietà left e top che permettono di impostare la distanza dal bordo sinistro e da quello superiore della pagina.

Per la parte dinamica mi sono affidato a javascript, impostando tramite gli attributi onMouseOver e onMouseOut la modifica della visibilità del tag <div>:

function M_Out(){
 document.getElementById("myLayer").style.visibility = "hidden";
}

function M_Over() {
 document.getElementById("myLayer").innerHTML = "<center><b>Doppio Click per<br>selezionare tutto!</b></center>";
 document.getElementById("myLayer").style.visibility = "visible";
}

Per lo spostamento della nota legato al movimento del cursore del mouse ho utilizzato l'attributo onMouseMove:

onMouseMove = 
'document.getElementById("myLayer").style.left=event.clientX+window.pageXOffset+10+"px"; 
document.getElementById("myLayer").style.top=event.clientY+window.pageYOffset+10+"px";'

impostando dinamicamente i valori delle proprietà top e left.

Il risultato lo potete ammirare passando il mouse sopra al codice!

Spero vi possa tornare utile!
Ciao,
Andrea

Selezionare tutto il 'codice' con doppio click

Selezionare contenuto di un tag con doppio click

Oggi, cercando di migliorare ancora la grafica e la funzionalità del blog, mi sono imbattuto nella ricerca di uno script che permettesse di selezionare tutto il testo contenuto all'interno di un tag Html.

La mia idea era fare in modo che con un doppio click sul testo del codice questo venisse selezionato tutto!

Dopo un po' di ricerche mi sono imbatutto in questa pagina: http://4umi.com/web/javascript/select.htm.
Lo è stato script realizzato da Yann-Erwan Perio e permette di selezionare tutto il contenuto di un tag passandogli il relativo id!

Quindi sono passato subito all'implementazione nel blog!
Per prima cosa ho copiato lo script e importato all'interno del template di blogger, subito dopo il tag <body>:

<script src='link_to_script.js' type='text/javascript'/>
</script>

Sfruttando l'evento ondblclick del tag <pre> invoco la funzione:

<pre ondblclick = "Utils.Selection.clear(); Utils.Selection.add( Utils.Ranges.selectNode(Utils.DOM.getElementWithId(this.id) ));" id="pre_01">

   /*  ---  CODICE  ---  */

</pre>

Doppio click sul 'codice'... funziona!
Provare per credere!

Ciao,
Andrea

Come ti personalizzo il blog (2)...

Creare menù a discesa per etichette post

E per la serie come personalizzare il blog, ho modificato il widget delle etichette per far sì che creasse un semplice menù a discesa riepilogativo, evitando che la sidebar assumesse dimensioni proibitive!

Questo è il codice:

<b:widget id='Label1' locked='false' title='Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select class='sidebar_select' name='select_etichette' onChange='document.location.replace(this.value);'>
<b:if cond='data:blog.url == "http://tommity.blogspot.com"'>
 <option selected='selected' value='http://tommity.blogspot.com'>Tutto</option>
<b:else/>
<option value='http://tommity.blogspot.com'>Tutto</option>
</b:if>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
 <option expr:value='data:label.url' selected='selected'><data:label.name/> (<data:label.count/>)</option>
<b:else/>
 <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:if>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sfruttando i tag <b:if> e <b:loop> costruisco un menu a tendina, usando il tag html <select>.
La sintassi del tag <select> è molto semplice, gli attributi degni di nota sono: class che permette di applicare uno stile css e onChange che permette di eseguire un comando ogni volta che viene selezionata una voce diversa dal menù a discesa. Il comando che viene eseguito è scritto in javascript ed è: document.location.replace(this.value), questo permette di reindirizzare il browser verso il link riportato nell'attributo value dei tag <option>.

I due <b:if> permettono di evidenziare la voce selezionata dopo che è stata ricaricata la pagina, grazie all'aggiunta dell'attributo selected="selected" nel tag <option>.

Il <b:loop> esegue un ciclo sulle etichette utilizzate nel blog, permette di elencarle e quindi di compilare il menù a tendina.

La guida ufficiale per i comandi widget la trovate qui, mentre l'elenco delle variabili che si possono utilizzare all'interno dei widget lo trovate qui.

Tornando all'attributo class del tag <select> per poter personalizzare l'aspetto del menù, si deve aggiungere all'interno dei tag <style> una classe ad hoc, tipo questa:

.sidebar_select{
background-color: #EEEEEE;
color: #6699CC;
font: 11px Verdana;
}

Questo è quanto, il risultato è visibile qui accanto! ——>
Spero possa esservi utile,
ciao!
Andrea

Come ti personalizzo il blog...

Modificare l'header del blog

Con l'aiuto del mio amico Andy sono riuscito a modificare un po' il layout di blogger!

Qui vi spiego quel che abbiamo fatto, o meglio cosa mi ha detto di fare! ;)

Il tutto è iniziato quando cercando di modificare l'header della pagina, non riuscivo a togliere il titolo del blog che quindi rimaneva sopra all'immagine che avevo preparato.

Allora in attesa del laboratorio di Complementi, ho chiesto aiuto ad Andy che mi ha subito indicato un paio di trucchetti per personalizzare a fondo l'header.

Innanzitutto bisogna andare in: Modello -> Modifica HTML, flaggare l'opzione "Espandi i modelli widget" e cercare il tag: <id='header-wrapper'>.

Dovreste trovare queste linee di codice:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='' type='HTML'>
</b:widget></b:section></div>

Basta modificarle così:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
</b:widget></b:section></div>

per poter aggiungere e rimuovere elementi tipo Header!
Infatti l'attributo locked impostato su false permette di sbloccarlo, maxwidgets indica il numero massimo di elementi che possono essere inseriti e showaddelement visualizza il link per aggiungere elementi nella pagina: Modello -> Elementi Pagina!

Semplice no? ma io non ci ero arrivato.. :(

Vabbè... un sentito ringraziamento ad Andy, alla prossima
Andrea