Mostrando resultados del 1 al 5 de 5
  1. #1
    Registro
    01-julio-2009
    Ubicación
    Tamaulipas, México
    Edad
    20
    Mensajes
    517
    Hola a todos,

    Después de tanto trastear con unos de mis blogs, resulta algo difícil colocarle un buen titulo ha este tema, ya que por más que lo busque resulta verdaderamente dificultoso localizarlo, y más sacar el código exacto.

    Esto sirve para cambiar la caja/cuadro de descripción que se le agrega un link, un ejemplo sería así:

    Código:
    <a title="ForoBeta" href="http://forobeta.com">ForoBeta</a>
    La diferencia de este cambio, es la siguiente:

    Normal - por defecto:
    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro dando clic aquí

    Nuevo, un mejor estilo:
    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro dando clic aquí

    Comenzamos, primero hay que localizar y abrir el archivo header.php del blog, recomiendo el header para que se cargue inmediatamente el estilo que se le agregara a la etiqueta title, posteriormente colocaremos el siguiente código dentro de las etiquetas <head></head>:

    Código HTML:
    <script type="text/javascript">
    <!--
    // set the namespace
    var XHTMLNS = 'http://www.w3.org/1999/xhtml';
    var CURRENT_NICE_TITLE;
    
    // browser sniff
    var browser = new Browser();
    
    // determine browser and version.
    function Browser()
    	{
    	var ua, s, i;
    
    	this.isIE = false;
    	this.isNS = false;
    	this.version = null;
    
    	ua = navigator.userAgent;
    
    	s = 'MSIE';
    	if ((i = ua.indexOf(s)) >= 0)
    		{
    		this.isIE = true;
    		this.version = parseFloat(ua.substr(i + s.length));
    		return;
    		}
    
    	s = 'Netscape6/';
    	if ((i = ua.indexOf(s)) >= 0)
    		{
    		this.isNS = true;
    		this.version = parseFloat(ua.substr(i + s.length));
    		return;
    		}
    
    	// treat any other 'Gecko' browser as NS 6.1.
    	s = 'Gecko';
    	if ((i = ua.indexOf(s)) >= 0)
    		{
    		this.isNS = true;
    		this.version = 6.1;
    		return;
    		}
    	}
    
    // 2003-11-19 sidesh0w
    // set delay vars to emulate normal hover delay
    var delay;
    var interval = 0.60;
    
    // this function runs on window load
    // it runs through all the links on the page as starts listening for actions
    function makeNiceTitles()
    	{
    	if (!document.createElement || !document.getElementsByTagName) return;
    	if (!document.createElementNS)
    		{
    		document.createElementNS = function(ns, elt)
    			{
    			return document.createElement(elt);
    			}
    		}
    
    	// do regular links
    	if (!document.links)
    		{
    		document.links = document.getElementsByTagName('a');
    		}
    	for (var ti=0; ti<document.links.length; ti++)
    		{
    		var lnk = document.links[ti];
    		if (lnk.title)
    			{
    			lnk.setAttribute('nicetitle', lnk.title);
    			lnk.removeAttribute('title');
    			addEvent(lnk, 'mouseover', showDelay);
    			addEvent(lnk, 'mouseout', hideNiceTitle);
    			addEvent(lnk, 'focus', showDelay);
    			addEvent(lnk, 'blur', hideNiceTitle);
    			}
    		}
    
    	// 2003-03-25 Peter Janes
    	// do ins and del tags
    	var tags = new Array(2);
    	tags[0] = document.getElementsByTagName('ins');
    	tags[1] = document.getElementsByTagName('del');
    	for (var tt=0; tt<tags.length; tt++)
    		{
    		if (tags[tt])
    			{
    			for (var ti=0; ti<tags[tt].length; ti++)
    				{
    				var tag = tags[tt][ti];
    				if (tag.dateTime)
    					{
    					var strDate = tag.dateTime;
    					// HTML/ISO8601 date: yyyy-mm-ddThh:mm:ssTZD (Z, -hh:mm, +hh:mm)
    					var month = strDate.substring(5,7);
    					var day = strDate.substring(8,10);
    					if (month[0] == '0')
    						{
    						month = month[1];
    						}
    					if (day[0] == '0')
    						{
    						day = day[1];
    						}
    					var dtIns = new Date(strDate.substring(0,4), month-1, day, strDate.substring(11,13), strDate.substring(14,16), strDate.substring(17,19));
    					tag.setAttribute('nicetitle', (tt == 0 ? 'Added' : 'Deleted') + ' on ' + dtIns.toString());
    					addEvent(tag, 'mouseover', showDelay);
    					addEvent(tag, 'mouseout', hideNiceTitle);
    					addEvent(tag, 'focus', showDelay);
    					addEvent(tag, 'blur', hideNiceTitle);
    					}
    				}
    			}
    		}
    	}
    
    
    // by Scott Andrew
    // add an eventlistener to browsers that can do it somehow.
    function addEvent(obj, evType, fn)
    	{
    	if (obj.addEventListener)
    		{
    		obj.addEventListener(evType, fn, true);
    		return true;
    		}
    	else if (obj.attachEvent)
    		{
    		var r = obj.attachEvent('on'+evType, fn);
    		return r;
    		}
    	else
    		{
    		return false;
    		}
    	}
    
    
    function findPosition(oLink)
    	{
    	if (oLink.offsetParent)
    		{
    		for (var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent)
    			{
    			posX += oLink.offsetLeft;
    			posY += oLink.offsetTop;
    			}
    		return [posX, posY];
    		}
    	else
    		{
    		return [oLink.x, oLink.y];
    		}
    	}
    
    
    function getParent(el, pTagName)
    	{
    	if (el == null)
    		{
    		return null;
    		}
    	// gecko bug, supposed to be uppercase
    	else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
    		{
    		return el;
    		}
    	else
    		{
    		return getParent(el.parentNode, pTagName);
    		}
    	}
    
    
    // 2003-11-19 sidesh0w
    // trailerpark wrapper function
    function showDelay(e)
    	{
        if (window.event && window.event.srcElement)
    		{
            lnk = window.event.srcElement
    		}
    	else if (e && e.target)
    		{
            lnk = e.target
    		}
        if (!lnk) return;
    
    	// lnk is a textnode or an elementnode that's not ins/del
        if (lnk.nodeType == 3 || (lnk.nodeType == 1 && lnk.tagName.toLowerCase() != 'ins' && lnk.tagName.toLowerCase() != 'del'))
    		{
    		// ascend parents until we hit a link
    		lnk = getParent(lnk, 'a');
    		}
    	
    	delay = setTimeout("showNiceTitle(lnk)", interval * 1000);
    	}
    
    
    // build and show the nice titles
    function showNiceTitle(link)
    	{
        if (CURRENT_NICE_TITLE) hideNiceTitle(CURRENT_NICE_TITLE);
        if (!document.getElementsByTagName) return;
    
        nicetitle = lnk.getAttribute('nicetitle');
        
        var d = document.createElementNS(XHTMLNS, 'div');
        d.className = 'nicetitle';
        tnt = document.createTextNode(nicetitle);
        pat = document.createElementNS(XHTMLNS, 'p');
        pat.className = 'titletext';
        pat.appendChild(tnt);
    
    	// 2003-11-18 Dunstan Orchard
    	// added in accesskey info
    	if (lnk.accessKey)
    		{
            axs = document.createTextNode(' [' + lnk.accessKey + ']');
    		axsk = document.createElementNS(XHTMLNS, 'span');
            axsk.className = 'accesskey';
            axsk.appendChild(axs);
    		pat.appendChild(axsk);
    		}
        d.appendChild(pat);
    
        if (lnk.href)
    		{
            tnd = document.createTextNode(lnk.href);
            pad = document.createElementNS(XHTMLNS, 'p');
            pad.className = 'destination';
            pad.appendChild(tnd);
            d.appendChild(pad);
    		}
        
        STD_WIDTH = 300;
    
    	if (lnk.href)
    		{
            h = lnk.href.length;
    		}
    	else
    		{
    		h = nicetitle.length;
    		}
    	
        if (nicetitle.length)
    		{
    		t = nicetitle.length;
    		}
    	
        h_pixels = h*6;
    	t_pixels = t*10;
        
        if (h_pixels > STD_WIDTH)
    		{
            w = h_pixels;
    		}
    	else if ((STD_WIDTH>t_pixels) && (t_pixels>h_pixels))
    		{
            w = t_pixels;
    		}
    	else if ((STD_WIDTH>t_pixels) && (h_pixels>t_pixels))
    		{
            w = h_pixels;
    		}
    	else
    		{
            w = STD_WIDTH;
    		}
            
        d.style.width = w + 'px';    
    
        mpos = findPosition(lnk);
        mx = mpos[0];
        my = mpos[1];
        
        d.style.left = (mx+15) + 'px';
        d.style.top = (my+35) + 'px';
    
        if (window.innerWidth && ((mx+w) > window.innerWidth))
    		{
            d.style.left = (window.innerWidth - w - 25) + 'px';
    		}
        if (document.body.scrollWidth && ((mx+w) > document.body.scrollWidth))
    		{
            d.style.left = (document.body.scrollWidth - w - 25) + 'px';
    		}
        
        document.getElementsByTagName('body')[0].appendChild(d);
    
        CURRENT_NICE_TITLE = d;
    	}
    
    function hideNiceTitle(e)
    	{
    	// 2003-11-19 sidesh0w
    	// clearTimeout 
    	if (delay) clearTimeout(delay);
    	if (!document.getElementsByTagName) return;
    	if (CURRENT_NICE_TITLE)
    		{
    		document.getElementsByTagName('body')[0].removeChild(CURRENT_NICE_TITLE);
    		CURRENT_NICE_TITLE = null;
    		}
    	}
    
    window.onload = function(e) {
    makeNiceTitles();
    }
    -->
    </script>
    
    <style type="text/css">
    <!--
    div.nicetitle {
    	background-color: #333;
    	color: #fff;
    	font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
    	left: 0;
    	padding: 4px;
    	position: absolute;
    	top: 0;
    	width: 25em;
    	z-index: 20;
    	-moz-border-radius-bottomleft: 10px;
    	-moz-border-radius-bottomright: 10px;
    	-moz-border-radius-topleft: 0;
    	-moz-border-radius-topright: 10px;
    	-moz-opacity: .87;
    	}
    
    div.nicetitle p {
        margin: 0;
    	padding: 0 3px;
    	-moz-opacity: 1;
    }
    
    div.nicetitle p.destination {
        font-size: 9px;
        padding-top: 3px;
    	text-align: left;
    	-moz-opacity: 1;
    }
    
    div.nicetitle p span.accesskey {
    	color: #d17e62;
    }
    -->
    </style>
    Y listo!!!, esto hara que se cargue inmediatamente en el header del blog.

    Por supuesto que hay otra manera de colocarlo, puedes agregar el código que se encuentra adentro de las siguientes etiquetas <style type="text/css"> y </style> en tu archivo .css y borrarlo de ahi, igual con la parte de arriba del script, puedes crear un archivo .js y colocarle todo el código en Javascript de las etiquetas <script type="text/javascript"> y </script>, posteriormente puedes colocar una línea en tu header como la siguiente:

    Código HTML:
    <script type="text/javascript" src="http://tusitioweb.com/dondequieras/nombredelarchivo.js"></script>
    Aunque esto ya sería algo intermedio de realizar, por lo que recomiendo los primeros pasos de arriba.

    Salu2

  2. #2
    Excelente aporte lalo, va Reputación, muchas gracias.

  3. #3
    Registro
    06-abril-2009
    Ubicación
    Mexicali Beach
    Mensajes
    1.283
    Mas bien sería, dar formato a los tooltips de los enlaces. La etiqueta <title> es otra cosa.

    Aquí tienen otra opción con Sweet Titles
    http://www.dustindiaz.com/sweet-titles/
    Última edición por danielmd; 03-oct-2009 a las 20:41

  4. #4
    Registro
    01-julio-2009
    Ubicación
    Tamaulipas, México
    Edad
    20
    Mensajes
    517
    Holasss,

    Gracias, exacto danielmd, recuerdo que era algo relacionado con "Tips", pero veo que es Tooltips.

    Aunque dejame decirte que resulta difícil que alguien que no sepa tanto de estos temas entre a Google y le ponga "Cambiar color de los Tooltips" no crees?.

    Bueno de todas maneras que lo modifique Cristhian, dependiendo como lo vean, pss yo lo busque de otra forma pero era relacionado en "como cambiar el cuadro de texto de los links", hasta que di...

    Salu2

  5. #5
    bueno esto ya lo sabia pero para mucho que estan aprendiendo le servira saludos

Temas similares

  1. Acerca de tíldes en el Title e imágenes
    Hola! Venía hace un tiempo pensando en ambos puntos que menciono en el título de este topic y quería saber qué piensan o qué recomiendan, mejor...
    Respuestas: 0
    Último mensaje: 02-oct-2009
  2. Cambiar color infolinks
    Hola, bueno queria saber si se puede cambiar el color de los links, ya que me aparecen en verde y no me pega mucho... Me gustaria ponerlos azules.
    Respuestas: 4
    Último mensaje: 12-sep-2009
  3. Etiqueta <title> y recomendaciones
    Buenas! No vi el tema adentro de este foro y como los subtítulos no tienen mucho que ver, lo planteo ahora. Si está repetido me avisan porque es algo...
    Respuestas: 8
    Último mensaje: 06-sep-2009
  4. Sobre cambiar el color de letra de mis posts en wordpress
    Sobre cambiar el color de letra de mis posts en wordpress Resulta que llevo dias en los que mi blog al yo hacer un post la letras se ven rojas...
    Respuestas: 10
    Último mensaje: 21-ago-2009
  5. Enlazar una imagen de fondo
    Hola, he diseñado una cabecera de banner y ahora me toca implementarla en código... La cabecera es una sola imagen que tiene el logotipo y luego...
    Respuestas: 2
    Último mensaje: 26-jul-2009

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •