G
gatuso
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
1.- Vamos a Blogger->Plantilla->Edicion HTML
2.- Buscamos la siguiente linea (Ctrol + F)
3.- Justo por encima de </head> pegamos el Plugin JQuery
Nota: Si Tienes instalado un Plugin JQuery omitir el paso 3
4.- Todavia en Edición HTML buscamos la siguiente linea Ctrol + F
5.- Justo por encima de
pegamos el Estilo CSS
6.- Guardamos los cambio implementados en la plantilla
7.- Ahora para agregarlo en nuestras entradas, agregamos el siguiente codigo HTML
8.- Si lo que desean es aplicarle el ToolTip a una imagen:
Anexo un ejemplo de Tooltip:
Nota: Siempre antes de cada cambio. Les recomiendo hacer un respaldo de su blog, para prevenir accidentes. Saludos.
2.- Buscamos la siguiente linea (Ctrol + F)
HTML:
</head>3.- Justo por encima de </head> pegamos el Plugin JQuery
HTML:
<script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip1.js'
type='text/javascript'/> <script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip.js'
type='text/javascript'/>Nota: Si Tienes instalado un Plugin JQuery omitir el paso 3
4.- Todavia en Edición HTML buscamos la siguiente linea Ctrol + F
HTML:
]]></b:skin>5.- Justo por encima de
HTML:
]]></b:skin>
HTML:
.tip { width: 212px; padding-top: 37px; overflow: hidden;
display: none; position: absolute; z-index: 500;
background: transparent
url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top; }
.tipMid { background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png)
repeat-y; padding: 0 25px 20px 25px; } .tipBtm { background: transparent
url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom; height: 32px; }6.- Guardamos los cambio implementados en la plantilla
7.- Ahora para agregarlo en nuestras entradas, agregamos el siguiente codigo HTML
HTML:
<a class="tTip" href="url del enlace" title="Texto del ToolTip">Post</a>8.- Si lo que desean es aplicarle el ToolTip a una imagen:
HTML:
<img class='tTip' title='Texto del ToolTip' src='Url de la Imagen'/>Anexo un ejemplo de Tooltip:
Nota: Siempre antes de cada cambio. Les recomiendo hacer un respaldo de su blog, para prevenir accidentes. Saludos.
