Como definir el tamaño de tus imagenes y el resumen de tus entradas en tu pagina principal en blogger?

Si bin es cierto al agregar una imagen en una entrada que queremos publicar en nuestro blog. el tamaño de la imagen a veces no es lo nosotros queremos. cuando aparece en la pagina de inicio, a veces queremos un tamaño de imagen que sea uniforme que siga un estilo al igual que las otras imagenes.

Muachas veces tenemos que modificar el tamaño de esas imagenes para que vaya igual al tamaño de las demas imagenes en nuestra pagina de inicio.

lo que le traigo a continuación es una forma de redifinir el tamaño de las imagenes de tu blog.AL mostrarlas en tu pagina principal de Blogger como imagenes uniformes y con exacto reumen de palabras de tu articulo
 OSEA dando a cada entrada publicada UN RESUMEN Y TAMAÑO DE IMAGEN DE MANERA AUTOMATICA..

sin necesidad de hacer salto de linea. ya que este SCRIPT que le mostrara hara todo el trabajo.

si deseas un ejemplo de lo que te hablo ,puedes ver mi blog y así veras el diseño que tengo en mi PAGINA DE INICIO.

A este modelo se le denomina MODELO DE PERIODICO por que modifica la primera imagen de la pgina inicio de tu blog.. a u tamaño grande Osea dando la bienvenida a tu Blog. con el resumen de tu entrada abajo de el.

Y asi las demas imagenes los configura como. subnoticias o subarticulos los cuales estan debajo de la primera imagen, pero con imagen y resumen automaticamente modificado por si solos.

OJO : que para esto necesitas tener imagenes en tus entradas OK . de lo contrario solo se  modificara el texto sin la imagen. AGREGUEMOSLE algo de vida a una entrada con una IMAGEN VISTOSA. bueno aqui te dejo EL SCRIPT

esta en google docs. solo copialo y pegalo antes de la etiketa </HEAD> y guarda la plantilla. OJO ANTES DE HACER CUALKIER CAMBIO EN TU PLANTILLA POR MEDIDAS DE SEGURIDAD PRIMERO DESCARGA UN RESPALDO OK:)

si tienes alguna pregunta por favor hazmela saber. MOS VEMOS.

AÑADIR SUBTÍTULOS INTERACTIVOS A SUS IMÁGENES DE BLOGGER

Este post a sido creado de una manera para dar una vista mas actulizada. de como se ven las leyendas de tus imagenes en tu blog. leyendas que se muestras al pasar el puntero del raton en la imagen. Sabemos que si damos una leyenda que esta basado en la palabra clave de la tematica de tu post a tu imagen ,entonces vas ha tener una opcion mas para obtener trafico a tu blog. Muchas personas no saben eso pero esto es un punto muy importante. AHORA esto se hace trabajando en la segunda linea de la tbla de propiedades de la imagen en donde dice TEXTO ALT. ahi tenemos que añadir nuestra leyenda de imagen o palabnra clave. y usando un script que les voy a dar en Jquery lo pueden hacer. pero antes que nada pueden ver un demo de este post en mi Blog con solo pasar el puntero en una de mis imagenes :)

Paso # 1: agregar texto alternativo a las imágenes

Hace un tiempo Blogger a añadido la capacidad para que los bloggers puedan agregar texto alternativo (TEXT ALT) a las imágenes, así como el texto del título para el enlace que rodea la imagen. Esta funcionalidad no fue anunciado,Solo fue  simplemente envuelta en los cambios más grandes de SEO, permalinks, etc Debido a esto muchos usuarios todavía no son conscientes de esta funcionalidad y supongo que sólo un pequeño porcentaje de los usuarios toman ventaja de ello. 

Diríjase a su Entrada del Blog y edite el mensaje en la pestaña editar. si es que ya tienes una imagen en tu entrada. Haga clic en la imagen y se abrira las opciones de diálogo que se muestran debajo de la imagen, las que en las que normalmente establecen el tamaño o la ubicación de la imagen (o la leyenda). Haga clic en "Propiedades" (Lo sé, es probable que haya pasado por alto esto docenas de veces). pero descuida ya viene lo MAGICO!!

Una ventana de diálogo se muestra ahora donde se puede establecer el texto del títuloo puede establecer el texto alt. Vamos a usar el texto alternativo para nuestros propósitos. Ponga  su título EN el texto alt y pulse  ACEPTAR

hora AGREGAR ESTE SCRIPT antes de la etiqueta </HEAD>

Lo que estamos haciendo en este script es agregarle de manera dinamica una leyenda a tu imagen dentro de texto alt de la imagen (que agregó en el paso # 1). BUENO eso seria todo. el trabajo NO ES MUY DURO VERDAD??? espero lo disfruten :) horita voy por otra birra que esta ya se acabo NOS VEMOS

10 razones para recomendar Blogger sobre Wordpress para la mayoría de sitios web

Todo blogger siempre se hace esta pregunta todo el tiempo: "¿Por qué utilizar Blogger en lugar de Wordpress?" Claro, Wordpress te da libertad casi ilimitada para hacer lo que quisieras con tu sitio, hay miles de plugins, se puede auto-host, y con código  (PHP) y una base de datos (MySQL), el cielo es el límite.
Pero vemos que tambien hay un  problema.Ya que : Potencial ilimitado a menudo significa un potencial ilimitado para perderse, joder algo, o no conseguir algo. Y para ser franco, la gran mayoría de los sitios de Wordpress no necesitan ser hechos en Wordpress, pero  están pagando por alojamiento, esperando pasar tiempo con los parches de seguridad, y preocupado por el tiempo de actividad de su sitio porque creen que es necesario.

Para la mayoría de ellos no es necesario. Su sitio podría haber estado en Blogger y no tendría esos problemas.

Razón 1: es capaz de satisfacer la mayoría de necesidades

 Usted puede hacer una lista de las cosas que la mayoría de los sitios web y blogs necesitan, y casi la totalidad en un (90% +) y se han hecho en Blogger. Una simple búsqueda en Google te encontrará un tutorial sobre cómo hacer casi cualquier cosa en Blogger. Un formulario de contacto, una presentación de diapositivas, 5 páginas de texto con imágenes, una funcionalidad de blog para compartir con botones sociales? en fin ricosPedacitos de torta.jaja:)

Desactivar el redireccionamiento 302 en blogger

 Blogger introduce una URL específica para determinados países una direccion url en los dominios blogspot. En lugar de la extensión del dominio blogspot.com, los lectores verán sus extensiones con dominio específico de cada país. Osea tu blog que es blogspot.com  si un visitante ve tu blog desde españa entonces seria blogspot.es

POR EJEMPLO: Si estás viendo un blog con dirección de blog-name.blogspot.com desde mexico (MX), entonces usted será redirigido a blog-name.blogspot.com.mx. De manera parecida, si usted está viendo desde España será redirigido a blog-name.blogspot.es.

Como dar nombres a tus imagenes para un buen SEO

Los Sitios web incluyen tantas imágenes de varias formas y tamaños y se utilizan para las ilustraciones, fondos y muchas razones más.

¿Por qué debe incluir las palabras clave como nombre en una imagen?

Los vendedores a menudo no dan ningun  nombre a las imágenes utilizadas en sus sitios web ya sea por no conocer o simplemente por subestimar su resulatdo .pero no se dan cuenta que al omitir es pequeño pero importante paso,estan perdiendose de una importante cantidad de trafico we a tu sitio.

Muchos nombres de imagen tienden a ser banner1.gif, 00001a.jpg o abc.png.

Qué se debe hacer? para cambiar esto, bueno es simple es nombrar a las imágenes mediante el uso de uno o más  palabras clave relacionada a la tematica de tu pagina.palabra clave que sera montada o incluida en esa imagen.

Consejos para optimizar el contenido de su página para SEO eficaz

Contenido que no es compartible o enlazables es de ninguna utilidad a tu sitio Web. Los Motores de búsqueda dan mucha importancia al contenido, especialmente después de las actualizaciones de el temible Panda y  pingüino. Necesitas  crear contenido que no sólo sea atractivo para los visitantes humanos, sino también para robots de los motores de búsqueda. Aquí hay algunos consejos que teayudarán a logran estos objetivos para ambos.

Palabras clave (keywords)

Se puede hablar de optimización de contenido sin hablar de palabras clave, no importa que suene como cliché. Sin embargo, la importancia de utilizar las palabras clave correcta en la forma correcta es tan profunda que usted realmente no podra alejarse de tal contenido. En el escenario actual de  SEO, el uso de la palabra clave ha sufrido muchos cambios. Usted necesita tomar una concordancia amplia en palabras clave y crear contenido que contiene diversas versiones de la misma palabra clave. La ventaja de esta técnica es que en primer lugar, se mantiene el contenido de cada relleno de palabras clave, y en segundo lugar, da un flujo natural al contenido. También, tienes que  regular  investigación de modo que puedas optimizar  las tendencias de palabras clave.

La importancia de las redes sociales para SEO

El valor de las redes sociales para SEO puede tener gran poder para influir en cómo los motores de búsqueda como Google deben Rankear su sitio Web. Si usted no ha notado esto, probablemente debería empezar a tomar lecciones sobre SEO y poco después  hacer varios pasos necesarios para construir su presencia en diferentes redes sociales . Aqui algunos pasos para tener presencia en las redes sociales y son los siguientes:

1. Registrarse en varios sitios usando su nombre comercial.

Si no tienes Facebook, Twitter, LinkedIn y algunas otras cuentas, ir crearlas rápidamente utilizando su nombre comercial. Cada uno de ellos le dará conciencia de marca de modo significativo, ayudará a mejorar su posición en motores de búsqueda  porque su presencia en medios sociales es una indicación de que su compañia tiene credibilidad y experiencia.

Técnicas SEO: Entender el algoritmo de búsqueda de Google

tecnicas seo

Las actualizaciones del algoritmo de búsqueda de Google no solo penalizo a los contenidos duplicados de muchas paginas web y blog. dejando por debajo del rankig a los esfuerzos de muchos webmaster. Sino que tambien Cambio los factores de clasificación y así mismo tambien cambio el enfoque que debe tomarse con el fin de estar alto en el ranking. OSEA esto trajo como resultado un esfuerzo veridico y legal del webmaster para con su web, si es que quiere estar en los mas alto en los motores de busqueda.

Cómo Rankear un sitio web en lo más alto en Google

Es más que seleccionar palabras clave e incluso con contenidos de calidad. Lo que se necesita es una táctica inteligente para diversificar las fuentes de tráfico. Lo extraño es que usted sera recompensado por los motores de búsqueda cuando se den cuenta de que su sitio de Internet realmente no necesita obtener una gran cantidad de tráfico.

Sigue leyendo para obtener consejos para mejorar el ranking de la manera correcta en los buscadores.

AGREGAR BOTON "LEER MAS" PERSONALIZADO EN TU BLOG DE BLOGGER

Este truco interesante creará automáticamente resúmenes del post con imágenes en miniatura. No es necesario añadir ningún código adicional en cada post OK.

Tutorial por UNIVERSO BLOGGER :

1.Ve a "Plantilla" -> "Edición de HTML" de tu blog.

2.Haga clic en " Expandir plantillas de artilugios "

3.buscar la etiqueta  </ head> .

4.Ahora añadir a continuación el código justo antes de la etiqueta </ head> .

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }

 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script>

Nota: Se puede cambiar por  valores como desee.

COMO MEJORAR EL RANKING ALEXA

Alexa es una de la mejores compañías de analítica web en Internet.Si haces un negocio en línea, entonces el Ranking alexa es muy importante porque se refiere al nivel de confianza de los blogs. Incluso si eres sólo un blogger regular, El Ranking Alexa puede dar valor comercial a tu blog llevandole arriba en el Ranking.Cuando empiezas a escribir un Blog , tu Ranking Alexa sera algo bajo pero  después de un mes de trabajo duro y con buena calidad en tu blog ,Entonces tu Ranking Alexa alcanzara un nivel superior ubicandote en los primeros lugares. ¡ Entiende esto ahora! Así que hoy voy a revelar los trucos que tienes que seguir para aumentar tu Ranking Alexa !

¿Cómo juega el Ranking Alexa un papel importante en tu sitio en Internet?

INSERTAR IMÁGENES Y VIDEOS EN LOS COMENTARIOS DE TU BLOG

Si bien es cierto BLOGGER no te permite insertar imágenes o vídeos en la cajita de comentarios. a continuación te daré un código para que puedas aplicarlo a tu BLOGGER  Lo haré de manera detallada para que puedas entenderlo bien. ademas de un DEMO de el tutorial. Tu decides si insertas las IMÁGENES O LOS VÍDEOS.

INSERTAR IMÁGENES EN LA CAJA DE COMENTARIOS EN BLOGGER 

1. 1 Dirigete a configuracion
2. Click en plantillas "es importante hacer una copia de tu plantilla antes de cualquier modificacion"
3. Click en HTML
4. Buscar con las teclas CTRL+F y buscar la etiqueta </body>
5. Pegar el siguiente codigo encima de la etiqueta </body>

<script src='http://dl.dropbox.com/u/35784805/Mil%20Trucos%20Blogger/imagen%20comentarios.js' type='text/javascript'/>

Para personalizar el estilo que tendrán las imágenes de los comentarios  

1. Busca en la p`lantilla con las teclas CTRL+F el código ]]></b:skin>
2. Encima del código ]]></b:skin> pegar el siguiente código

#comments img {
max-width: 550px;
border:0px solid #000;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
padding:0px 0px 0px 0px;
}

• Lo resaltado en negrita son las cosas que puedes editar, como el ancho máximo de las imagenes que esta por defecto en 550px, tu puede editarlo y poner el ancho de las entradas de tu blog.
• lo demás por defecto está en 0px y no hay cambios en la imagen hasta que tu mismo le pongas un numero.
• El color del borde está en negro por defecto, tu puedes cambiarlo usando colores hexadecimales o RGBA.

• Luego guarda los cambios.
• Listo, ahora debes saber los codigos.

• Para insertar imagen se utiliza [img]URL de la imagen[/img]
• Para cambiar color de texto se utiliza [color="red"]Texto que cambiara[/color]
• Para crear marquesina se utiliza [ma]Texto en marquesina[/ma].
• Listo es  lo que pueden hacer los usuarios.
• Esto es el tutorial en insertar imagenes en Blogger

Ver Demo 

INSERTAR LINKS DE VIDEOS EN LA CAJA DE COMENTARIOS EN BLOGGER 

1. 1 Dirigete a configuracion
2. Click en plantillas "es importante hacer una copia de tu plantilla antes de cualquier modificacion"
3. Click en HTML
4. Buscar con las teclas CTRL+F y buscar la etiqueta </body>
5. Pegar el siguiente codigo encima de la etiqueta </body>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// if oetag=0, just use video urls like:
//           http://www.youtube.com/watch?v=12345678901
//           surrounded by white space (video tag can be used, too)
// if oetag=1 (for nerdy blogs?), use syntax:
//           [video=http://www.youtube.com/watch?v=12345678901]
// config:
var oetag = 0;           // see above
var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
//
function oe_loadscript(filename) {
  var scr=document.createElement('script');
  scr.setAttribute("type","text/javascript");
  scr.setAttribute("src",filename);
  document.getElementsByTagName("head")[0].appendChild(scr);
}
function oe_jumptohash() { // reposition to anchor
  window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
}
var oe_tid;
var oe_elems = {};
//
function oembed_callback(response) {
  var resp = response;
  revurl = resp.url.split("").reverse().join("");
  html = oe_elems[response.callID].html();
  ee = $(resp.html);
  w = parseInt(ee.attr("width"));
  h = parseInt(ee.attr("height"));
  if(oelazy==1) { // convert to lazy load
    src = ee.attr("src");
    src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
    ee.attr("src", src);
    ee.attr("style", "vertical-align:top;");
    htm = $("<div/>").append(ee).html();
    htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
    resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
  }
  htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
  htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
  htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"');  // trick to preserve href="url"
  htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
  htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"');  // trick to preserve href="url"
  if(html != htmlx) {
    oe_elems[response.callID].html(htmlx);
    if(window.location.hash.replace(/^#/, "").length > 0) {
      if(oe_tid) window.clearTimeout(oe_tid);
      oe_tid = window.setTimeout("oe_jumptohash()", 1000);
    }
  }
}
function oembed_yt(url, width, callID) {
  src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
  if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
  oe_loadscript(src);
}
$(document).ready(function() {
 det=$('<div class="youtube-lazy-link-div" />');
 $("body").append(det);
 if(det.css("position")=="absolute") {
  if(oelazy != 0) oelazy=1;
 }
 else oelazy = 0;
 det.remove();
 window.setTimeout(function() {
  var callID=0;
  $(".comment-content,.comment-body,.comment-body-author").each(function() {
    html = " " + $(this).html() + " ";
    if(oetag)
      matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
    else
      matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
    if(matches && matches.length) {
      for(var i=0;i<matches.length;i++) {
        url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
        oe_elems[callID] = $(this);
        oembed_yt(url, $(this).width(), callID++);
      }
    }
  });
 }, 500);
});
//]]>
</script>

Para agregar el vídeo al comentario solo debes poner la URL del video  de YOU TUBE y listo
Este a sido un tutorial para insertar VIDEOS EN los comentarios de blogger
NOTA: El tamaño del video se acopla segun el tamaño de tu blog !  Estare haciendo modificaciones al codigo para poder hacerlo personalizable :)  NOS VEMOS!!!

Ver Demo 

Cómo y dónde cargar. Archivos SWF en Blogger?

Blogger no ofrece alojamiento de archivos, (excepto para fotos y videos, en Picasa). Si desea cargar un objeto SWF, ¿Dónde subir su objeto SWF entonces? Tengo una solución para alojar un archivo SWF .Esto es un tutorial aprendido en  Google Sites . Ahora vamos a ir al tutorial.

Cómo Cargar Objetos SWF

• Primero vaya a Google Sites .
• Entrar / Crear cuenta a su cuenta.
• Haga clic en la barra lateral.

Al hacer click en Modificar Sitio :

Hacer click en SUBIR:

Escoja un archivo de tu pc y espera a que cargue y una vez cargado:

Ahora tienes el enlace para el archivo SWF cargado. 

Al ver ese archivo  -  Tu Enlace Subido archivo SWF se verá así: https://sites.google.com/site/yoursite/24049.swf attredirects = 0 & d = 1? Quite el texto resaltado. Ahora su enlace se verá así https://sites.google.com/site/yoursite/24049.swf Ahora copia el enlace y ya está 

EL enlace como bien sabes puedes colocarlo como quieras ya sea en un cuadro señalando descargas o a tu criterio . ESPERO te haya servido este post :) un abrazo

COMO AGREGAR UN MENÚ DE NAVEGACIÓN DESPLEGABLE EN BLOGGER

Les traigo un post acerca de como implementar un Menu Desplegable en tu blog de blogger. Este menú se puede personalizar de modo que usted puede personalizar fácilmente  y crear un estilo propio para que se adapte a tu blog, para personalizarlo utiliza el editor HTML donde se puede ver la vista previa en vivo de el menú cuando se aplican los cambios, también la estructura HTML de este menú .es malditamente fácil y sencillo :) jeje, sin necesidad de añadir ningun class id y puede agregar sus enlaces con el uso normal, con etiketas ul y li .

Ver Demo Con UN editor HTML

Nota - Pegar todo el siguiente código HTML en el Editor y  aparecerá la vista previa de manera instantanea, si desea personalizar este menú entonces tendrás que cambiar los valores de CSS. una vez terminado esta listo para añadirlo a BLOGGER

Cómo Agregar el Menú de navegacion Desplegable a Blogger

1. Vaya a Escritorio de Blogger> Diseño
2. Haga clic en Añadir un gadget
3. Seleccione HTML / JavaScript
4. Pegue el código a continuación en el mismo,

<style>
/*======= Menu de navegacion desplegable por UNIVERSO BLOGGER ========= */
.ddsmoothmenu-v ul {
    margin: 0;
    padding: 0;
    width: 250px;
 /* Main Menu Item widths */
    list-style-type: none;
    font: bold 12px Verdana;
    border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
    position: relative;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 10px;
    right: 5px;
}
    /* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    overflow: auto;
        /*force hasLayout in IE7 */
    height: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 5px 5px 25px;
    border-bottom: 0px solid #778;
    border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1UdWV9i8pNH6Bkav0IkgSad-f3AJ8CBvcuy43TLVZOinNXnOtCq8JrxsUHJfFdkufvYhtXkk92bZKsYCO2NEP30qUkiz7TPke65icKt4DAg-EJIze2x_la1eILaVplMu6ZyKMbgNUwVQ/s1600/tab_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-bottom: 1px;
}

.ddsmoothmenu-v ul li a.selected {
        /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H6vcC0x40zS_q6O3SW-TGRCV1DLvtv02bY6H_OH93pdxD9CyYjuCkoAH6eTXMQz8E6kT33q91Oysj0h4JhgjYSeBYp1gPC_fncxtvdj7M6nHESxXLQAnlgeVtjVJ1kvMYRbOuxhkPiA/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}

.ddsmoothmenu-v ul li a:hover {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H6vcC0x40zS_q6O3SW-TGRCV1DLvtv02bY6H_OH93pdxD9CyYjuCkoAH6eTXMQz8E6kT33q91Oysj0h4JhgjYSeBYp1gPC_fncxtvdj7M6nHESxXLQAnlgeVtjVJ1kvMYRbOuxhkPiA/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}
    /*Sub level menu items */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    width: 170px;
        /*Sub Menu Items width */
    height: 22px;
    top: 0;
    font-weight: normal;
    visibility: hidden;
}
    /* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}

* html .ddsmoothmenu-v ul li a {
    height: 1%;
}
/*======= Menu de navegacion desplegable por UNIVERSO BLOGGER ========= */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
    })
</script>
<script type="text/javascript">
    ddsmoothmenu.init({

        mainmenuid: "smoothmenu2",
        //Menu DIV id
        orientation: 'v',
        //Horizontal or vertical menu: Set to "h" or "v"
        classname: 'ddsmoothmenu-v',
        //class added to menu's outer DIV

        //customtheme: ["#804000", "#482400"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
     <ul>
        <li>
            <a href="http://trucosblogger-es.blogspot.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://trucosblogger-es.blogspot.com/">CREAR ESTE</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

• Para cambiar el ancho simplemente modifique el valor  ancho: 250px;
• Si ya ha añadido un plugin de jQuery para su blog, quitar el código resaltado en color verde tenue.
• Reemplace # con tus propios enlaces
• Reemplace subtema 1,  subtema 2 ..... y en el texto que desea que aparezca en el menú.

Para obtener una personalizacion mas a su estilo utiliza este  editor HTML para que pueda ver una vista previa de los cambios. Espero que te haya gustado este menu. Si existen problemas con el codigo al insertarlo en tu blog déjame un comentario :)

IMAGENES DESLIZANTES PARA BLOGGER

Hoy voy a compartir otro un post que funciona con JavaScript y jQuery .Este contiene una cinta en la esquina superior izquierda del control deslizante y es nombrado como "Whats Hot" . Ademas es

altamente personalizable, de modo que para modificarlo a su gusto y  se adapte a su blogger.Espero te sea util este tutorial dde como implmentar una imagenes deslizantes en tu blogger.

puedes ver el demo abajo

Demostración deslizante

Cómo Agregar a Blogger?

1. Vaya a Escritorio de Blogger> Diseño
2. Haga clic en Añadir un gadget
3. Seleccione HTML / JavaScript (por debajo de cabecera)
4. Pegue el código en su interior,

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyeO3iVuwUeHr486bF6SaF07EaWwq_gBzx275KP44LTn4oG-o6jpTpV4zBkz9F2x1NkVuK4IaZSflt_Y2_1YbaISscVHqSI23ZiBBPyIBQylp8dFEaD6P_qnxfNuEJmq0LteRIwT0x_CI/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhdpCTlCDZ3oy7Fv2A9N_xrkCQLSZ2MY-8AIt3IOKnH3yhO4VRcpisdI-Yk5EzG341tmp1OpJMnrM0TC-xDCy3oVA6p5X77DJvx4hMRovxS29x4p5Zth29z-N87pyGfU6DZ_xxYmkD0Q/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjer6PL_MrNO0n_xUaqckLvKmGmz5Br4HOuxkmREDyB8jCD5pAbUFKnCwrn-5uXOPzGoqlqCmx22ah3ubUsa0bOBFznZbly53m81AungCELDMCVPUZh0wsVScIjXw3yAx04XnDwQDOdI2o/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJa9vKrczbZ0N3-mKU_qgTXKCB-XbiaAeBqSWrsMbdEfr1awzmnAliYDRQVJzXYV0gBkn5sRlTDcc8CyOf3RH2Lm3k0LDz46EqthrCDenaKs6bAdI-yXekP3lPs2c8L2I2kA4ROYRk7c/s1600/gadgets+para+blogger.jpg" alt="GADGETS"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7qgRQTSFdueHYEo3sCErlkN0oX0JhD54QxuS46fQqtuIBfFvbbq0JYhs8GUqdRuxhaj12dPb1PasJEUYwiJH5JVjABhs1qlHnu4eOQkZ14KJ3Qxi44rP5c3h1WYbGcOwZUAgIbzCkhi4/s1600/tutoriales+blogger.png" alt=""/>TUTORIALES BLOGGER</a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhortanQYjM4X02V0p6vU8TdwkE8jVhS5aDUITshyphenhyphen6GPkTt863Q7_9LpwlvTQBzIBL3Ar1Oq2RGt0G_TePDfPXehTY7St5L2JnKFMVmzoLr5sePhCvIvxDg6QdxGahTCEZ3TO0AboAsQ/s1600/SEO-para-Blogger_thumb1.jpg" alt="SEO BLOGGER"/></a>
 </div></div>

Nota Importante - Antes de agregar imágenes para redimensionar el control deslizante dele a  ellos el mismo tamaño. 

INFORMACION DE LOS COLORES -

      - Ancho del deslizador

Establecer el ancho del cursor según el ancho de la imagen también DEBES las imágenes de la misma anchura y altura mismos.

     - Altura del deslizador

Ajuste la altura del cursor de acuerdo a la altura de las imágenes DEBES las imágenes de la misma anchura y altura mismos.

     - URL de la imagen

Reemplazar todo URL de la imagen resaltada con la URL de su propia imagen.

     - Pie de foto

Aquí usted puede agregar su leyenda .

     - Enlace a ...

Si desea agregar un vínculo a la imagen a continuación, sustituir # con la URL de su propia imagen.

Por último guardar todos los cambios y ya está :)

COMO HACER TUS TEXTOS CON EFECTO DE TECLADO

El diseño del Blog y la plantilla es uno de los factores  más importante para todo blog.Ello  hace que los lectores vuelvan a visitar una y otra vez tu blog y también hace que su blog sea único entre otros.Ahora voy a dar un truco para crear un texto de manera singular con una bonita apariencia.Este CSS no afecta su velocidad ed blog ya que no utiliza imagenes :)
VER LA DEMOSTRACIÓN

Cómo agregar En Blogger?

1.) VAYA A SU  BLOGGER DASHBOARD

2.) ABRA SUS HERRAMIENTAS DEL BLOG.

3.) VAYA A HTML.

4.) Click "Editar HTML"

6.) AHORA HAGA LO SIGUIENTE.

UN BOTÓN ATRACTIVO DE TWITTER EN TU BLOG

boton twitter

Hola BLOGGERS. La publicación en medios sociales  es una tarea muy importante para ganar reputación . Bueno, y es por eso que es importante compartir. En este post, queremos mostrarte un widget de Twitter que es atractivo. Se hace de flash javascript.. Espero que le guste y compartan el post  y así otros puedan usarlo.. 

 Demostración:

Cómo instalar el Widget a Blogger?