Como Añadir la Letra Mayuscula Agrandada al incio de una entrada en tu blog

En este articulo te mostrare como añadir la letra mayuscula agrandada al incio de una entrada en tu blog de blogger dandole un estilo distinto y llamativo ,decorativo a el contenido de tu blog.Es conocodo en ingles como "Drop Cap".Como se logra este efecto en tu articulo,es sencillo se implementa el uso de codigo de diseño Css.Como ejemplo tienes la siguiente imagen.


Si puedes ver la letra A inicial de el parrafo en la imagen es agrandada y alineada al resto del contenido.Vamos a seguir estos pasos simples:
 1.Entra en tu cuenta de blogger>> Deseño >> Editar HTML

2. Encuentra la etiqueta    ]]></b:skin>usando Ctrl+F

3. Pega entonces el codigo de abajo antes de la etiqueta ]]></b:skin> 

.upperletter:first-letter { float: left;
display: block;
font-family:Georgia;
font-size: 60px; 
color:#0033CC;
margin:0px 5px 0 0;
padding:0 0 0 10px; }

4. Luego guarda tu plantilla

5.Ahora  Cuando vayas a escribir un articulo ,puedes usar este codigo y añadir el texto a este.

<div class='upperletter'> Tu Texto Va Aqui... </div>

6. Publica finalmente tu articulo, te saldra con la letra inicial agrandada o en Mayuscula.

Nota:Puedes personalizar el tipo de letra a usar cambiando Georgia; por su tipo de letra favorito y el tamaño de su letra 60px; por el tuyo .Que lo disfrutes.

Read More

Somete Sitio Web o Blog A Mas De 120 Motores de Busqueda Con Un Solo Click

 Hola Amigos! Search Engine Optimization es muy importante si deseamos mas visitas para nuetro blog o pagina web.Cuando los usuarios de la Internet usan los motores de busqueda para conseguir la informacion,la realidad es que existen una lista enorme de motores de busqueda disponibles en la Internet.


Que representa esto para los dueños de blogs que si sometes tu blog a estos motores de busqueda uno a uno seria una tarea bastante ardua que consume bastante de tu tiempo.Pero no tiene que ser asi si te brindo una herramienta util para que sometas tu blog  o website a 140 motores de busqueda solo con un click.

Como Someter tu blog:

• Entra en este sitio web de Posicionate en primer lugar en linea y escribe la direccionde tu sitio web o URL y un Id de Email  (Consejo:No escribas tu email principal podrias recibir mensajes no deseados).
• Antes de sometert, chequea que este en linea y funcionando.(no bajo construccion).
  
• Puedes no seleccionar aquellos motores de busqueda que no desees someter tu website.
  
• Para finalizar Presiona el boton de Someter y espere hasta que el proceso sea completado.
• Algunos motores de busqueda pueden requerir una confirmacion de e-mail ,chequea el email para confirmarlo.
  

Nota: Despues que sometas tu sitio web o blog espera a que se optimize,si repites este proceso antes de 4 semanas seras rechazado.

Read More

Como Transmitir Actividad o Feed de You Tube en Blogger

En este articulo estare mostarandole un sencillo truco para transmitir tu contenido de pagina de video YouTube.Este es un magnifico widget para tu blog. Este mostrara tu actividad o fuente de contenido de YouTube en tu blogger.Siga estos pasos para añadirlo a tu blog.

1. Entra en tu blogger  Diseño > Elemento de Pagina.

2. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

3.Ahora pegue el siguiente codigo.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
    <style type="text/css">
    div.ytc {clear:both;padding:5px;font-size:11px;}
    div.ytc.odd {background-color: #eee;}
    div.ytc_thumb {position:relative;float:right;margin-left:4px;line-height:1;}
    div.ytc_thumb img {width:69px;height:52px;border:1px solid #888;}
    div.ytc_title {font-weight:bold;}
    </style>
    <script type='text/javascript'>
    var ytfUserName = "Nombre de Usuario de YouTube";
    var ytfMaxResults = 8;
    var ytfAllow = "";
    var ytfDisallow = "";
    var ytfEmpty = "No entries";

    $(document).ready(function() {
      $.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=58c841d14337ba4fbf693abd9701dc49&_render=json&max-results="+ytfMaxResults+"&allow="+ytfAllow+"&disallow="+ytfDisallow+"&user="+ytfUserName+"&_callback=?", function(response) {
        var htm = "";
        for(var i=0;i<response.count;i++) {
          var item = response.value.items[i];
          htm += '<div class="ytc';
          if(i%2 == 1) htm += ' odd';
          htm += '"><div class="ytc_thumb"><a target="_blank" href="' + item.link + '"><img title="' + item.title + '" src="' + item.thumb + '"/></a></div>';
          htm += '<div class="ytc_title"><a target="_blank" href="' + item.link + '">' + item.title + '</a></div>';
          htm += '<div class="ytc_description">' + item.description + '</div><div style="clear:both;"></div></div>';
        }
        if(htm == "") htm = ytfEmpty;
        $("#ytfeed").html(htm);
      });
    });
    </script>
    <div id="ytfeed">Descargando...</div>

Despues de pegar el codigo de arriba
* Reemplace Nombre de Usuario de YouTube con el nombre de usuario de YouTube
4. Para finalizar guarde el HTML/Javascript'.

    Todo esta finalizado...

Read More

Añadir Estilo a Power by Blogger

En este tutorial te mostrare como remover " powered by blogger " de tu blog de blogger. Compartire contigo un diseño personalizado de la frase "powered by blogger" espero que te guste anadiendolo a tu blog. Como podras ver en la foto animada abajo este cambia de color gris a estilo o color mahon o jeans cuando pones el cursor sobre estos . Vamos a empezar a modificarlo solo sigue estos pasos.
Ejemplo:

Existen dos pasos para modificar  Powered By Blogger
Paso 1 : Puedes remover  Powered By Blogger  por defecto
Paso  2 :Puedes Añadir un Nuevo estilo de Powered By Blogger

Eso depende de ti si quieres remover la frase powered by blogger de tu blog Solo sigue el Paso 1 y si deseas añadirle estilo a  Powered By Blogger Solo sigue el Paso 2.

Paso para Remover la frase por defecto Powered By Blogger 

 Paso 1
 

1. Entra en tu cuenta de Blogger.

2. Selecciona Plantilla 

3.Da Click en  Personalizar Plantilla >> Avanzado >> Añadir CSS

 

4. Pegue el codigo de abajo en Añadir caja de Css . 

#Attribution1 {display: none;}

5. Luego dale al boton naranja Aplicar al Blog . Hecho!

 Paso Para Añadir Estlio Jeans a Frase Powered By Blogger 

Paso 2

1. Entra encuenta Blogger

2. Da Click en Diseño.

3. Selecciona añadir un gadget.

4. Selecciona luego HTML/JAVASCRIPT.

 5. Copia el codigo de abajo y pegalo dentro de HTML/JAVASCRIPT  .

 <style>
.myButtonLink { display: block; width: 120px; height: 120px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUBQLoGwN8WyxDXRTthtCDf_SNKBwPmyMl5_6RAKM0HEeVB9YYbj3ZvCZgmY2kjnNOnbnIA0RpKkusN0mVci5BdbPJZ81YPcM7tjfJi_wxL01wCQqyjfcMaqiSkR6ZBxrpw2xZTpLdj0/s1600/1.png') bottom; text-indent: -99999px;
}
.myButtonLink:hover {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3rIAtrNCbw4XUwylNi7QpglctXVP4nQrZU0Gilym5bcrYsrjvg8aQTT7_Xbg3PgCQxPjhRHmVQwrzBlB3QR3YGKPYK7jKcq1_GbtthHg08f7RCUOe8VubVpc2-lVmvD6905WzEPDimA/s1600/1326992718_blogger.png') bottom;
height: 123px;
}
</style>
<a class="myButtonLink" href="http://www.blogger.com">blogger</a>

6. Añade el Title & Guarda el  Widget 

Hecho habras dado estilo a la frase de Powered by Blogger!

Read More

Añadir Efecto de Esquina Doblada A Tus Citas Con css3 en Blogger

 En este dia te traigo un tutorial muy sencillo sobre como añadir una esquina doblada a un elemento  en la pagina de tu sitio o blog.Este efecto de doblado de una esquina es logrado usando el codigo de CSS3 sin utilizar ninguna imagen.Este atractivo efecto trabaja en la mayoria de los navegadores de internet y esta diseñado para ser compatible con la apariencia de tu pagina.

Estare mostrandole ejemplos recreado el estilo de notas,puedes utilizarlo para darle forma y color a tus citas a la hora de escribir un articulo.

Ejemplos:

Agua

Agua

Agua

Agua

Agua

Sigue los siguientes pasos para implementarlo en tu blog de blogger.
1.Entra en tu cuenta de blogger
2.Busca donde dice Plantilla luego selecciona donde dice Editar Html

3.Busca la siguiente etiqueta </b:skin>
4.Copia y pega el codigo de abajo antes de la etiqueta </b:skin>

.note {
    position:relative;
    width:480px;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.note.yellow {background:#F7F41B;}
.note.yellow:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}

/* Version De Esquinas Redondas
 * Todos los navegadores modernos pueden producir estos efectos con un simple pseudo-elemento.
 * Sin Embargo todos tienen un bugs (principalmente con el  border-radius) que lo hace un poco tricky.
 * Lo que puedo decir este es el unico metodo por el momento.
 * No puedes usar este metodo para un efecto simple debido a que Opera 11 solamente mostrara fondo
 * atraves de fondo transparente si hay un border-radius aplicado.
 */

.note.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

.note.rounded:before {
    border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
    border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
}

.note p {margin:0;}
.note p + p {margin:1.5em 0 0;}

Nota:Pudes Añadir o cambiar colores de fondo o del texto de estas notas de arriba segun tu gusto.Por defecto el color es verde.

5.Guarda la plantilla  y luego cuando vayas a escribir un articulo o entrada en tu blog y lo vas a integrar dentro de este cambia en el editor de entradas de Redactar a Html y incluye cualquiera de las siguientes diviciones.

<div class='note'>Agua</div>
<div class='note red'>Agua</div>
<div class='note blue'>Agua</div>
<div class='note taupe'>Agua</div>
<div class='note yellow'>Agua</div>
Nota:Puedes escojer que color mostrar a tu gusto y añadir texto a tu gusto sustituyendo la palabra Agua

Ahora tu y los visitantes disfrutaran de las Notas o Citas en tu articulo con lindo diseño y atractivo.

Read More

Redirigir un Blog De Blogger A Una Nueva Url o Blog

En este articulo señalare el asunto de redirigir a tus visitantes a otro blog o otra Url.Pueden existir multiples razones para redirigir a tus visitantes a otro blog o direccion de una pagina web.Te mostrare un simple truco para enviar tu blog de blogger a otro blog o direccion de internet.Puedes añadir a la vez un timer a este redireccion si deseas y aplicaremos este super truco con el uso de un simple codigo.

Como Redirigir tu Blog de Blogger Blog a otra direccion URL de internet?

Chequea Buscadores de Bordes Redondos
Sigue estos pasos cuidadosamente :

1.Entra a tu cuenta de blogger > Diseño > Editar HTML.
2.Descarga una copia de tu plantilla.
3.Luego encuentra la etiqueta <head> en tu plantilla y pega la siguiente etiqueta.

<meta content='5;url=http://www.TU-Nueva-URL.com/' http-equiv='refresh'/>

4.Luego que pegues la etiqueta anterios ahora personalizala:

Nota:El numero "5" es el tiempo que tardara en redirigir.Puedes cambiar estecomo deseas. Luego reemplaza http://www.Tu-Nueva-URL.com/ con la URL donde deseas redirigir tus visitantes.

5.Para finalizar Guarda tu plantilla.

 Chequea Como Utilizar Navegador Web Como Editor

Ahora tu blog sera redirigido a una nueva direccion de pagina web deseada o Url.

Read More

Como Cambiar La URL De Tu Dominio De Blogspot De Blogger

En este articulo te mostrare el super truco de como cambiar la direccion URL de tu blog de blogspot de blogger.Tal vez hayas pensado hace un tiempito como hacer este cambio debido a muchas factores o solo por dar un cambio al tema de tu blog.La respuesta es que si puedes hacerlo si asi deseas.

Ejemplo si tienes un blog con nombre de MiBlog.blogspot.com y deseas cambiarlo por Ciudad.blogspot.com.
Chequea Te estara Costando Visitantes el Nombre de Dominio

Para hacer el cambio de nombre de dominio en blogger solo sigue los siguientes pasos.

Guia Para Cambiar la la direccion URL de Blogspot en Blogger

1. Entra a la cuenta de Blogger.com
2. Ahorra da Click boton de editar el cual aparece al lado del nombre del Blog  y selecciona Configuracion
3. En la pestaña basica  (Abierta por Defecto) veras 3 categorias Basico, Publica y Permisos.
4. Debajo de la Configuracion Publica da click editar texto cual esta al lado de la URL de tu blog.
   
   
   Chequea Que Significa URL
5. Escribe el nombre de tu dominio deseado y da click en Guardar. Veras una ventanilla de confirmacion mostrarse que dice que tu configuracion deseada ha sido guardada.

Read More

Cómo Agregar CSS (Cascading Style Sheets) en blogger

 Cómo agregar CSS (Cascading Style Sheets) en blogger / blogspot blog? Amigos en algún momento has deseado agregar código CSS en tu blog, pero te confunde  cómo agregar código CSS en blogger pues podrias  no estar familiarizado con HTML.

Así que amigos les ensenare el super truco dire cómo agregar los codigos de Cascading Style Sheets (CSS) en el blogger de manera fácil.
Chequea Articulo Como Añadir Menu Css a Blog de Blogger

Tienes dos maneras de agregar código CSS en blogger.

1.Primera opcion
Siga a continuación paso para añadir CSS en blogger.

1. Conectarse a su cuenta de blogger

2. Selecciona tu Blog.

3. Haga clic en Plantilla (Ver Imagen de ayuda)

4. Después de 3 º paso Haga Click en opcion de personalizar. (Ver Imagen)

5.Después de hacer clic en la opción de personalizar una nueva página se abrirá. (Ver más abajo la imagen de demostración que la página estará abierta)

6.Ahora haga clic en el botón Opciones avanzadas> después de esto, haga clic en la opción Añadir CSS ya ha pasado su código CSS en el campo de texto en blanco y por último haz clic en el botón Aplicar a blog. (Ver imagen Demo abajo)

 Esta es primera opción para agregar código CSS.


II.Segunda Opcion para aplicar codigos de Css en Plantilla de Blogger.

 Siga a continuación paso para añadir CSS en blogger.

1. Conectarse a su cuenta de blogger

2. Selecciona tu Blog.

3. Haga clic en Plantilla (Ver Imagen de ayuda)
 
4. Después de 3 º paso Haga Click en opcion de personalizar. (Ver Imagen)

5. Proximo paso encuentre el codigo de abajo

]]></b:skin>

6. Ahora añada el codigo CSS antes de la etiqueta  ]]></b:skin>
Ejemplo:

7. Ahora guarde la plantilla y ya habras hecho este super truco y haz finalizado.

Chequea Articulo Como Añadir Badge Con Efecto Css a tu Blog de Blogger

Read More

Widget de Entradas Recientes Para Blogger

En este tutorial te enseñare el super truco de deslizador de entradas recientes en tu blog de blogger.Digamos que tienes un numero considerable de entradas en tu blog o si desea mostrar una lista de tus libros favoritos ,pero tienes poco espacio en la barra del lado.Este widget sera de gran ayuda parea ti. Este articulo explicacomo anadir un auto deslizador  (marquee) de las entradas recientes.Este Widget lucira muy bien en tu  blogspot.

Este es similar a la muestra de tus entradas recientes en tu barra del lado en tu plantilla,pero este widget tendra en particular un efecto marquee .Ahora si deseas mostrarlo en tu plantilla de blog arriba o abajo en tu blog.Sigue las siguientes instrucciones.


Para verlo en vivo de el siguiente boton:
DEMO

 Como Instalar este Widget De Auto Desplazamiento De Entradas Recientes.

1.Entra en tu Blogger >>Diseño >> Añadir un Gadget >> Selecciona  HTML/JavaScript

2.Copie el siguiente codigoy peguelo dentro de  HTML/JavaScript

<script type='text/javascript'>
var w2bWidth="100";
var w2bScrollAmount="10";
var w2bScrollDelay="50";
var w2bDirection="left";
var w2btargetlink="yes";
var w2bnumPosts="10";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="http://s24.postimg.org/uua6yc4z5/bola.gif";
var w2bfontsize="16";
var w2bbgcolor="ffffff";
var w2blinkcolor="161cde";
var w2blinkhovercolor="db21b3";
</script>
<a href="http://ciudadblogger.info/" target="_blank" title="Super Trucos de Blogger"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://ciudadblogger.info/" target="_blank" title="Super Trucos de Blogger"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a href="http://ciudadblogger.info/" target="_blank" title="Enlace Retroceso Gratis"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script type='text/javascript' src='http://24work.ucoz.com/24work-blogspot/scrolling-rece/test/24work-rpscroller.js' ></script>
<script type='text/javascript' src="http://ciudadblogger.info/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>

Ahora Reemplace la direccion url http://ciudadblogger.info con la direccion o Url de tu blog.


Ahora da click en Guardar
Nota:- Selecciona imagen Image Bullet o Icon que sea transparente de Fondo y pequeña en tamano.
 Pudes solamente modificar el codigo de  color rojo (variables)de acuerdo a tus especificaciones, por ej. en el caso de "var w2bScrollDelay", baja el numero, o aumenta la velocidad.

Read More

Como Corregir el Error 404 en Blog De Blogger

En el tutorial de hoy aplicaremos el super truco de redirigir error 404 a la pagina principal de el blog de blogger. Cuando un usuario va a una direccion o URL que no existe en tu blog, Blogger mostrara este mensaje Error 404 (Pagina no Encontrada) en la parte de arriba de tu entrada o articulo que dice asi:
"Lo sentimos, la pagina que estabas buscando en este blog no existe."

Eso no es lo que queremos mostrar verdad.Antes que el usuario le de al boton de ir atras o cierre la pagina y tal vez no regrese mas,podria redirigirlos a la pagina principal o la pagina de tu seleccion donde el chance que el lector se quede son mayores.

Una de las formas de redirigirlos es usando meta refresh, pero el problema con este metodo es que rompe la navegacion (esta no regresa  a la pagina original cuando das a boton de retroceso). El mejor metodo es usar Javascript, y creo que he encontrado la forma mas simple de hacerlo en Blogger.
Es importante incluir estos 2 componentes en la redireccion.

• Mensaje de Redirigir - para informar que la pagina no existe y que el usuario va a ser redirigido.Fallar en hacer esto el lector  se sentira enganado cuando la informacion que buscaba no se encuentra  en la pagina (pagina principal). Aqui un Ejemplo:
  "Lo Sentimos, la pagina que buscabas en este  blog no existe. Seras redirigido a la pagina principal ya mismo.”
  
• Tiempo de demora - para proveer suficiente tiempo al usuario a leer el mensaje antes de ser redirigido.

Basado en el ejemplo anterior, asi es como anadiras un nuevo mensaje y el script para redirigir a tu blog:

1. Vaya a Configuracion > Preferencia de Busqueda > Mensaje de página no encontrada personalizado(debajo de Errores and redireccionamiento).
2. Da Clic Editar y pega esto:

   Lo sentimos,la pagina que estabas buscando en este blog no exist.Seras redirigido a la pagina principal en un instante.
   <script type = "text/javascript">
   //Blogger 404 Redireccion v1.0 por GreenLava(ciudadblogger.info)
   BSPNF_redirect = setTimeout(function() {
   location.pathname= "/"
   }, 6000); 
   </script>

   
   
   
   • La parte de arriba es el mensaje. Lo puedes cambiar libremente.
   • Para redirigir a una pagina/sitio distinto a la pagina principal, reemplace pathname con href, y / con la URL de la pagina/sitio.
   • El numero 6000 es el retraso en milisegundos. Puedes cambiarlo a cualquier valor que pienses apropiado .Zero significa redireccion inmediata (sin demora).
3. De click a guardar cambios.

Para probar simplemente escriba cualquier URL que no exista en tu dominio/subdominio (ejemplo: http://Tublog.blogspot.com/fgzfgd) y mire si el nuevo mensaje de Pagina No Encontrada aparece, seguido por redireccion despues de 6 segundos.

Read More

Deslizador De Iconos Social Con Efecto Hover Para Blogger

 Hoy les mostrare el truco como anadir un maravilloso Deslizador Iconos Social con efecto de Hover para tu blog de blogger. Estos botones tienen un atractivo efecto de animacion al poner el cursor sobre los mismos.

Estos lindos botones estan hechos con codigo de CSS sin tener que utilizar el codigo de JavaScript. Este codigo a la vez ha sido optimizado para que descargue mas rapido en la pagina.Estos botones son atractivos y sus efectos lo hacen mas asombroso.Cuando pases el cursor sobre los mismos podras ver como se deslizan y cambia la imagen de los botones. Para verlo en accion aqui abajo.

• Facebook
• Twitter
• Google plus
• Rss

Una vez veas la demostracion del mismo seguimos con el tutorial para anadir este widget a tu blog de blogger .

1.Entra en tu cuenta de blogger selecciona el blog donde instalarlo

2.Ir a Diseno>>Añadir un Widget

3.Selecciona HTML/JavaScript y pega el siguiente codigo.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4e-xh0LoZCZ_7fqkpGXytYDRKu-hDd5xng-Upw_BxROiAPbA3gUXxtGUAADn2Z8De-QcO0VxFmm79dsSdi7r2SCtzELcwUgCDOtBdrg2qrhRJ_nkABFQ3zEX4sahtLVBLiFpi0d1xpQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4e-xh0LoZCZ_7fqkpGXytYDRKu-hDd5xng-Upw_BxROiAPbA3gUXxtGUAADn2Z8De-QcO0VxFmm79dsSdi7r2SCtzELcwUgCDOtBdrg2qrhRJ_nkABFQ3zEX4sahtLVBLiFpi0d1xpQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIyaEbXI3K1LIWj-xf2tHDHIUnG7pKntx22aVwkDZUOzGZnArl9eq7-doWHmuRh26cnBo80Yp5M6pq_DgKO9GiFFqYieK5s_MDbPAy75C2eW_ohxQG7zDE0J6TkRC7cvdeojzw8DI2g/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMIyaEbXI3K1LIWj-xf2tHDHIUnG7pKntx22aVwkDZUOzGZnArl9eq7-doWHmuRh26cnBo80Yp5M6pq_DgKO9GiFFqYieK5s_MDbPAy75C2eW_ohxQG7zDE0J6TkRC7cvdeojzw8DI2g/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw69f6w-gnxAGlRkFaB3X5JuRUELnxxaR7bf36IBq-VOHEugkik2dEQ3jhpeBJ6dWvwpSkuZgZRpLD2BrXE8oo123VJOf9p0dtomLowTK-yJjm-ueRZk1sg80HXe_2syIAnp7E7wYkrw/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw69f6w-gnxAGlRkFaB3X5JuRUELnxxaR7bf36IBq-VOHEugkik2dEQ3jhpeBJ6dWvwpSkuZgZRpLD2BrXE8oo123VJOf9p0dtomLowTK-yJjm-ueRZk1sg80HXe_2syIAnp7E7wYkrw/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYQmh8u7d0PlZvJznN-XXlNpXi0LvrS6GkQ_WxaqW0f3RNfGf2L_taevj-mRQwnGYqsHcJdAVKYMpdKQLJfyg9V37wGnlLq9Uz9-yce_A6MrbU9rTGNFkVLlBcveqO2b7YxC214Cvvg/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYQmh8u7d0PlZvJznN-XXlNpXi0LvrS6GkQ_WxaqW0f3RNfGf2L_taevj-mRQwnGYqsHcJdAVKYMpdKQLJfyg9V37wGnlLq9Uz9-yce_A6MrbU9rTGNFkVLlBcveqO2b7YxC214Cvvg/s1600/twitter.png) no-repeat 0 0}
</style>

4.Despues de cambiar el codigo cambia # por tu URL deseada y guarda el widget. Finalmente guarda la plantilla.

Todo esta finalizado. Ahora usted y los visitantes podran ver este asombroso deslizador  iconos  social con efecto animado en tu blog de blogger.

Read More

Efecto Multicolor Para Enlaces De Blogger / Blogspot

En este tutorial mostrare como crear enlaces de textos en distintos colores. Tal vez te gustaria usar multiples colores para los enlaces de textos en lugar de usar un solo color de enlace en la pagina entera.

Este se activa al poner el cursor sobre el titulo de enlaces flasheando en distintos colores de arcoiris y el fondo como fuegos artificiales o destellos de estrellas.Este widget lo puedes personalizar especificando el color de tus enlaces en la pagina entera con el atributo VLINK LINK y dentro de la etiqueta del cuerpo.
Ejemplo:para ver este widget en vivo da click en imagen una vez en la pagina pon tu cursor sobre titulos o enlaces y los veras cambiar de color.

Cómo agregar varios estilos a los enlaces

¿Quieres hacer que un enlace de tu blog  parpadee colores del arco iris cuando el puntero es puesto sobre los mismos? Es muy fácil

Ahora vamos a empezar a añadir este widget a tu blog de blogger.
 1. Iniciar sesión en tu cuenta de Blogger Account>>Diseño y haga clic en Agregar un  Gadget.
 
 2. Despues de dar click en enlace de Anadir un Gadget una ventanita se abrira con una lista de gadgets.

 3.Selecciona  la opcion HTML/JavaScript dando click en la cruz azul del gadget.

4. Selecciona 'HTML/Javascript' y anade el codigo de abajo.

5.Luego de Click en Guardar 'JavaScript' y Listo.

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)

window.onerror=new Function("return true")

var objActive; // The object which event occured in

var act = 0; // Flag during the action

var elmH = 0; // Hue

var elmS = 128; // Saturation

var elmV = 255; // Value

var clrOrg; // A color before the change

var TimerID; // Timer ID

if (document.all) {

document.onmouseover = doRainbowAnchor;

document.onmouseout = stopRainbowAnchor;

}

else if (document.getElementById) {

document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

document.onmouseover = Mozilla_doRainbowAnchor;

document.onmouseout = Mozilla_stopRainbowAnchor;

}

function doRainbow(obj)

{

if (act == 0) {

act = 1;

if (obj)

objActive = obj;

else

objActive = event.srcElement;

clrOrg = objActive.style.color;

TimerID = setInterval("ChangeColor()",100);

}

};

document['write']('<a href="http://24work.blogspot.com/" 
target="_blank" title="Blogger Tips and Tricks"><img 
src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" 
border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
></a><a href="http://24work.blogspot.com/" target="_blank" 
title="Latest Tips For Bloggers"><img 
src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
></a><a href="http://24work.blogspot.com/" target="_blank" 
title="Blogger Tricks"><img src="https://bitly.com/24workpng" 
alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; 
right: 0%;" ></a>');

function stopRainbow()

{

if (act) {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

}

function doRainbowAnchor()

{

if (act == 0) {

var obj = event.srcElement;

while (obj.tagName != 'A' && obj.tagName != 'BODY') {

obj = obj.parentElement;

if (obj.tagName == 'A' || obj.tagName == 'BODY')

break;

}

if (obj.tagName == 'A' && obj.href != '') {

objActive = obj;

act = 1;

clrOrg = objActive.style.color;

TimerID = setInterval("ChangeColor()",100);

}

}

}

function stopRainbowAnchor()

{

if (act) {

if (objActive.tagName == 'A') {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

}

}

function Mozilla_doRainbowAnchor(e)

{

if (act == 0) {

obj = e.target;

while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {

obj = obj.parentNode;

if (obj.nodeName == 'A' || obj.nodeName == 'BODY')

break;

}

if (obj.nodeName == 'A' && obj.href != '') {

objActive = obj;

act = 1;

clrOrg = obj.style.color;

TimerID = setInterval("ChangeColor()",100);

}

}

}

function Mozilla_stopRainbowAnchor(e)

{

if (act) {

if (objActive.nodeName == 'A') {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

}

}

function ChangeColor()

{

objActive.style.color = makeColor();

}

function makeColor()

{

// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB

if (elmS == 0) {

elmR = elmV; elmG = elmV; elmB = elmV;

}

else {

t1 = elmV;

t2 = (255 - elmS) * elmV / 255;

t3 = elmH % 60;

t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {

elmR = t1; elmB = t2; elmG = t2 + t3;

}

else if (elmH < 120) {

elmG = t1; elmB = t2; elmR = t1 - t3;

}

else if (elmH < 180) {

elmG = t1; elmR = t2; elmB = t2 + t3;

}

else if (elmH < 240) {

elmB = t1; elmR = t2; elmG = t1 - t3;

}

else if (elmH < 300) {

elmB = t1; elmG = t2; elmR = t2 + t3;

}

else if (elmH < 360) {

elmR = t1; elmG = t2; elmB = t1 - t3;

}

else {

elmR = 0; elmG = 0; elmB = 0;

}

}

elmR = Math.floor(elmR).toString(16);

elmG = Math.floor(elmG).toString(16);

elmB = Math.floor(elmB).toString(16);

if (elmR.length == 1) elmR = "0" + elmR;

if (elmG.length == 1) elmG = "0" + elmG;

if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;

if (elmH >= 360)

elmH = 0;

return '#' + elmR + elmG + elmB;

}

//]]>

</script>

6.Ahora da Click Guardar

Todo esta listo ve chequea tu pagina y pon el cursor de el mouse sobre algun enlace o link para que veas como cambia de color.

Customize And Demo.

Read More

Como Añadir Panel De Imagenes Deslizables En Blogger

Hoy le mostraremos el super truco de cómo crear unos paneles de imágenes deslizantes limpias, con sólo CSS3. La idea es utilizar las imágenes de fondo de los paneles y animarlos al hacer clic en una etiqueta. Vamos a utilizar los botones de opción con etiquetas y enfocarnos en los respectivos paneles con el interruptor general de hermanos.Este es uno muy actrivo y facil de implementar en tu pagina web o blog de blogger.
Ejemplo:Para verlo en vivo da click en la Imagen.

Pasos Para implementar este Deslizador de Imagnes Con Css a tu blog de blogger.
1.Entra en tu cuenta blogger

2.Ir a Diseno

 3.Selecciona Html/Javascript

4.En espacio provisto pega el siguiente codigo.

<section class="cr-container">           
 
    <!-- radio buttons and labels -->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
    <label for="select-img-1" class="cr-label-img-1">1</label>
 
    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2">2</label>
 
    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3">3</label>
 
    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4">4</label>
 
    <div class="clr"></div>
 
    <!-- panels -->
    <div class="cr-bgimg">
        <div>
            <span>Slice 1 - Image 1</span>
            <span>Slice 1 - Image 2</span>
            <span>Slice 1 - Image 3</span>
            <span>Slice 1 - Image 4</span>
        </div>
        <div>
            <span>Slice 2 - Image 1</span>
            <span>Slice 2 - Image 2</span>
            <span>Slice 2 - Image 3</span>
            <span>Slice 2 - Image 4</span>
        </div>
        <div>
            <span>Slice 3 - Image 1</span>
            <span>Slice 3 - Image 2</span>
            <span>Slice 3 - Image 3</span>
            <span>Slice 3 - Image 4</span>
        </div>
        <div>
            <span>Slice 4 - Image 1</span>
            <span>Slice 4 - Image 2</span>
            <span>Slice 4 - Image 3</span>
            <span>Slice 4 - Image 4</span>
        </div>
    </div>
 
    <!-- titles -->
    <div class="cr-titles">
        <h3>
            <span>Serenidad</span>
            <span>Lo Que Vienes Sonando</span>
        </h3>
        <h3>
            <span>Aventura</span>
            <span>Donde la Diversion Comienza</span>
        </h3>
        <h3>
            <span>Naturaleza</span>
            <span>Experiencias Inolvidables</span>
        </h3>
        <h3>
            <span>Serenidad</span>
            <span>Cuando el Silencio Toca la Naturaleza</span>
        </h3>
    </div>
 
</section>


<style>
.cr-container{
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    border: 20px solid #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
    font-style: italic;
    width: 150px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    line-height: 32px;
    font-size: 24px;
    float:left;
    position: relative;
    margin-top: 350px;
    z-index: 1000;
}
.cr-container label:before{
    content:'';
    width: 34px;
    height: 34px;
    background: rgba(130,195,217,0.9);
    position: absolute;
    left: 50%;
    margin-left: -17px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
    z-index:-1;
}
.cr-container label:after{
    width: 1px;
    height: 400px;
    content: '';
    background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    position: absolute;
    bottom: -20px;
    right: 0px;
}
.cr-container label.cr-label-img-4:after{
    width: 0px;
}
.cr-container input{
    display: none;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
    color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
    background: #fff;
    box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-bgimg{
    width: 600px;
    height: 400px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.cr-bgimg div{
    width: 150px;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
}
.cr-bgimg div span{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: -150px;
    z-index: 2;
    text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
    background-image: url(http://hdwallpaperplace.com/wp-content/uploads/2013/05/audi_a7_wallpaper-_hd-600x400.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
    background-image: url(http://www.autocarbike.com/wp-content/uploads/2012/11/Wald-International-Lexus-CT-200h-black-bison-tuning-wallpaper-hd-2-600x400.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
    background-image: url(http://1.bp.blogspot.com/-AoztW8x7tMo/UZDwu75XhJI/AAAAAAAAENM/sy9RIdkZpOA/s1600/Acura-NSX-Concept-2013-600x400.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
    background-image: url(http://bestwallpaper2013.com/wp-content/uploads/2013/05/Toyota-Supra-2013-Toyota-Supra-HD-Wallpaper-600x400.jpg);
}
.cr-bgimg div:nth-child(1) span{
    background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
    background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
    background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
    background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
    animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
    0%{
        left: 0px;
    }
    100%{
        left: 150px;
    }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
    transition: left 0.5s ease-in-out;
    animation: none;
    left: 0px;
    z-index: 10;
}
.cr-titles h3{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 10000;
    opacity: 0;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 70px;
    display: block;
    letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
    letter-spacing: 0px;
    display: block;
    background: rgba(104,171,194,0.9);
    font-size: 14px;
    padding: 10px;
    font-style: italic;
    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
    opacity: 1;
}


</style>

4.Guarda la Html/Javascript y listo.
Notas:
 A.Puedes acomodar este gadget debajo de la entrada o en una entrada que desees y reemplaza imagenes que estan sombredas en amarillo que son 4 con las tuyas solo sutituye Ejemplo:

http://hdwallpaperplace.com/wp-content/uploads/2013/05/audi_a7_wallpaper-_hd-600x400.jpg);
con la Url de tus imagenes ejemplo: http://wallpaper.com/upload.micarro_600x400.jpg.

B.Las Imagenes a sustituir deben tener un tamano de 600 de ancho por 400 de alto.

Read More

Galeria De Imagenes Con Css3 y Html Para Blog De Blogger

En este tutorial aprenderemos hacer una galeria de imagenes con Html y Css.Esta es una simple para adaptar nuestras imagenes y presentarlas a nuestros visitantes de una forma integral en area del nuestros articulos o anadirlas en un gadget en la seccion de Html/Javascript.
Para ver ejemplo en vivo da clic en boton de abajo.

Pasos a seguir para intergrar esta Galeria de Imagenes en Blog de Blogger.
1.Entra en tu cuenta de Blogger.

2.Ir a Diseno>>Anadir un Gadget

3.Selecciona Html/Javascript y pega el siguiente codigo.

<style>
bc{
float: left;
width: 150px;
height: 150px;
position: relative;
border: 1px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
bc img{
display: block;
width: 100%;
height: 100%;
-webkit-transition-property: width, height; /* we specify, what properties we need to change*/
-webkit-transition-duration: 300ms; /* we specify, with what speed it is necessary to return an image in its initial look*/
-moz-transition-property: width, height;
-moz-transition-duration: 300ms;
-o-transition-property: width, height;
-o-transition-duration: 300ms;
position: absolute;
opacity: 0.3; /* add opacity*/
cursor: pointer;
}
bc:after {
display: block;
position: absolute;
width: 100%;
height: 100%;
content: "Studio.com";
color: #eaeaea;
font-family: "Trebuchet MS";
font-size: 16px;
opacity: 0.5;
}
bc:focus img{
width: 250%;  /* we increased an image to this size */
height: 250%;
position: absolute;
opacity: 1; /* transparency is not needed */
z-index: 1; /* for a photo to enlarge over all images */
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000;  /* we add some beauty */
-webkit-transition-property: width, height; /* we decrease the image */
-webkit-transition-duration: 2s; /* we specify, with what speed it is necessary to increase an image */
-webkit-transition-delay: 0.3s; /* as a browser will process it, before enlarging a photo */
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}
bc:nth-child(4n+4) img, a:nth-child(4n+3) img{
right: 0;
} /* every fourth element starting with 3th and 4th will be enlarged from the right border of browser window */



bc:nth-child(n+9) img{
bottom: 0;
} /* all elements, starting with the ninth will begin to enlarge upwards */

-webkit-text-shadow: 0px 0px 5px #222;
-moz-text-shadow: 0px 0px 5px #222;
text-shadow: 0px 0px 5px #222;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;
.closed{
display: none;
}
bc:focus~.closed{
display: block;
}


</style>



<div align='center' class="gallery">
        <bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Dory-Finding-Nemo-3D-Background-HD-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Finding-Nemo-Dory-Disney-Background-HD-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Finding-Nemo-Dory-Marlin-Background-HD-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRavtWqKxMxvTm9ZxKj3NjRTJoktTA-80dMs4O9_KOAE4zH9Gw7" /></bc>
            <bc tabindex="1"><img src="http://www.queremospeliculas.com/wp/wp-content/uploads/2012/11/buscandonemo-peli-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://lookwallpaper.com/wp-content/uploads/2013/04/megamind-movie-wallpaper-hd-150x150.jpg" /></bc>
      
        <bc tabindex="1"><img src="http://lookwallpaper.com/wp-content/uploads/2013/04/green-lantern-movie-wallpaper-hd-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://174050363.r.dediservecdn.com/wp-content/uploads/2013/06/nemo-150x150.jpg" /></bc>
            <bc tabindex="1"><img src="http://hdwallpapersbase.com/wp-content/uploads/2013/01/Finding-Nemo-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://hotwallpaper2013.com/wp-content/uploads/2013/05/Nemo-Fish-Cartoon-Pictures-HD-Wallpaper-150x150.jpg" /></bc>
        <span class="closed">+</span>
        <span class="closed-layer"></span>  
    </div>

4.Guarde la Html/Jascript y listo.

Nota: Cambia la direccion de imagenes o URL con la de tus imagenes a tu gusto.
Para cambiar las dimensiones de ancho y alto de las imagenes solo cambie el valor :
width: 150px;
height: 150px;

Read More

Desplazamiento Noticias del Titulares Para Blogger con efecto Jquery

En este tutorial te mostare el truco de insertar una barra de Noticias .Está  se ha convertido en el requisito básico de cada blog. Para que nuestra comunidad de blogs sea mas confiable es esencial que mantengamos nuestros lectores al día y barra de noticias es la mejor manera de hacer eso.

Podemos utilizar el News Ticker  para brindar actualizaciones frecuentes para nuestro lector con sólo unos clics. Todos hemos visto muchos tickers de noticias en los blogs, que son hospedados por WordPress pero Blogger, no es conocido por tener plugins y esta es la razón por la que utilizamos los widgets de fuente externa en blogger.
Chequea Reloj Acrobatico para Blogger

Y hoy vamos a seguir la misma tendencia para agregar un desplazamiento Animado con jQuery titulado Widget de Barra de Noticias para Blogs de Blogger Blogspot.Para verlo en vivo da clic Aqui

Nombremos las Caracteristicas de este News Ticker.

     1.Fácil de integrar en un documento HTML
     2.Compatible con Internet Explorer, Firefox, Chrome y etc
     3.Completo JavaScript: ninguna plugin, no Java, ActiveX no
     4.Soporta HTML, incluyendo imágenes, links y demás etiquetas
     5.Desplazamiento suave
     6.Muy pequeño script - rápido para descargar
     7.Fácil de personalizar
     8.Detiene el desplazamiento cuando el ratón está sobre ella

Como Añadir este News Ticker en Blogger

Para insertar Desplazamiento con jQuery   deNews Ticker en Blogger solo Sigue estos pasos.
Paso # 1: Ir a Blogger.com >> Tu Blog
Paso # 2: Diseno >> Añadir un gadget
Paso 3: Selecciona Html / Javascript y pega el siguiente codigo.

<div id="TICKER" style="display:none; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; overflow:hidden; background-color:#FFFFFF; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">

<span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="Url-De-Tu-Primer-Titular"> <font color=#ffffff> <b>Tu-Primer-Titulo-Titular-Aqui</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Tu-Primera-Descripcion-Titular</b>&nbsp;

<span style='background-color:#FFAA00;'> &nbsp; &nbsp;<a href="Url-De-Tu-Segundo-Titular"> <font color=#ffffff> <b>Tu-Segundo-Titulo-Titular-Aqui</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Tu-Segunda-Descripcion-Titular</b>&nbsp; 

<span style='background-color:#0088FF;'> &nbsp; &nbsp; <b><a href="Url-De-Tu-Tercer-Titular"><font color=#ffffff>Tu-Tercer-Titulo-Titular-Aqui</font></a></b>&nbsp; &nbsp; </span> &nbsp; <b>Tu-Tercer-Descripcion-Titular</b>&nbsp;  

<script type="text/javascript" src="https://googledrive.com/host/0B0DJgT4v15seSHBpOVViRFRmYUE" language="javascript"></script></b></span></div>

</b:if></b:if>

Instrucciones para personalizar este widget.

---

Para el Primer Titular:

Reemplace Url-De-Tu-Primer-Titular con la direccion URL de tu primer titular.

Reemplace Tu-Primer-Titulo-Titular-Aqui con el titulo de entrada titular

Reemplace Tu-Primera-Descripcion-Titular con una pequena descripcion del titular

Para cambiar colores simplemente reemplace #7FB51A y #ffffff 

---

Para El Segundo Titular:

Reemplace  Url-De-Tu-Segundo-Titular  con la direccion URL de tu segundo titular de entrada.

Reemplace Tu-Segundo-Titulo-Titular-Aqui con el titulo del titular de entrada.

Reemplace Tu-Segunda-Descripcion-Titular con una pequena descripcion de tu titular.

Para cambiar colores simplemente  reemplace #7FB51A y #ffffff

---

Para el Tercer Titular:

Reemplace Url-De-Tu-Tercer-Titular con la direccion URL de tu tercer entrda titular.

Reemplace Tu-Tercer-Titulo-Titular-Aqui con el titulo titular de la entrada

Reemplace Tu-Tercera-Descripcion-Titular con una pequena descripcion de tu titular

Para cambiar colores simplemente  reemplace #7FB51A y #ffffff 

---

Para cambiar el ancho de este  ticker reemplace 520px




Recuerda: Si quiere añadir más Titulares en tu ticker luego justo antes de <script type = "text / javascript" Agregue el siguiente código  y esto se sumará un titular mas en su ticker.


    <span style='background-color:#7FB51A;'> &nbsp; &nbsp;<a href="Url-De-Tu-Titular"> <font color=#ffffff> <b>Tu-Titulo-Titular-Aqui</b></font>&nbsp; &nbsp; </a></span> &nbsp; <b>Tu-Descripcion-Titular</b>&nbsp;

Paso # 4: Ahora, después de la personalización de su ticker Pulse el botón Guardar y ahora ir a su blog y disfrutar de  Desplazamiento Jquery News Ticker.

Chequea Articulo Como Añadir Zoom Efect a Imagenes en Blogger

Read More