CosasParaMiBlogs

jueves, 2 de febrero de 2012

Originales mensajes emergentes para imágenes con CSS. – Lawyers

Los sajones llamantooltips a esos mensajitos que salen cuando pasamos el puntero por encima de un elemento y que nos muestran algún tipo de información, normalmente un texto.

Wikipedia que en esto de definir es bastante mejor que yo, dice que...

Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual,
que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

Así que si os parece, nos quedamos con eso de descripción emergente, que es por ejemplo lo que nos sale cuando pasamos por encima de una imagen contitle (oalt). En la lechuza de la derecha podéis ver un ejemplo.

Y una vez visto el ejemplo normal a ver que tal os parece este otro que he visto enTympanus:

Bueno ¿verdad? Pues aquí no hay ninguna otra cosa más que CSS. En la página antes enlazada de Tympanus podéis una versión más extendida del código que incluye las imágenes mediante unsprite, pero por aportar algo, a continuación una versión más reducida con imágenes individuales.

Se necesita todo el código para conseguir este efecto pero lo voy poniendo por trozos para explicar un poco qué hace cada parte.

La parte HTML sería una lista de imágenes con enlace, a la cual añadimos un texto -el que se verá después en la descripción emergente- encerrado en unspan.

ul class="tt-wrapper"
lia href="URL_ENLACE1"img src="IMAGEN1" /spanTEXTO1/span/a/li
lia href="URL_ENLACE2"img src="IMAGEN2" /spanTEXTO2/span/a/li
lia href="URL_ENLACE3"img src="IMAGEN3" /spanTEXTO3/span/a/li
lia href="URL_IMAGEN4"img src="IMAGEN4" /spanTEXTO4/span/a/li
/ul

Claro, así a pelo esto nos mostrará sólo una simple lista de imágenes y texto, por lo que empezamos con dar algo de forma a la lista eliminando las viñetas, dándole un tamaño para poderla posicionar bien y ajustando márgenes ypadding. El ancho será el que ocupen todas las imágenes que vamos a poner más sus márgenes. El margen superior de 80px es porque necesitamos espacio por arriba para que los mensajes se muestren sin solapar otros textos o imágenes de alrededor:

ul.tt-wrapper {
list-style:none;
padding: 0;
width: 248px;
height: 70px;
margin: 80px auto 0 auto;
}

Como vamos a usar imágenes, para que queden todas en línea, a cada elemento de la lista lo hacemos flotar. Luego al enlace le damos el tamaño de cada imagen y un pequeño margen para que no aparezcan todas pegadas. Añadimos un posicionamiento relativo para luego poder ubicar dentro de esta capa la del mensaje.

ul.tt-wrapper li{
float: left;
}
ul.tt-wrapper li a{
display: block;
width: 58px;
height: 58px;
margin: 0 2px;
outline: none;
position: relative;
}

Y ahora empieza lo bueno. Damos el estilo al texto mediante el span que lo rodea: ancho, altura, tipografía, sombras, etc. De aquí destacar el posicionamiento al 50% con respecto a la izquierda que se corrige para centrar el texto con unmargin-left negativo.

Para que el texto no se solape con la imagen y conseguir luego el efecto de que baje suavemente, lo ubicamos 100px por encima. Importante también para la "aparición", la opacidad cero que en un principio hace invisible el texto.

La última parte es la que se ocupará de gestionar una transición suave desde la transparencia y la posición elevada del span hasta la opacidad casi total y su ubicación justo por encima de las imágenes. Como siempre, debería bastar con usar la última propiedad (transition), pero hemos incluido los kits de compatibiidad de varios navegadores para que funcione bien en todos ellos. Si alguien está pensando en ver esto en IE que se olvide, por cierto.

ul.tt-wrapper li a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
font-family: Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.3);
border-radius: 5px;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: -70px;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Lo tenemos casi todo listo, pero antes de aplicar la última propiedad que nos permitirá ver todo esto al pasar el puntero por encima, añadimos un triángulo gris (rgba negro con opacidad 10%) para que el texto parezca un bocadillo de cómic. Lo creamos con un truco que genera una capa de tamaño cero con grandes bordes. La transparencia de algunas orientaciones terminan de conseguir esa forma y una vez más, lo posicionamos. También lo centramos con 50% ymargin, pero en esta ocasión, algo más abajo que el texto (bottom negativo).

ul.tt-wrapper li a span:before,
ul.tt-wrapper li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}

Lo siguiente es un detallito estético que crea un nuevo triángulo blanco solapado sobre el anterior (gris). Al ponerlo 1px más arriba, deja ver parte del gris -1px precisamente- y así simula ser el borde del triángulo.

ul.tt-wrapper li a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #fff;
}

Y ahora sí terminamos. Alhover del enlace le añadimos una opacidad casi total (0.9) y cuando pasemos el puntero se verá nuestro fantásticotooltip.

ul.tt-wrapper li a:hover span{
opacity: 0.9;
bottom: 70px;
}

En la web de Tympanus haycuatro demos que incluyen este y otros tres efectos más, hechos con la misma técnica.

Y por si a alguien le interesa, los iconos para la demostración los obtuve deMás que dibujitos, desde dónde podéis descargaros un paquete completo con iconos del mismo tipo en formato vector.

integrated ehr Mobile casino domains yahoo Online Criminal Justice Degree cheap domain registration hosting AUTO ACCIDENT ATTORNEY saskatchewan auto insurance Social media examiner Psychic for free Social media campaigns Live casino houston mesothelioma attorney mesothelioma drug HOLLAND MICHIGAN COLLEGE Social media platforms student loan consolidation program Online casino Make money online Australia LOW CREDIT LINE CREDIT CARDS Casino earthlink business internet Motor Insurance Quotes mesothelioma personal injury lawyers Holland Michigan College VIRTUAL DATA ROOMS Car Insurance Quotes Utah motorcycle lawyer los angeles DUI lawyer Mortgage Adviser Psychic for Free most profitable internet business structured settlement buyers personal injury attorney springfield mo Dwi lawyer Html email Donate Car for Tax Credit Auto Accident Attorney mesothelioma lawsuits Car Insurance Quotes PA CAR INSURANCE QUOTES MN Business finance group FUTURISTIC ARCHITECTURE ROYALTY FREE IMAGES STOCK Social media tools MET AUTO Cheap Domain Registration Hosting Business management software mesothelioma lawsuit Donate Car to Charity California compare life assurance WordPress hosting Online Stock Trading Hire php developer Casino reviews miami personal injury lawyer mesothelioma claims ONLINE COLLEDGES small business administration sba Donate Your Car for Kids Criminal defense lawyer mesothelioma attorney directory Best Seo company Custom WordPress theme designer CAR INSURANCE QUOTES COLORADO mesothelioma law suits Hire php developers uk homeowner loans Best social media platforms Social media platforms for business Donate Car To Charity CALIFORNIA CHEAP CAR INSURANCE FOR LADIES Hire php programmers Hard drive Data Recovery Services paperport promotional code online criminal justice degree Cheap car insurance in Virginia Criminal lawyer structured settlements annuities buy gift card Service business software LIFE INSURANCE CO LINCOLN PSYCHIC FOR FREE Online Christmas cards Photo Christmas cards mesothelioma law firm Christmas cards WebEx costs Online Classes Car Insurance Quotes Colorado Php programmers for hire Bankruptcy lawyer Nunavut Culture event management security DONATE YOUR CAR FOR MONEY Learning adobe illustrator Computer science classes online Php programmers Seo companies business email web hosting motorcycle accident lawyer california what is structured settlement Best social media platforms for business New social media platforms Donating a Car in Maryland Structures Annuity Settlement Seo services Asbestos Lung Cancer Home Phone Internet Bundle Personal Injury Law Firm sell structured settlement calculator mesotheliama mortgage adviser michigan motorcycle accident lawyer Mortgage adviser Met Auto Car insurance quotes Colorado wisconsin mesothelioma attorney fast cash for house Seo company HOME PHONE INTERNET BUNDLE Donate a Car in Maryland Custom Christmas cards lawsuit mesothelioma CAR ACCIDENT LAWYERS Car Insurance Quotes MN WordPress themes for designers Webex Costs Psd to WordPress HARDDRIVE DATA RECOVERY SERVICES Attorney Social media management SELL ANNUITY PAYMENT auto accident lawyer san francisco Tech school Psd to html donate old cars to charity asbestos lung cancer federal criminal defense attorney Car insurance in South Dakota mesothelioma attorney assistance AUTOMOBILE ACCIDENT ATTORNEY Proud Italian cook harddrive data recovery services virtual data rooms Adobe illustrator classes domain yahoo Italian cooking school WordPress theme designers Sell Annuity Payment mesothelioma lawyer asbestos cancer lawsuit Better Conference Calls Social media strategies Health Records Personal Health Record Donate cars Illinois seattle mesothelioma lawyer Criminal lawyer Miami Mesothelioma Law Firm Online Colleges personal injury attorney torrance accident attorney san bernardino mesothelioma symptoms Car Donate Paperport promotional code Data Recovery Raid refinance with poor credit dui lawyer scottsdale mesothelioma information chicago hair laser removal Donate Cars in MA asbestos mesothelioma lawsuit Donate Your Car Sacramento How to Donate A Car in California DONATE CARS IN MA Donate your car Sacramento peritoneal mesothelioma Asbestos Lawyers DONATE CARS ILLINOIS auto accident attorney CHEAP DOMAIN REGISTRATION HOSTING DONATING A CAR IN MARYLAND domain registration yahoo Annuity Settlements Personal Injury Lawyers auto accident attorney Torrance Dayton Freight Lines mesothelioma attorneys motorcycle accident attorney sacramento best consolidation loan student car insurance quotes mn Motor Replacements structured settlement brokers Online College Course auto insurance yuba city ca Donate Cars Illinois Criminal Defense Attorneys Florida arizona auto accident attorney PHD on Counseling Education Best Criminal Lawyers in Arizona how to donate a car in california Dallas Mesothelioma Attorneys Online motor insurance quotes los angeles auto accident attorneys Life Insurance Co Lincoln Business VOIP Solutions workers compensation lawyer los angeles Online Motor Insurance Quotes Paperport Promotional Code World Trade Center Footage Massage School Dallas Texas Donate Old Cars to Charity

miércoles, 1 de febrero de 2012

Blogger

Guía: Condiciones Blogger según tipo de página. Combinadas – School – Teleconferencias – cancer

En anterior entrada vimos cómo hacer todas lascondiciones simples que Blogger nos permite para poderdiferenciar contenidos según el tipo de página en el que estemos, pero si queremos distinguir más casos, ya no nos queda más remedio que empezar a combinar condiciones. Todas las combinaciones serían demasiadas, así que tras las nociones básicas relacionaré sólo las que creo más comunes y el resto ya son cosa de vuestra capacidad lógica ;)

Como pista, cuando queramos hacer un OR (estoo aquello), normalmente servirá con hacer dos condiciones sucesivas una para cada cosa, siempre que no se solapen en tipo de páginas. Esto ocurre por ejemplo con lasIndex y elHome, que tienen en común precisamente esta última. Por el contrario, cuando queramos simular un AND (estoy aquello), por lo general tendremos que meter condiciones una dentro de otra, de manera que si se cumple una y la anidada, se darán por cumplidas ambas.

Situación en la que algo se podrá ver en algo sólo enpáginas de navegación y de archivo, pero no en la de Inicio.

Index yArchive son excluyentes por lo que tenemos que hacer dos comprobaciones seguidas.

Primero vemos si la página es del tipo Archive y en caso afirmativo, ejecutamos por ahí. En la siguiente condición no se llegará a entrar porque Archive != Index.
Por el contrario, si no es Archive entraremos en la segunda condición y si es tipo Index se hace una tercera para verificar que NO estamos en Inicio (Home), que también es del tipo Index. Sólo en ese caso mostramos.
En todos los demás casos, páginas estáticas o post individuales (Item), tampoco se muestra nada porque no entramos en el cumplimiento de ninguna de las dos condiciones.

b:if cond='data:blog.pageType == &quot;archive&quot;'
   !-- Estamos en una página tipo Archive --
   Mostramos por ser página Archive
/b:if

b:if cond='data:blog.pageType == &quot;index&quot;'
  !-- Estamos en una página tipo Index --
  b:if cond='data:blog.url != data:blog.homepageUrl'
    Mostramos por ser página Index pero no Home
  /b:if
/b:if

¿Y si queremos que algo se vea precisamente enentradas individuales y páginas estáticas pero no en todas las demás? Pues ya no bastaría con poner el signo del operador contrario, porque el anidamiento de condiciones daría un resultado indeseado. Como ambos tipos no están solapados como ocurría en el tipo Index que incluíaHome, más fácil sería en este caso comprobar las dos cosas por separado.

b:if cond='data:blog.pageType != &quot;static_page&quot;'
   !-- Estamos en una página estática --
   Mostramos por ser página estática
/b:if

b:if cond='data:blog.pageType == &quot;item&quot;'
  !-- Estamos en una entrada individual --
  Mostramos por ser una entrada
/b:if

El uso deelse que permite anidar condiciones también nos puede ser práctico. Es una segunda oportunidad de seguir comprobando cosas dentro de una misma condicion, cuando no se cumple la primera opción.

Mostrarun contenido en Home y otro distinto en las páginas Index (distintas de Home), Archivo y Estáticas:

b:if cond='data:blog.url == data:blog.homepageUrl'
  Se ejecuta sólo en Home
b:else/
  b:if cond='data:blog.pageType == &quot;index&quot;'
    Se ejecuta sólo en páginas Index (y Estáticas)  
  /b:if/
  b:if cond='data:blog.pageType == &quot;static_page&quot;'
    Se ejecuta sólo en páginas Estáticas (e Index)  
  /b:if/
/b:if/

Obsérvese que las páginas individuales (item) no entrarían por ninguna de las condiciones, tal y como nos proponíamos en el enunciado.

Y para terminar, no con todas las combinaciones pero sí con un anidamiento que nos permitirá discriminartodos los casos uno por uno. Ahí va eso:

b:if cond='data:blog.pageType == &quot;index&quot;'
  b:if cond='data:blog.url == data:blog.homepageUrl'
    Se ejecuta sólo en Home
  b:else/
    Se ejecuta sólo en Etiquetas/Recientes/Antiguas
  /b:if
b:else/
  b:if cond='data:blog.pageType == &quot;static_page&quot;'
    Se ejecuta sólo en páginas Estáticas
  b:else/
    b:if cond='data:blog.pageType == &quot;archive&quot;'
      Se ejecuta sólo en páginas de Archivo  
    b:else/
      Se ejecuta sólo en posts individuales
    /b:if
  /b:if
/b:if

martes, 31 de enero de 2012

Blogger

¿Solucionados todos los problemas con los nuevos comentarios? – Settlement – Automovil

Mi respuesta es sí, pero por experiencia, es posible que no todos puedan decir lo mismo.

Hoy he descubierto que sin ninguno delos trucos que enlazamos o explicamos anteriormente, el incómodosalto hasta el formulario de comentarios al acceder a entradas con comentarios con Firefox, ya no sucede.

Por otra parte, he vuelto a instalar scriptaculous y el famoso error con el enlaceResponder, tampoco se manifiesta. Sobre esto, un servidor ha cargado esa librería con este método, pero no sé si con otro cargador pasará lo mismo. Podéis probar con este si os sigue dando problemas:

script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js' type='text/javascript'/
script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js' type='text/javascript'/

Como quiera que Blogger también actualizó por su cuenta el también conocidodefer que ocasionabala página en blanco con Internet Explorer, ya sólo nos queda el tema de los gadgets de Twitter. Pero eso también parece solucionado.

Como prueba, a continuación un gadget y una demo de scriptaculous. Si podéis comentar ya no hay más que hablar y podéis revertir los cambios que hicisteis paraestos problemas.

Quedamos pendientes de encontrar una manera fácil de cambiar el nuevo avatar para comentarios anónimos que también nos han metido... de paso.

Usando Scriptaculous

Un ejemplo con BLIND	Un ejemplo con APPEAR

Usando gadgets Twitter

Blogger

Guía: Condiciones Blogger según tipo de página. Simples – Dominios

Este es un recordatorio-guía sobre las distintascondiciones que podemos manejar en Blogger y que nos sirven paramostrar o ejecutar ciertas cosas, justo en el tipo de página que queremos y no en otras.

Anteriormente ya vimos una pequeña explicación sobrequé era esto de las condiciones y sobre cómo usarlas, pero como desde entonces ha llovido mucho, observo que es una pregunta habitual y sobre todo, entonces fui algo más desordenado, pues allá vamos.

Las páginas Blogger (esto no se aplica en otras plataformas) también manejan las direcciones de las páginas y sus distintos tipos con etiquetasdata. Este sería elcatálogo:

data:blog.homepageUrl ► Dirección de la página Inicio
Ejemplo: http://www.oloblogger.com
data:blog.pageType ► Tipo de página

index → Home, páginas de etiquetas y recientes/antiguas
Ejemplo: http://www.oloblogger.com/search/label/BPT
archive → Navegación a través del gadget Archivo
Ejemplo: http://www.oloblogger.com/search?updated-min=2011-01-01T00...
static_page → Página estática
Ejemplo: http://www.oloblogger.com/p/contacto.html
item → Una entrada individual
Ejemplo: http://www.oloblogger.com/2010/02/otra-pantalla-de-presentacion-facil.html

Otra variable que nos va a hacer falta para montar las condiciones esdata:post.url, que nos remite a la dirección de la página dónde estamos actualmente.

Bien, ya tenemos todo lo necesario para empezar a condicionar cosas. Lo importante es entender la estructura porque a medida que avancemos la cosa se complica. Blogger no permite poner cosas del tipo "Si es este tipo de página y no este", ni ninguna otra combinación tipo AND/OR, así que hay que ir usando nuestra propia lógica para anidara las condiciones.

Una condición básica sería de la forma:

b:if cond='data:post.dateHeader'
Ejecuta lo que hay entre los dos if si la fecha del post existe
/b:if

Pero para lo que nos ocupa -discriminar el tipo de página- necesitaremos hacer una comparación para ver si se cumple la igualdad y no sólo comprobar si un valor existe o no:

b:if cond='data:post.dateHeader == "17/02/2010"'
Ejecuta lo que hay aquí si la fecha del post es igual a 17/02/2010.
/b:if

Hay dos tipos de operadores para comparar,== cuyo significado es evidente y!=, que quiere decir "no es igual". Por causa de que Blogger nos exige una redacción de código muy estricta, los valores a comparar y el operador deben ir entre comillas simples (') y si uno de los dos valores no es una etiquetadata sino una cadena de caracteres normal (caso de una fecha, caso de una dirección), ese valor literal debe ser escrito entre" en sustitución de lo que normalmente serían comillas dobles.

Con todo esto ya podemos discriminar las cosas que sí queremosque se vean sólo en el Home y no en otras páginas:

b:if cond='data:blog.url == data:blog.homepageUrl'
Ejecuta lo que hay aquí si la dirección de la página en la que estamos coincide con la dirección pricipal del blog.
/b:if

Por el contrario si queremos que algo se ejecuteen todos los tipos de página excepto en la de inicio, tendríamos que usar!=:

b:if cond='data:blog.url != data:blog.homepageUrl'
Ejecuta lo que hay aquí sólo cuando la dirección de la página en la que estamos NO es la dirección pricipal del blog.
/b:if

A partir de aquí obviaré que todas las expresiones con== tienen su contraria con!= para no ser demasiado exhaustivo.

Para distinguiruna entrada en concreto usaríamos este mismo tipo de expresión:

b:if cond='data:blog.url == "http://www.oloblogger.com/2010/02/codificacion-facil.html"'
Ejecuta lo que hay aquí únicamente cuando la dirección de la página coincide con la expresada a la derecha.
/b:if

Seguimos con los casos fáciles. Ver algo sólo cuando estamosen una entrada individual cualquiera.

b:if cond='data:blog.pageType == "item"'
Ejecuta lo que hay aquí únicamente cuando la dirección de la página coincide con la de una entrada.
/b:if

Ver algo sólo cuando estamos en unapágina correspondiente a un elemento del gadget Archivo.

b:if cond='data:blog.pageType == "archive"'
Ejecuta lo que hay aquí si hemos accedido al sistema de navegación desde el Archivo.
/b:if

Con laspáginas estáticas lo más habitual es que queramos ocultar algo, así que en este caso el ejemplo va en negativo, aunque obviamente podría hacerse a la inversa.

b:if cond='data:blog.pageType != "static_page"'
Ejecuta lo que hay aquí siempre que NO estemos en una página estática.
/b:if

Ver algoen Inicio, páginas de etiquetas y páginas recientes/antiguas. Recordamos que estas tres se agrupan en el tipoIndex.

b:if cond='data:blog.pageType == "index"'
Ejecuta lo que hay aquí cuando la dirección de la página corresponde al Home o a una página de navegación.
/b:if

Ver también:
Guía: Condiciones Blogger según tipo de página. Combinadas

asbestos exposure lawyers structured settlements companies CAR INSURANCE QUOTES COLORADO Business finance group adverse credit remortgage Hire php developer ONLINECLASSES Live casino Best social media platforms for business home phone internet bundle donate your car for kids selling annuity payments for cash Dallas mesothelioma attorneys Online casino student loan consolidation program Casino mesothelioma attorneys Auto Mobile Shipping Quote Car Donate Social media campaigns Paperport Promotional Code anti spam appliance Car Insurance Quotes Colorado selling annuity primary pulmonary hypertension DONATE YOUR CAR FOR MONEY Mobile casino Custom WordPress theme designer criminal defense attorneys florida Psd to html car insurance quotes injury attorney baton rouge HOLLAND MICHIGAN COLLEGE asterisk call center software miami personal injury lawyer Online Criminal Justice Degree DONATE OLD CARS TO CHARITY ANNUITY SETTLEMENT futuristic architecture Make money online Australia data recovery raid sell structured settlement calculator car insurance quotes colorado Casino reviews Sell Annuity Payment DUI lawyer yahoo web hosting Forensics Online Course Massage School Dallas Texas DONATE YOUR CAR FOR KIDS auto accident attorney Torrance Donate Cars in MA mesothelioma claims Donate Your Car Sacramento Better Conference Calls Virtual Data Rooms WordPress themes for designers motor replacements DAYTON FREIGHT LINES Attorney car insurance quotes pa benchmark lending Php programmers Hire php developers Best social media platforms Social media strategies WordPress hosting Hire php programmers Car Insurance Quotes Online Colleges Dwi lawyer dallas mesothelioma lawyer Cheap Car Insurance in Virginia illinois mesothelioma lawyer Photo Christmas cards better conferencing calls asbestos mesothelioma lawsuit how to donate a car in california Home phone internet bundle Donate Old Cars to Charity Criminal lawyer PhD in counseling education CAR ACCIDENT LAWYERS personal injury lawyer sarasota fl Health Records Personal Health Record structured settlement agreement Php programmers for hire selling a structured settlement LOW CREDIT LINE CREDIT CARDS Service business software Criminal defense lawyer Psd to WordPress mesothelioma suit chicago hair laser removal truck accident attorney los angeles Low Credit Line Credit Cards Business VOIP Solutions structured settlement sell Bankruptcy lawyer Social media platforms Computer science classes online washington mesothelioma attorney Personal Injury Lawyer Donate your car Sacramento accident attorney san bernardino Car Insurance Quotes MN DONATING USED CARS TO CHARITY Seo companies Annuity Settlements car crash attorneys event management security best consolidation loan student Donate Car to Charity California car insurance quotes mn mesothelioma attorney assistance los angeles motorcycle accident lawyer personal injury law firm Dayton Freight Lines mesotheioma MASSAGE SCHOOL DALLAS TEXAS business email web hosting royalty free images stock Paperport promotional code New social media platforms FUTURISTIC ARCHITECTURE Social media platforms for business Seo services Best Seo company Business management software How to Donate A Car in California Seo company Motor Insurance Quotes Online Christmas cards Custom Christmas cards Cheap Auto Insurance in VA CRIMINAL DEFENSE ATTORNEYS FLORIDA mesothelioma lawyer dallas massage school dallas texas online colledges Dallas Mesothelioma Attorneys Best criminal lawyer in Arizona PHD on Counseling Education Social media examiner Social media management Tech school Html email mesothelioma personal injury lawyers WebEx costs mesothelioma settlement amounts mesothelioma settlements Christmas cards Proud Italian cook DONATE CAR FOR TAX CREDIT accident attorneys orange county mesothelioma lawsuits cheaper insurance companies Italian cooking school cash out structured settlement WordPress theme designers Adobe illustrator classes Learning adobe illustrator Donating a Car in Maryland Met Auto annuity payment mesothelioma lawyer asbestos cancer lawsuit Social media tools mesothelioma law suit Donate Car for Tax Credit Donate a car in Maryland Mesothelioma Law Firm See more at http//wwwginfostopnet/ Donate a Car in Maryland Auto Accident Attorney pharmacist jobs in chicago onlineclasses Automobile Accident Attorney email bulk service Online Classes federal criminal defense attorney Online motor insurance quotes DONATE A CAR IN MARYLAND Donate Your Car for Kids Asbestos Lawyers Structures Annuity Settlement Forex Trading Platform Nunavut Culture Motor Replacements Hard drive Data Recovery Services ONLINE COLLEDGES Best Criminal Lawyers in Arizona sell your structured settlement payments CHEAP DOMAIN REGISTRATION HOSTING wisconsin mesothelioma attorney hosted predictive dialers Cheap Domain Registration Hosting DONATE CARS ILLINOIS Donate Cars Illinois Criminal Defense Attorneys Florida Life Insurance Co Lincoln bus accident attorney los angeles Car Insurance Quotes Utah Donate your car for money Car Insurance Quotes PA buy gift card Holland Michigan College cheap auto insurance in va Online Motor Insurance Quotes ROYALTY FREE IMAGES STOCK mesothelioma symptoms Met auto

lunes, 30 de enero de 2012

Blogger

Optimizar SEO para Blogger. Evitar META duplicadas. – Credit – Promotional Code

Las etiquetasMETA nos sirven para ofrecer información básica a los buscadores acerca de nuestra web y de cada una de sus páginas. En las plantillas Blogger esas etiquetas prácticamente no existen, así que si las queremos a efectos de posicionamiento, tendremos queañadirlas a mano. El problema se presenta a la hora de no duplicar esa información, ya que actualmenteeso no sienta muy bien al Sr. Google.

En una plantilla sin modificar, lo único que encontraremos sobre esto serán estas líneas (la primera está sólo como referencia para encontrar esta parte):

b:include data='blog' name='all-head-content'/
titledata:blog.pageTitle//title
meta expr:content='data:blog.metaDescription' name='description'/

La etiquetatitle es la que muestra tanto a los usuarios como a los buscadores, lo que van a encontrar en la página y aparece también en la pestaña de nuestro navegador. Es importante que sea única para cada página, pero esto es una cosa fácil de hacer siempre que no repitamos título en los posts.data:pageTitle toma el nombre del blog en la página principal y el título del post en las entradas individuales, así que usando esa variable no tendremos problemas.

Hace un tiempo, en lugar de figurar en esa partedata:blog.pageTitle, aparecíadata:blog.pageName, que recoge un título en la formaNOMBRE DEL BLOG: TITULO POST.

La opción actual parece la más adecuada (data:blog.pageTitle), pero podéis personalizarla si queréis:

b:if cond='data:blog.pageType == "item"'
titledata:blog.pageName/- data:blog.title//title
b:else/
titledata:blog.pageTitle//title
/b:if

Con este código condicional, en las entradas se mostrará un título que mostrará el nombre de la entrada, un guión y el nombre del blog (p.ej.:Ancho de columnas en plantilla - Oloblogger) y en el resto de páginas lo que antes hemos explicado paradata:pageTitle.

La parte en negrita es la que añade el nombre del blog tras el título del post. Esto es absolutamente opcional, aunque mucha gente recomienda hacerlo así y situar el nombre del blog tras el nombre de la entrada. Revisa tu plantilla y usa la opción que prefieras.

Volviendo a lo poquito que Blogger aporta, trastitle tenemos una etiquetameta de descripción del contenido. En teoría coincide con lo que hayáis grabado en el escritorio y para posts individuales debería mostrar en Google un resumen del contenido. De esta manera, cuando el buscador nos ofrezca a nosotros como resultado, esta descripción saldría bajo el título, con las palabras coincidentes con la búsqueda resaltadas. Algo bastante interesante.

Sin embargo, como decía antes esto es sólo en teoría, ya que he hecho diversas pruebas conWebmaster Tools para comprobar cómo "veía" Googlebot las páginas marcadas así y lo cierto es que en todos los casos, la etiquetadescription me aparecía vacía de contenido, por lo que parece quedata:blog.metaDescriptionno funciona como debiera. Chungo.

La primera opción que se pasa por la cabeza es sustituir esa variable por una descripción hecha a mano. Esto sería así:

meta content='Aquí iría la descripción de mi blog' name='description'/

Pero esto tiene un problema y es que TODAS las páginas nos mostrarán esa descripción y Google lo catalogará como duplicado. Lo cierto es que no hay una buena solución, así que la menos mala es una vez más, discriminar según el tipo de página y añadir una variable cuyo contenido sí sea distinto para cada página. Aprovechamos la condición que hemos creado antes para meter dentro una nuevaMETA:

b:if cond='data:blog.pageType == "item"'
titledata:blog.pageName/ - data:blog.title//title
meta expr:content='data:blog.pageName' name='description'/
b:else/
titledata:blog.pageTitle//title
meta content='Aquí iría la descripción de mi blog' name='description'/
/b:if

Como veis, en las entradas la meta destinada a la descripción mostrará el título de la página (el del post) y en el resto (Home, Index, Archive) saldrá una descripción que hemos escrito a mano, absolutamente personalizada.

No estoy seguro, pero creo que Google no indexa actualmente este peculiar tipo de páginas de navegación (etiquetas y archivo); al menos así me lo indica el Webmaster Tools. Pero por si acaso, todavía podemos dar un pasito más y excluirlas de nuestra descripción para que no nos lo considere duplicado con respecto a estas y darles una descripción propia.

Y digo la menos mala porque no mostraremos una descripción que se pueda entender realmente como tal, pero algo pondremos y sobre todo, no duplicaremos.~~Por la estructura del condicional, metemos en el mismo saco que lasIndex a las páginas estáticas:~~

Actualización: Adispa nos hace ver que nos hemos colado y que hay una forma más breve de hacer esto último, que la que inicialmente escribimos y que era una evolución de la explicación. Para resumir, le damos la vuelta a las condiciones y usamos una para la página Home y el resto (else) funcionarán condata:blog.pageName, que ya se ocupa de cambiar lo que saldrá para cada uno de esos tipos de páginas (entradas,Index y Archivo), añadiendo detrás (y no delante como Blogger hace) el nombre del blog:

b:if cond='data:blog.url == data:blog.homepageUrl'
  titledata:blog.pageTitle//title 
  meta content='Aquí iría la descripción de mi blog' name='description'/
b:else/
  titledata:blog.pageName/ - data:blog.title//title
 meta expr:content='data:blog.pageName' name='description'/
/b:if

Con este trozo de código todas las páginas de nuestro blog tendrán una descripción distinta y la página Home una descripción más personalizada. Podemos incorporar algunas palabras si lo creemos necesario detrás o delante de aquellas opciones que yo propongo mostrar exclusivamente con variables. Así, reordenando las variables y poniéndole delante la palabra "Blogger", una páginaIndex podría verse como:Blogger: CSS - Oloblogger.

Para finalizar, puede que lo que nos interese es que directamente Google NO indexe todas esas páginas de índices. Para ello una vez más recurrimos a las condiciones y a las meta. Este código sería adicional al anterior:

!-- Robots no index --
b:if cond='data:blog.pageType == "archive"'
meta content='noindex' name='robots'/
/b:if
b:if cond='data:blog.pageType == "index"'
b:if cond='data:blog.homepageUrl != data:blog.url'
meta content='noindex' name='robots'/
/b:if
/b:if

Ojo con la negación (!=). Si nos equivocamos y ponemos un==, nuestra página Home tampoco se indexará.

Donate car for tax credit best mesothelioma lawyers alabama mesothelioma lawyer Mobile casino World trade center footage Proud Italian cook Webex Costs Donate car to charity California Social media platforms How to Donate A Car in California Online Classes business voip solutions tucson car accident attorney WordPress themes for designers Hire php developer Email bulk service Online casino HOW TO DONATE A CAR IN CALIFORNIA Service business software STRUCTURED ANNUITY SETTLEMENT Structures Annuity Settlement Casino reviews Seo companies buyers of structured settlements donate old cars to charity att call conference Learning adobe illustrator chicago hair laser removal ANNUITY SETTLEMENT Home Phone Internet Bundle event management security Casino Italian cooking school accident lawyers in los angeles Criminal defense lawyer best accident attorneys Make money online Australia michigan motorcycle accident lawyer Business finance group anti spam exchange server Social media strategies MET AUTO arizona auto accident attorney Hire php programmers criminal defense attorneys florida DUI lawyer Car Donate World Trade Center Footage Computer science classes online Online Motor Insurance Quotes Php programmers for hire structured settlemen MASSAGE SCHOOL DALLAS TEXAS holland michigan college Holland Michigan College Donating a Car in Maryland illinois law lemon Live casino Forensics Online Course online motor insurance quotes Photo Christmas cards Seo services Online Stock Trading structured settlement sell donating used cars to charity How to donate a car in California Personal Injury Lawyer Business management software mesothelioma law firm CAR INSURANCE IN SOUTH DAKOTA AUTO ACCIDENT ATTORNEY Best social media platforms Cheap Car Insurance for Ladies Hire php developers mortgage adviser auto accident attorney Torrance better conferencing calls buy gift card LOW CREDIT LINE CREDIT CARDS Paperport Promotional Code Dwi lawyer Met Auto email bulk service car insurance quotes mn Criminal lawyer asbestos lawyers Forex Trading Platform Annuity Settlements Donate Cars in MA domains yahoo baltimore mesothelioma attorneys onlineclasses Bankruptcy lawyer DONATE CARS ILLINOIS Injury Lawyers Social media platforms for business FUTURISTIC ARCHITECTURE truck accident attorney los angeles philadelphia mesothelioma lawyer Motor replacements Better Conference Calls Tech school mesothelioma litigation miami personal injury lawyer Custom WordPress theme designer Best Seo company boca raton personal injury attorney Donate your car for kids Php programmers personal injury firm Massage School Dallas Texas CAR INSURANCE QUOTES PA Best social media platforms for business New social media platforms Online College Course mesothelioma law firms mesothelioma attorneys california selling my structured settlement structered settlement WordPress hosting Donate Car to Charity California california mesothelioma attorney Criminal Defense Attorneys Florida Seo company HOME PHONE INTERNET BUNDLE personal injury lawyer pharmacist jobs in chicago Online Christmas cards cheap car insurance in virginia truck accident attorney texas Custom Christmas cards Car Insurance Quotes Colorado lease management software motorcycle accident lawyer california structured settlement company hughes net business Psd to WordPress Criminal defense attorneys Florida accident car florida lawyer personal accident attorney Donate Your Car for Kids Social media examiner Social media management mesothelioma personal injury lawyers personal injury attorney torrance CHEAP CAR INSURANCE IN VIRGINIA saskatchewan auto insurance st louis mesothelioma attorney Html email auto accident attorney selling annuity Car Insurance Quotes world trade center footage dui lawyer scottsdale DONATE YOUR CAR FOR KIDS Christmas cards Motor Insurance Quotes Psd to html Car Insurance Quotes MN Car insurance quotes MN Asbestos Lawyers WordPress theme designers Online colledges mesothelioma drug Adobe illustrator classes accident attorney san bernardino mesothelioma lawyer dallas state of california car insurance Social media tools Social media campaigns Mesothelioma Law Firm Donate Car for Tax Credit Life Insurance Co Lincoln Hard drive data recovery services Donate Your Car Sacramento Insurance Sell Annuity Payment data recovery raid DONATING USED CARS TO CHARITY structured settlement buyer personal injury law firm federal criminal defense attorney car insurance quotes colorado mesothelioma survival rates Nunavut Culture Donate Car To Charity CALIFORNIA student loan consolidation program Dayton Freight Lines Hard drive Data Recovery Services Low Credit Line Credit Cards Donate a Car in Maryland Motor Replacements Cheap Domain Registration Hosting houston motorcycle accident lawyer Donate Cars Illinois Best Criminal Lawyers in Arizona georgia truck accident lawyer bus accident attorney los angeles Car Insurance Quotes Utah dallas mesothelioma attorneys Dallas Mesothelioma Attorneys Royalty free images stock DONATE YOUR CAR FOR MONEY Dallas mesothelioma attorneys mesothelioma lawyer texas Car Insurance Companies DONATE CARS IN MA injury lawyers west palm beach PHD on Counseling Education hair removal washington dc

sábado, 28 de enero de 2012

Navegando, X-Topic

Un lustro ¿Eso es mucho o es poco para un blog? – Donate – Promotional Code – Abogado

Por estos lares no celebramos casi nada, ni los 100 primeros posts, ni los 1000 primeros seguidores,ni el primer millón de visitas... Creo que con lo único que lo hicimos fue con lo de los 20Blogs.

Pero más o menos,hoy es el aniversario de este blog y por eso apartamos un poco los temas habituales para hacer un poco de historia y unas pequeñas reflexiones.

Lo demás o menos tiene su explicación, claro, y es que los primeros artículos que escribí realmente los publiqué en lo que entonces era mi blog personal y el de mis amigos.

Sí, todos hemos tenido un pasado, yo también... pero aunque siga estando tan desfasado en cuanto a estilo como entonces, a mí me sigue gustando aquella plantilla oscura con tantos cacharritos. En serio. Incluso ahora al volverla a ver gracias a esaespecie de máquina del tiempointerneteril que existe por ahí, la echo de menos. Soy así de cutre, que le vamos a hacer, aunque también puede ser cosa de la nostalgia.

Ver en WayBack Machine

Como ya he dicho en otras ocasiones, esos apuntes que tomaba para mí mismo se hicieron cada vez más frecuentes y viendo que a algunos torpones como yo también les interesaban esas notas, decidí abrir Oloblogger y traspasar allí este tipo de contenidos. Las dos plantillas eran prácticamente idénticas tal y como podéis comprobar enWayback Machine.

Y aprovecho para contaros que ya llevo un tiempo cansado de esta, que además tiene infinidad de parches y pruebas y de vez en cuando hace aguas. Así que os anticipo que más pronto que tarde, aunque muchos siguen encantados con ella, cambiaré a una que seguro que no os va a gustar. Y es que la idea que llevo es muy muy distinta.

Pero volviendo al principio, hoy hace de eso un lustro y entre otras cosas me puse a pensar si cinco años eran muchos o eran pocos para un blog.

Cinco años no son nada en la vida de alguien y muchísimo menos en elreloj del tiempo del mundo. Sin embargo, parece que para un blog es sinónimo de senectud o al menos de madurez. Yo estoy en lo último, me siento maduro en esto de los blogs; al menos algo más maduro.

No recuerdo ahora los sitios, pero he leído mucho sobre la decadencia y el inminente fin de los blogs. El argumento principal es la fuga de blogueros a otras redes sociales por su facilidad de uso. Ya sabéis, Facebook, Tumblr, Twitter, Google Plus...

Pero que queréis que os diga ¿qué es lo que se comparte principalmente en esos sitios? Pues ni más ni menos que CONTENIDOS, cosas que otra gente publica en otros sitios, sitios como las bitácoras. Por tanto ¿qué sería de ellos sin nosotros? Pues seguramente lo mismo que de nosotros sin ellos. Poca cosa.

Internet esinteractividad,intercambio. Ambos medios -blogs y redes- son en mi opinión perfectamente compatibles y pueden subsistir simultáneamente. De hecho incluso creo que se necesitan. Quizás, lo único que está pasando es que está habiendo un acoplamiento, un ajuste, una rectificación de la oferta y la demanda. Ni todo el mundo puede/debe ser twittero ni todo el mundo bloguero.

Los que nos consideramos fundamentalmente esto último, seguimos en la brecha porque nos gusta. Nos gusta escribir, tenemos alguna inquietud que queremos compartir y sobre todo, nos gusta interactuar con los que tienen la misma afición que nosotros. Dar y recibir. En esencia, compartir cosas.

Cuando no es así y no hablamos realmente sobre lo que nos gusta, lo fácil es sucumbir al desaliento, a la desidia, al aburrimiento o la sensación de que esto es un trabajo ¿Quién aguanta mucho tiempo haciendo algo que no le gusta y a lo que no está obligado?

Así que habrá quién opine que 5 años en un blog es mucho tiempo, pero a mí de verdad que hasta la fecha, me han parecido sólo un suspiro.

CosasParaMiBlogs

jueves, 2 de febrero de 2012

Originales mensajes emergentes para imágenes con CSS. – Lawyers

miércoles, 1 de febrero de 2012

Guía: Condiciones Blogger según tipo de página. Combinadas – School – Teleconferencias – cancer

martes, 31 de enero de 2012

¿Solucionados todos los problemas con los nuevos comentarios? – Settlement – Automovil

Guía: Condiciones Blogger según tipo de página. Simples – Dominios

lunes, 30 de enero de 2012

Optimizar SEO para Blogger. Evitar META duplicadas. – Credit – Promotional Code

sábado, 28 de enero de 2012

Un lustro ¿Eso es mucho o es poco para un blog? – Donate – Promotional Code – Abogado

Popular Posts

Blogger news

Labels

Blog Archive