Ho sempre desiderato mettere dei tooltips nei miei posts.
I tooltips sono delle parole alle quali vogliamo associare un’ulteriore spiegazione: passando col il mouse sopra queste parole, si fa comparire un riquadro con la descrizione desiderata.
Naturalmente ho tribolato parecchio perché non mi intendo di Html, ma, testardo come sono, naviga che ti naviga (non con la barca di Briatore-Panariello che fa ombra all’isola d’Elba, ma come fa la sua bella ciccia Vanessa Incontrada), in internet , prova di qua, prova di là, capisci e non capisci, finalmente ce l’ho fatta.
Sono riuscito ad installare nel mio blog i tanto agognati tooltips.
Certo, la vita sa offrire qualcosa di meglio, ma io mi ero intestardito su quelli, e quelli cercavo.
Dunque, ho fatto così.
Ho letto con attenzione
questo sito
e anche quest'altro
Poi, ho copiato il codice Css e Javascript, come questi siti autorizzano a fare, e l’ho depositato provvisoriamente nel Blocco note.
Siccome blogger accetta un linguaggio tutto particolare ho dovuto copia-incollare questo codice dal blocco note nella pagina online
di questo sito
.Ho poi cliccato sul tasto Parse al termine della schermata e ho ottenuto il codice corretto da inserire nel blog.
Sono andato nel mio blog/ bacheca /layout,/ modifica html /ho messo la spunta su espandi i modelli widget,e sono andato alla ricerca della seguente riga
<div class="post-header-line-1"/>
Subito dopo questa riga ho inserito questo codice corretto ottenuto da Parse
<link rel="Bookmark Icon" href="http://www.psacake.com/favicon.ico" />
<link rel="Shortcut Icon" href="http://www.psacake.com/favicon.ico" />
<meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.psacake.com/" r (cz 1 lc 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.psacake.com/" r (n 0 s 0 v 0 l 1))'>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/cake/asp.css" type="text/css" rel="stylesheet" />
<style>
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}
a.info:hover{z-index:25; background-color:#ff0}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}
</style>
A questo punto, sempre nell’html del mio blog sono andato a ricercare
</head>
e nella righe che lo precedono ho inserito questo codice
<style type='text/css'>
@import url ('tooltip.css');
</style>
<script src='tooltip.js'
type='text/javascript'/>
Fatto questo, ho salvato il modello e visualizzato il blog.
All’apparenza sembra che non sia successo niente, ma se provo a creare un nuovo post, sulle parole che desidero si potranno costruire i tooltips.
Ad esempio,voglio inserire la seguente frase:
voglio andare al sito delle ferrovie dello stato così potrò sapere gli orari dei treni per Natale.
Sulla Parola ferrovie dello stato voglio far uscire un tooltip con questa indicazione:(qui si possono ricercare gli orari dei treni italiani)
Ebbene, la frase (qui si possono ricercare gli orari dei treni italiani)
va racchiusa tra span e span
<span>qui si possono ricercare gli orari dei treni italiani</span>
mentre quella che dà origine al tooltip (ferrovie dello stato)va indirizzata così
<a class="info" href="http://www.ferroviedellostato.it/"> ....... </a>
Per una una parola senza url si fa
<a class="info" href="#/">.... </a>
Riassumendo:
voglio andare al sito delle ferrovie dello statoqui si possono ricercare gli orari dei treni italiani così potrò sapere gli orari dei treni per Natale
Su quest'ultima frase dovrebbe uscire il tootip azzurrino.
Sul mio blog funziona, spero anche su quello dell'unico lettore che ha avuto la costanza e la pazienza di seguirmi fin qui.Tanti auguri a lui.
Approva o disapprova questo post
Nessun commento:
Posta un commento