Mostrando entradas con la etiqueta basicos. Mostrar todas las entradas
Mostrando entradas con la etiqueta basicos. Mostrar todas las entradas

martes, 9 de abril de 2013

Agregar paginación en blogger


Colocar paginacion en blogger

Esta es una herramienta estupenda para poder navegar en todas las paginas de nuestros blogs. Les permite a nuestros seguidores navegar en el blogs como si fuera un libro. Ya que ordenando las paginas de los post mas nuevos asta los mas antiguos y de esta forma los usuarios naveguen pro fundamente en los post del Blog. quien no a Visitado YouTube, esta pagina utiliza una paginación semejante a esta.


Para agregar la paginación a tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>


<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

Color Rojo: Numero de Entradas a mostrar
Color Azul: Numero de Paginas a Mostrar

Ve las siguiente imagen, donde explico como donde agregar en Gadget.

Colocar Paginacion en blogger


Guarda los Cambios y listo.

martes, 2 de abril de 2013

Obtener Link de descarga de Google Drive

Uno de los nuevas formas de alojar archivos en las nubes (comúnmente así se dice) es google drive. que nos da esta 5GB gratis en donde podemos subir todo tipo de archivos.

Aunque google Drive no da una dirección exacta donde podemos descargar los archivos de forma publica, como por ejemplo quieres el link para que los lectores descarguen un archivo desde google drive.

Bueno para poder tener un link de descarga para cualquier archivo simplemente necesitamos en id de dicho archivo. para eso tenemos que hacer los siguiente:
El en archivo a descargar: click en compartir
 


Configuramos el acceso del archivo
 
Nos saldra una venta pop up y damos click donde esta marcado:




Una des hecho esto copiamos el link que esta en color azul en la primera imagen:
en este caso es:

https://docs.google.com/file/d/13MQcuNeJqC5ekrp--zjBp-HxU8NfasfjrujqcvVpTrlxsAlnq1FC-hw-vTuI/edit?usp=sharing

Para obtener el lik de descarga usamos en siguiente link, únicamente tienes que cambiar el id de tu archivo por las xxx de color rojo

https://docs.google.com/uc?export=download&id=XXXXXXXXXXXX

al final queraria asi.

 https://docs.google.com/uc?export=download&id=13MQcuNeJqC5ekrp--zjBp-HxU8NfasfjrujqcvVpTrlxsAlnq1FC-hw-vTuI

Se ve un poco complicado pero con el tiempo es facil.
 




miércoles, 20 de marzo de 2013

Contador Flash de Visita para Blogger por paises



Para todos los que quiere saber cuantas personas visitan su blogs y mostrar dicha información también a los lectores, en esta ocasión les presento un contador  de vistitas que nos permite esto. se trata de 99counters que nos permite visualizar cuantas personas visitan nuestro blogs, de que país lo están visitando con pequeñas banderas de cada país y en total diario de visitas.

Con Tu cuenta gratis de 99counters ahora puede crear contador de red personalizadas para su sitio de red, blog y perfiles sociales en red.

El uso de 99counters es una manera efectiva y poderosa para obtener instantáneamente estadísticas de red

Para quienes quiera agregar este contador visiten  99counters y registrate.

jueves, 14 de marzo de 2013

Personalizar bloques entrecomillados, bombilla intermitente para Blogger

Este tutorial realmente le permitirá crear bloques entrecomillados impresionante y atractivo para sus puestos de blogger o sitios web. Estos bloques entrecomillados cambiará de color cuando el cursor del ratón se asoma sobre ella.  Pero este efecto bloques entrecomillados es excepcional! Sólo echar un vistazo de un blockquote siguiente ejemplo.

 
Interesante, ¿no? Ahora vamos a aprender cómo añadir efectos similares como el efecto bombilla parpadea arriba.

Añadir El Blockquote bombilla intermitente para Blogger

Esta blockquote se puede añadir en la forma similar a como se explica en mis mensajes earliar. Si usted es nuevo a continuación, lea esta parte de mi post anterior -> Agregar y personalizar Blockquote En Blogger
El código CSS que se inserta justo por encima de ]]></b:skin> es esto,

blockquote {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5enN3yNAiJ9rlZvGnqovwPEMix3B_3xgzFcXV5VhdNwmMtg7UBZpgGsW3C_9teA3QkoJpP8U3MLM3Rkezw73QnYY01bekJjA1dBRZkWBRo0FSrvr03JjnFti1mdacVEa7zTwd8I2mses/s1600/bulb-off.gif ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5chfEYPltUuXk0B81T118SXrou4jfa5O5nDpSQQ74Qu0hNMVs7K1ZDWhSlaPMeZe4HUUDrqbJahxQpIvehQkr3Up155f0ze02wJyNOJ5zGJvprxMlOByXpdmMNcGqozagCfuU-i0KWPs/s1600/bulb-on.gif ) no-repeat right bottom ;
color:#E0E089;
}


blockquote p {
margin: 0;
padding-top:10px;
}


La segunda imagen en el enlace rojo aparece al pasar el ratón estacionario y la segunda imagen de enlace verde aparece cuando el ratón se mueve fuera de los bloques entrecomillados

Reducir el tiempo de carga Blog, 12 Consejos útiles



Casi todos los blogger novato falla cuando se trata de reducir el tiempo de carga de blog. La mayoría de los tutoriales que están disponibles en la reducción del tiempo necesario para que un sitio web para cargar son a menudo poco clara o incompleta. Decidimos compartir nuestra forma de resolver este problema. A continuación se presentan 12 consejos muy interesantes e importantes para disminuir el tiempo de carga de sus blogs en casi un 90%.
  1. Enlace a todas las imágenes dentro de su plantilla de Blogger

    Yo compartimos un dato importante sobre la creación de una mañana de copia de seguridad de imagen en Blogger y luego enlazar a todas las imágenes desde allí. La mayoría de ustedes utilizan plantillas que no están oficial mente cedidas por Blogger. Estas plantillas contienen con frecuencia imágenes que se guardan en servicios como tinypic o photobucket . Cuando tu blog carga el navegador tiene que conectar a todos los servidores que conectan a las imágenes, como resultado conduce a un retraso enorme en el tiempo de carga de tu blog. Lo que debes hacer es reemplazar todas las imágenes de ese tipo con los que ha guardado en el interior de blogger como se explica en el post anterior . La ventaja de hacerlo así será esto que el navegador tendrá que conectar sólo a blogger al cargar las imágenes. Así ahorra tiempo.
  2. Guardar todas las imágenes en formato GIF o PNG

    GIF es sinónimo de "Graphics Interchange Format" y significa "PNG Portable Network Graphics" Ambos formatos están bien comprimidos, de menor tamaño y ampliamente respaldada por todos los navegadores. Pero si el tamaño se refiere PNG comprime mucho mejor que GIF. En los casos típicos de hasta un 5-25%. Hay algunos problemas con la transparencia PNG en IE6 IE7 pero ya se utiliza ampliamente en estos días, la transparencia es ni más un problema. El uso de cualquiera de estos formatos de imagen se reducirá enormemente el tiempo de carga de sus blogs en un 60%, es decir 70-90KB El tamaño es aproximado por mi blog y verdadero tamaño depende del número de imágenes que se utilizan.
  3. Dar dimensiones propias imágenes

    Dar a cada imagen una anchura y una altura hará que sea fácil para el navegador para cargar la imagen rápidamente. Siempre disminuir el tamaño de una imagen si el tamaño original es mayor. El código HTML generales para una imagen se ve como la siguiente,
    <img width="" height="" src="URL De Image" />
    La anchura y la altura se requiere un valor en píxeles. Un píxel es igual a un punto en la pantalla. Una imagen a tamaño completo en mi blog tendrá una width = "590px" y la altura puede ser tan largo como quiera. 590px casi igual a la anchura de mis posts. Espero que esto te da una idea sobre la forma de elegir los valores de anchura y altura para sus imágenes. Navegadores resulta fácil cargar imágenes cuyas dimensiones se especifican. Asegúrese de hacer su hábito para especificar un tamaño adecuado para sus imágenes. Si utiliza Windows Live Writer tu vida será mucho fácil.
  4. No utilice una imagen como fondo

    Si está utilizando cualquier imagen como fondo y luego amablemente quitarlo. Una imagen de fondo se repite horizontal y vertical mente y es responsable de un 50% el tiempo de carga lento. Sólo tienes que quitar y ver la diferencia. Para eliminar una imagen de fondo simplemente encontrar este código CSS dentro de su plantilla, (Consejo: - Está ubicado justo en la parte superior de tu blog Simplemente busque cuerpo.)

    body {background: # 7AA1C3 url (http://xyz.com/blabla.jpg);

    ancho: 980px;

    color: # 333;

    font-size: 14px;

    font-family: Georgia;

    margin: 0 auto 0;

    padding: 0;}
    Este código tendrá un aspecto diferente en su plantilla, pero usted debe preocuparse sólo con el texto negro en negrita. Sólo tiene que eliminar url (http://xyz.com/blabla.jpg) y guardar la plantilla. Da un color simple para su fondo. # 7AA1C3 refiere al color de fondo. Puede cambiarlo usando mi carta de color hexadecimal
  5. Guardar todo JavaScript Dentro de Blogger

    ¿Por qué debería usted se conecta a sitios externos para almacenar su código JavaScript, mientras que fácilmente se puede guardar en Blogger! Guardar todos los códigos de JavaScript dentro de sus plantillas justo por encima de </ head> utilizando el código de abajo,




    <script type='text/javascript'>

    / / <! [CDATA [

    Cómo pegar el código JavaScript aquí

    / /]]>

    </ Script> El texto en negrita es donde hay que pegar el código JavaScript que se utiliza en la plantilla mediante la vinculación a un sitio externo.
    Para encontrar una URL que enlaza con JavaScript sitio externo, la búsqueda de Messenger type='text/javascript'> dentro de su plantilla (Asegúrese de activar la opción "Expandir plantillas de artilugios " caja en la esquina superior derecha). Una vez que encuentre esa vinculación, abra el vínculo en el navegador. Usted verá gran trozo de texto complejo en la ventana y que es su código JavaScript. Simplemente copia y pega el código compartido anteriormente. Vuelva a colocar todos los códigos de JavaScript dentro de su plantilla con el código anterior, asegurándose de que ha extraído el código del enlace y pegar en el código anterior.
  6. Aceptar siempre la calidad y plantillas blogger con secuencias de comandos

    La mayoría de los bloggers gran error hacer es cargar cualquier plantilla que les atrae. La mayoría de los no oficiales plantillas de Blogger que están disponibles en la blogosfera menudo son creadas por personas que no son conscientes con el uso adecuado de HTML y JavaScript. Una plantilla inadecuada guión con etiquetas vacías, etiquetas deseadas y JavaScript roto a menudo hacen trabajo duro para los motores de búsqueda para rastrear el contenido de su blog. Otros navegadores también pierda su valioso tiempo en leer guiones rotos. Si un JavaScript no está bien codificadas o optimizado, puede causar un PC lectores para colgar! Imagínese pasando esto a los lectores para acceder a su blog. En las plantillas de uso a corto de las autoridades que tienen el respeto en la blogosfera y de aquellos que son profesionales certificados.
  7. Utilice anuncios Limitadamente

    Si son los blogs sólo para recibir el pago por mostrar grandes trozos de anuncios de varias fuentes de lo que son, sin duda haciendo mal uso de esta hermosa experiencia de blogging. No haga un blog de un mercado de pescado. Mostrar sólo unos cuantos anuncios en las principales áreas de tu blog. Si lo hace así, mantendrá su interfaz de blog limpio y fácil de navegar y se arrastró poder. Cada complemento que se muestra utiliza JavaScript que prolonga el tiempo de carga de página. Asegúrese de limitar todos sus anuncios a tres.
  8. No enlaces Directorios a blog

    Es una percepción errónea de que la vinculación de varios directorios de blogs te traerá tráfico inmenso. Cuando se vincula a varios directorios de blogs en su sitio web, motores de búsqueda confianza suelto en su blog debido a la excesiva vinculación de los navegadores tienen dificultades para navegar por las imágenes pequeñas que enlace al blog de directorios. Todos los directorios de blogs pido que enlacen con un pequeño enlace de imagen en sus blogs, pero al hacerlo sólo dañará el éxito de su blog. Yo sólo creo en BlogCatalog y MyBlogLog como autoridades competentes para esperar tráfico de. Si realmente quieres una cierta cantidad de tráfico de directorios de blogs y luego confiar sólo en BlogCatalog y MyBlogLog . Por otra parte acepte sólo el pequeño trozo de etiqueta meta de ellos en lugar ligarse a ellos.
  9. No utilizar widgets de directorios de blogs que utilizan imágenes

    Me refiero al widget famoso espectadores reciente BlogCatalog y MyBlogLog . Estos widgets uso de JavaScript que enlazan a estos sitios y también mostrar imágenes que se suman al tiempo de carga de tu blog. Puedo utilizar etiquetas meta proporcionadas por ellos en vez usar sus widgets. Esto ayuda a reducir el tiempo necesario para que mis cargar las páginas. Si usted realmente desea utilizar estos widgets a continuación, intenta mostrar algunas imágenes sobre ellos, tan bajo como 10.
  10. Resuma sus mensajes utiliza una conexión en Leer más

    Mensajes de cuerpo entero en la página principal es una de las mayores razones por las que un blog tiene tiempo de carga. Resumir todos tus mensajes usando el enlace de lectura o continuar leyendo Para saber cómo agregar, leer este post-> Leer Mas
  11. Mostrar sólo cuatro o cinco post en la Página de inicio

    No mostrar más de 4-5 mensajes en la página principal. Si lo hace, mantener a sus lectores mensajes ocupado diferentes de lectura y también le resultará interesante ver qué tan rápido la página de inicio cargas.
  12. Elimine Enlaces externos

    No utilice aparatos que son de sitios externos que no sean blogger. Deshágase de los contadores de estadísticas y el uso de Google Analytics . No guarde las imágenes en otros servicios, pero Blogger. Guarde todo el código JavaScript dentro de blogger como se discutió anteriormente . No agregue enlaces de directorios de blogs, no traen tráfico con excepción de BlogCatalog y MyBlogLog.

Principales Condicionales de Blogger



Todas estas técnicas de mostrar los elementos de cierta forma sólo en determinadas páginas se logra con los códigos condicionales de Blogger.
Las condicionales son códigos que indican dónde debe ejecutarse algo y dónde no. Es decir, condiciona una orden.
De esta forma podemos hacer que un script, un video, una imagen, un gadget, un mensaje, un truco, estilos, etc. se muestre sólo en la portada del blog, o sólo en las entradas, o sólo en las páginas estáticas, o sólo en las listas de archivos, o en una entrada específica.

Usarlos es sencillo, sólo hay poner al inicio del elemento que queremos condicionar el código que específica y condiciona dónde se mostrará, y al final de este el cierre de la etiqueta.

Mostrar /ejecutar un elemento sólo en la portada del blog


<b:if cond='data:blog.url == data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las entradas individuales


<b:if cond='data:blog.pageType == &quot;item&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas del archivo del blog


<b:if cond='data:blog.pageType == &quot;archive&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas estáticas


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en una entrada específica o etiqueta específica


<b:if cond='data:blog.url == &quot;URL de la entrada o etiqueta&quot;'>
...Aquí va el código del elemento...
</b:if>


Por lo contrario también podemos especificar que se muestre en todas partes excepto en un lugar específico.

Mostrar /ejecutar un elemento en todas las páginas MENOS en la portada del blog


<b:if cond='data:blog.url != data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las entradas individuales


<b:if cond='data:blog.pageType != &quot;item&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas del archivo del blog


<b:if cond='data:blog.pageType != &quot;archive&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas estáticas


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en una entrada específica o etiqueta específica


<b:if cond='data:blog.url != &quot;URL de la entrada o etiqueta&quot;'>
...Aquí va el código del elemento...
</b:if>

En donde dice ...Aquí va el código del elemento... se agrega lo que se desea condicionar, por ejemplo el script, el código del truco, o los estilos.
Por ejemplo, para que la sidebar tenga un color de fondo diferente sólo en la portada del blog se usaría este código antes de </head> lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#sidebar-wrapper {
background: #0080FF;
}
</style>
</b:if>

Eso haría que la barra lateral tenga un color de fondo azul en la portada pero cuando se esté en cualquier otra página cambie al color normal que tiene la plantilla.

De esta forma condicionamos la forma que se verá el blog según la página donde se esté.
Como mencioné antes se puede hacer para un sin fin de cosas, desde un simple estilo hasta condicionar todo un contenedor como la sidebar.

miércoles, 13 de marzo de 2013

Actividades que hará que su blog sea eliminado




Google Blogger es una plataforma de publicación muy popular. Millones de blogs en Blogger ejecutar, añadiendo un amplio inventario de conocimientos a Internet. Es un servicio gratuito diseñado para la comunicación, la expresión y la libertad de expresión. Sin embargo, mientras que se destaca, Google también tiene que mantener su imagen de calidad y de seguridad para sus usuarios. Si un blogger viola las directrices de calidad de Google , Google tomará medidas contra ese blog de ​​Blogger para proteger a sus usuarios. Mucha gente nos pregunta por qué su blog se suspenderá o cancelará, incluso cuando aparentemente no hizo nada malo. Bueno, tiene que haber algo que estaban haciendo, por lo que Google tuvo que hacerlo. En este post, hablamos de lo que las cosas van en contra de las políticas de Google, y que las cosas que debe evitar para mantenerse a salvo.

11 cosas a evitar en los blogs de Blogger

1. El discurso del odio

Discurso de odio es algo que, a pesar de que es muy común en Internet, no es apreciado por Google. Promover el racismo y el odio contra un grupo religioso o étnico específico es un delito, y no es tolerado por Google.

2. Violencia

Google se utiliza en todo el mundo por personas de diferentes grupos geográficos y demográficos. Promover la violencia en su blog no sería adecuado para muchas personas, especialmente los niños que son fácilmente afectados. Además, la promoción de la violencia contra un grupo determinado está bajo el racismo, que tampoco está permitido por Google.

3. Las actividades ilegales

Blogging sobre cualquier tipo de actividad ilegal, como drogas o alcohol, es ilegal. La regla general es que si usted podría meterse en problemas por hablar de algo delante de un policía, lo más probable es que lo emana también de esta sección, y se castiga con una prohibición.

4. Sangre

Usted no debe tener imágenes, vídeos u otros contenidos gráficos que contiene gore, o que pueda molestar a algunas personas. Por ejemplo, no se puede mostrar a un hombre recibiendo brutalmente asesinados por una escopeta o un terrible accidente que resultó en sangre / muerte.

5. Contenido para adultos

Google tiene unas leyes estrictas contra la pornografía y contenido para adultos. Aunque Google no directamente denunciar estas cosas, usted todavía tiene que marcar su blog como "adulto" de la configuración de Blogger, de lo contrario no serán tratados de forma diferente. Google, sin embargo, no le permiten ganar dinero con contenido para adultos.

6. Seguridad de los niños

Según Google, tiene "tolerancia cero" cuando se trata de contenidos que puedan manipular o dañar a los niños. Es totalmente en contra de la pornografía infantil y la pedofilia, y terminará inmediatamente la cuenta de cualquier blogger que está promoviendo esas cosas.

7. Material registrado

A nadie le gusta cuando alguien copia su contenido y sale con la suya. Google tiene un sistema muy eficaz de poner freno a este problema de la mejor manera que puede. En primer lugar, el contenido con derechos de autor se traducirá en un rango inferior, y la suspensión de Google AdSense para ese sitio. Continuación plagio resultará en la eliminación de su blog. Así que ten cuidado! (Si usted encuentra a alguien copiando su contenido, debe informar de ello a Google ).

8. La violación de la privacidad

Por favor, no publicar datos confidenciales de otra persona sin el permiso expreso de esa persona. Número de publicaciones de otras personas de tarjetas de crédito, números de teléfono, información de contacto y otra información privada tal está en contra de las políticas de Google, y debe ser evitado.

9. Suplantación de identidad

Robo de identidad de otra persona y hacerse pasar por alguien es un delito punible con pena de prisión y / o multa. Por ejemplo, fingiendo ser otra persona, o utilizando sus alias no está bien.

10. Spam

El spam es algo que no se aprecia en Google o cualquier otro motor de búsqueda para que matter.Google está siempre tratando de mantener el spam fuera de su sistema. Se lanza actualizaciones algorítmicas con regularidad , y no lo aprecian cuando se inicia el spamming.

11. Malware

Virus y malware no es algo que los usuarios apreciarán. Es por eso que Google toma iniciativas para mantener el malware de su sistema. Si su sitio está infectado por un virus, usted debe comprobar que funciona de inmediato. Si usted está involucrado con la propagación de malware más de una vez, entonces se corre el riesgo de ser baneado sin darse cuenta de Google.

Tenga en cuenta que puede haber algunas excepciones a estas normas, debido a consideraciones educativas, científicas o artísticas. Estas excepciones se realizan cuando existe una ventaja obtenida por el público de dicha información. De lo contrario, los blogs con contenidos serán prohibidos o eliminados. Así que siempre jugar seguro. Y recuerda! En caso de duda, pregunte siempre. Estamos aquí para ayudar :)

martes, 12 de marzo de 2013

Etiquetas al Estilo Taringa en Blogger


 Bueno es este día les enseñare como colocarle mas estilo a nuestras etiquetas en blogger, esta ves tendrán el estilo de taringa, que ya todos conocemos. bueno empecemos


La etiquetas siempre se muestran con un código similar a este:

<span class='post-labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>
</b:if>
</span>
Eliminamos este código:

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
Colocamos este Código antes de </b:skin>:

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6qAa1ntEZ7loC-pSJ_RD477JILW_HwKz5hrGEem6EtbNP2l9rR5Og_YFaUgnejiwP7EU7HfuYyxgxdwR2n0ugAtOYhD2bphMlndNkdo2UjZ8H_iqsieHFstIFt4A8jg9sJo7mdH3va4/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right;
height: 24px;
line-height: 24px;
padding:0 10px 0 8px;
margin: 0 0 0 25px;
color: #333;
font-size:13px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6qAa1ntEZ7loC-pSJ_RD477JILW_HwKz5hrGEem6EtbNP2l9rR5Og_YFaUgnejiwP7EU7HfuYyxgxdwR2n0ugAtOYhD2bphMlndNkdo2UjZ8H_iqsieHFstIFt4A8jg9sJo7mdH3va4/s400/tag-taringa-ajmrdesign.com.png") no-repeat;
content: "";
width:15px;
height: 24px;
float: left;
position: absolute;
top: 0;
left: -15px;
}
.post-labels a:hover {
text-decoration: underline;
}

Y listo ya tenemos nuestras etiquetas a un mejor estilo

via: mil trucos blogger 

lunes, 11 de marzo de 2013

Manual de css3 en español gratis pdf

Bueno, ya hemos hablado de lo importante que es CSS3 para el diseño web. Antonio Navajas, autor del libro, es un desarrollador front-end, diseñador y formador ocasional. Ha colaborado activamente en varios proyectos relacionados con la web, la formación y el diseño en general. Como todo avanza muy deprisa en el mundo de diseño, hay que estar siempre muy bien informado sobre las novedades que ocurren en diseño web.

Antonio Navajas ha hecho una modificación de su curso de CSS3 en Cristalab. Aquí os dejo el manual de CSS3 en español para que podáis descargarlo gratis.


domingo, 22 de abril de 2012

Des-habilitar clic derecho del ratón(mause) fácil


Para que no te copien tus entradas esta es una forma muy fácil de des habilitar el clic derecho del mause.

Para des-habilitar en mause Vamos a Diseño >  Añadir gadget > JavaScript/HTML
Copiamos y pegamos el siguiente codigo:

<script language="JavaScript"><!--//Disable right mouse click Script//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive//For full source code, visit http://www.dynamicdrive.comvar message="Des-habilitado por autor";
///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){ alert(message); return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function("alert(message);return false")// --></script>


guardamos todo y listo.

Crea tu propio formulario de contacto para blogger

Esta ves les presento una pagina muy simple que nos da la opción de crear nuestro propio formulario de contacto que servirá para que nuestros visitantes se pongan en contacto con nosotros vía correo electrónico.
la paginas es Foxyform.com es muy fácil de utilizar: simplemente sigue las instrucciones y listo.



Enlace: Foxyform.com

sábado, 14 de abril de 2012

Nueva barra de búsqueda de Google en Blogger







Estoy seguro de que habrá notado el nuevo diseño de Google como se explica en el puesto de evolución en el diseño y la experiencia de Google en la página oficial blog.While Google los cambios han sido más sutiles se destacan como el nuevo y elegante barra de búsqueda en los resultados paginas.la nueva barra de búsqueda tiene un aspecto más moderno minimista con esquinas redondeadas y se ciernen effect.But una nueva función y tranquilo como es que usted escriba su texto en el campo de búsqueda aparece una X que se puede hacer clic para eliminar sus texto



En Google



En Blogger





Agregue el estilo de Nueva barra de búsqueda de Google en Blogger


Recuerde siempre una copia de tu plantilla, antes de hacer cambios

Paso 1. En el diseño de Blogger> Haga clic en Edición de HTML



. Paso 2 Busque el siguiente fragmento de código en sus blogs Html: (Haga clic en la tecla Ctrl y F para una barra de búsqueda para ayudar a encontrar el código
]]></b:skin>

Paso 3 Copia y pega el siguiente código desde arriba / Antes de]]> </ B: skin>




/**/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikdDrX9ua0WGn3SVeGJ6cUBjVIc13tJTyA8u6mSSnqLqzofQvGNA8JTinRs8Wcq8TjOcsBpAyU8gRtvytEw31-N5ZKY5KCY2R54vVsmSW46tYOAI63oQ6f_gBJa12PRqb55Jtfq1chCr6/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikdDrX9ua0WGn3SVeGJ6cUBjVIc13tJTyA8u6mSSnqLqzofQvGNA8JTinRs8Wcq8TjOcsBpAyU8gRtvytEw31-N5ZKY5KCY2R54vVsmSW46tYOAI63oQ6f_gBJa12PRqb55Jtfq1chCr6/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/**/

Nota - Para cambiar el ancho de la barra de búsqueda, simplemente cambie la línea resaltada en rojo de hasta 200 píxeles o hacia abajo.

. Paso 4 Buscar el siguiente fragmento de código en sus blogs Html: (Haga clic en la tecla Ctrl y F para una barra de búsqueda para ayudar a encontrar el código -

</head>

Paso 5. Ahora copie y pegue este código desde arriba / Antes de </ head>

Nota - Si ya ha agregado un script jQuery a su plantilla que puede eliminar el código resaltado en verde.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

Paso 6. Guardar la plantilla, tenemos la Css añadido al estilo de la barra de búsqueda y el jQuery para el botón X ahora añadimos el código HTML.

Paso 7. Vuelve a la página de diseño de blogs y haga clic en Añadir un gadget> elige HTML / Javascript.


Paso 8 Copiar y pegar el siguiente código en el gadget HTML / Javascript:

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>
Paso 9. Guardar el gadget HTML / JavaScript y usted puede arrastrar y colocar en su lugar.

guarda todo y listo.


martes, 28 de febrero de 2012

Como personalizar los bloques entrecomillados de blogger


Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F" 

Tabulaciones realmente una manera muy agradable para diferenciar algunos de los contenidos del resto. Y también es una buena forma de impresionar a los usuarios mediante el uso de un estilo fresco para el presupuesto

En este post me he dado a los diferentes estilos de blockquotes procedentes de distintas fuentes sólo comprobar los estilos.
La forma de usarlo es encerrando el texto entre <blockquote> y </blockquote> o usando el ícono de entrecomillado que se encuentra en el editor de entradas comillas
Para personalizar estos bloques entrecomillados entra en Diseño > Edición de HTML y busca esto:

blockquote {
..............
..............
..............
}
Y sustitúyelo por esto: 


Nota;
Es posible que en algunas plantillas no empiece el código como

blockquote {
sino como


.post blockquote {

y tal vez en otras no esté ninguno de los dos, si es así sólo agrégalo los siguientes códigos:

Estilo 1



Código

blockquote {margin: 1em 3em; color: # 999; border-left: 2px solid # 999; padding-left: 1em;}

Estilo 2


Código

blockquote {margin: 1em 3em; padding: .5 em 1em; border-left: 5px sólida # fce27c; background-color: # f6ebc1;} blockquote p {margin: 0;}

Estilo 3


codigo

blockquote {margin: 1em 2em; border-left: 1px dashed # 999; padding-left: 1em;} blockquote p: first-letter {float: left; margin: 0.2 0.3 em em em 0,1 0; font-family: "Monotype Corsiva "," Apple Chancery ", la fantasía; font-size: 220%; font-weight: bold;} blockquote p: first-line {font-variant: small-caps;}


A diferencia de otras citas este estilo tiene una opción de la primera letra en negrita.

Estilo 4


Código


blockquote {
background-color: # 666;
color: # FFF;
font-weight: bold;
padding: 10px;
-Moz-border-radius: 5px;
-Webkit-border-radius: 5px;}
Estilo 6


Código

blockquote {
background-color: # 666;
color: # FFF;
padding: 15px;
margin: 1em 40px;
-Moz-border-radius-topLeft: 15px;
-Webkit-border-top-left-radius: 15px;
-Moz-border-radius-topright: 15px;
-Webkit-border-top-derecha-radio: 8px;
-Moz-border-radius-bottomleft: 15px;
-Webkit-border-bottom-left-radius: 15px;}



Los blockquotes anteriores se proporcionan por CSSNewbie

viernes, 13 de enero de 2012

Traductor flotante con jQuery en Blogger



Nota: para buscar algún código en especifico mas facil y rapido presiona "Ctrl +F"

En esta oportunidad creé un script que tuviese la propiedad de ser flotante y animado a base de jQuery.


Puedes ver trabajando el script en este blog de pruebas




¿Cómo añadirlo en Blogger?

Paso 1: Añadiendo jQuery:
Importante: Si tienes jQuery instalado en tu plantilla no hará falta volverlo a añadir.

En ''Diseño | Edición HTML'' selecciona ''Expandir plantillas de artilugios''. Busca la siguiente línea:

]]></b:skin>


Debajo de esta, pega el siguiente código:

Paso 2: Añadiendo los valores y atributos del script:


Ahora busca la siguiente sección:
</head>
Arriba de esta, pega el siguiente código:


Paso 3: Añadiendo los estilos y flotaciones:


Ahora busca la siguiente línea:
]]></b:skin>
Debajo de ésta pega el siguiente fragmento CSS:



Guarda todos los cambios y listo.

Paso 4: Añadiendo el gadget:


Ahora en ''Diseño | Elementos de la página'' agrega un gadget ''HTML/Javascript'', en el cual deberás pegar el siguiente código:




Consideraciones:


  • Si el traductor se ve sobrepuesto o muy lejos, cambia el siguiente atributo:
margin-left: 251px;
Un valor mayor o menor hará que el gadget aumente el margen o disminuya.

  • Si deseas que el traductor aparezca a la izquierda, simplemente utiliza un valor negativo, es decir:
margin-left: -600px;
Recuerda que ninguna plantilla es igual a otra, por lo que deberás setear manualmente el valor para darle una mejor ubicación.


Crear un sistemap (mapa del blogs) o tabla de contenido

En este tutorial haremos un sistemap (mapa del sitio) en nuetro blogs donde  muestra todas las categorías de nuestro blog con sus respectivas entradas ahorra mucho tiempo a tus lectores a la hora de buscar el contenido, también le muestra a los visitantes si son mensajes nuevos o antiguos

Para poder  ver un ejemplo  de como queda, puede visitar nuetro Mapa del Sitio


Bueno ahora pasemos a ponerlo en nuestros blog:


1.- Nos vamos a Diseño -> Edición de HTML

2.-Buscamos ]]></b:skin>

3.- Justo antes pegamos este código:




MODIFICAMOS #9dc2e7 y #438cd2 que es el color de tabla cuando muestra las entradas


4.- Guardamos la Plantilla

5.- Vamos a crear una Página nueva

6.-Ponemos un título a nuestra página tabla de contenido,índice, la que ustedes deseen.

7.-En la Edición de HTML pegamos este código:






ahora solo publicamos la pagina y nos quedara algo asi












Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...