/* ANUNCIO4 */

Agregar Botón +1 'Plus One' de Google en Web o Blog

El botón +1 es una forma rápida de indicar que algo es muy interesante o merece la pena que otras personas lo vean.

Haz click en el botón +1 para decir públicamente que te gusta algo. Tus +1 pueden ayudar a tus amigos y contactos, o a otros usuarios, a encontrar los mejores resultados cuando buscan en Internet. Google

Seleciona el Tamaño y el Idioma, una vez hecho esto, aparecera un codigo como el siguiente:
<!-- Añade esta etiqueta en la cabecera o delante de la etiqueta body. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'es'}
</script>

<!-- Añade esta etiqueta donde quieras colocar el botón +1 -->
<g:plusone></g:plusone>
El primer codigo similar al azul que aparecera, se pega abajo de la etiqueta <body> tal como se indica, el segundo marcado en rojo en donde se colocará el Botón +1.

Ejemplo:

Esto en un blog de Blogger podria acomodarse de la siguiente manera:

Ve a Diseño-> Edición de HTML-> marca la casilla Expandir plantillas de artilugios, si quieres que el botón aparezca al final del contenido de las entradas busca (Ctrl+F) y pega el codigo abajo de lo siguiente.
<div class='post-footer-line post-footer-line-1'>
Si quieres que aparezca abajo del titulo de la entrada, pega el código abajo de:
<div class='post-header-line-1'/>
Si quieres que aparezca al inicio del contenido de la entrada pega el código abajo de:
<data:post.body/>

Cambiar Favicon desde Blogger in Draft


Esta es una nueva funcion de Blogger, con la cual podemos cambiar el favicon directamente desde Blogger sin recurrir a ningun truco, Blogger nos sorprende y va mejorando cada dia mas sus herramientas.

Para hacer uso de esta nueva funcion solo ve a Blogger in Draft. Despues a Diseño->
Editar: ,subes tu favicon con formato (.ico) y lo guardas.

Si no se ve el favicon actualiza la pagina y listo!

Poner texto sobre una imagen usando CSS

Añadir texto sobre una imagen nos permite incluir el título, describirla, o poner alguna frase. Esto usando sólo CSS, sin necesidad de Javascript para no hacer la página más pesada y lenta.


Este es un ejemplo de texto sobre una imagen.
Un truco muy util para nuestro blog.



Para ello ve a Diseño-> Edición de HTML-> y Expandimos Artilugios. Ahora busca la etiqueta </head> y añade antes las líneas de CSS:
<style type="text/css">#bljaIMGte{float:left;position:relative;}#bljaIMGte .bljaIMGtex {width:320px;position:absolute;top:10px;left:14px;}</style>
Guardar Plantilla.

Ahora el código necesario que hará funcionar el truco. Puedes utilizarlo tanto en una entrada como en un gadget.
<div id="bljaIMGte">
<img src="URL DE LA IMAGEN" />
<div class="bljaIMGtex" style="color:#000000;">
<p>PRIMER PARRAFO</p>
<p>SEGUNDO PARRAFO</p>
</div>
</div>
Reemplaza URL DE LA IMAGEN por la dirección de tu imagen. En PRIMER PARRAFO puedes escribir un párrafo inicial y en SEGUNDO PARRAFO el resto de la descripción.

Con la etiqueta <p> y su cierre </p> sólo conseguimos que se produzca un salto de línea, dejando un espacio en blanco entre el contenido, ó bastará con eliminar dichas etiquetas y añadir al final la etiqueta </br>. "También puedes deshacerte de todo esto y escribir seguido".
En color:#000000; puedes personalizar el color (#000000) del texto, usando una tabla de colores..

Vía:  elbalcondejaime.blogspot.com

Iconos SpoonGraphics Doodle Icons [PNG]

Descarga gratis pack de iconos para tu sitio web o aplicación.

14 iconos en formato:
PNG (Tamaño Variado)

Los puedes utilizar para enlazar tu cuenta de Facebook, Twitter, Delicious, entre otros más, para hacer un enlace con imagenes te puedes guiar con este post: Código HTML para crear enlaces con Imágenes.


Alojar Scripts en la Plantilla y en Gadgets (Blogger)

Encontrar un sitio para alojar archivos .js (JavaScript) puede ser algo difícil, a no ser que se tenga un hosting propio, y no solo eso, tambien se necesita que perdure alojado por mucho tiempo ó al menos lo necesario.
Es por eso que te enseñare la forma de hacer lo sin necesidad de eso, basta con copiar los codigos JavaScript en la plantilla o en un gadget.

Para alojar los scripts en la plantilla ve a Diseño-> Edición de HTML y antes de </head> pega lo siguiente:
<script type='text/javascript'>
//<![CDATA[
...contenido del script...
//]]>
</script>
Para sacar el contenido del script: Pega la URL del script en la barra de direcciones de tu navegador, si abre una página llena de códigos ese es el contenido del script; si en su lugar descarga un archivo con extensión .js entonces abre el archivo con Bloc de notas y copia el contenido del script.

Para alojar en un Gadget ve a Diseño-> Elementos de la página-> Añadir un gadget-> HTML/Javascript pegamos este código:
<script type='text/javascript'>
...contenido del script...
</script>
Nota: Alojar los scripts en la plantilla funciona en la mayoria de los casos, aunque pueda que uno u otro script no funcione, lo cual tendría que alojarse en algun servicio.

Slider 'Orbit' de Imágenes con Descripcion para Blogger


Ahora a peticion de Diegolu les compartire este estupendo Slider con muchas funciones y caracteristicas de las cuales se destacan: cambio automatico, control de pausa, flechas de navegacion, Imagen con enlace a entrada, descripcion, entre otras más...

Para agregarlo al blog ve a Diseño-> Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]--> 

<script type='text/javascript'> 
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>
<script type='text/javascript'> 
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1 
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Configuracion:
En el primer código, en la línea azul advanceSpeed: 5000, se puede modificar la velocidad de las transiciones entre cada imagen, un número más alto hará que las imágenes tarden más tiempo entre cada transición.

Ahora pega los estilos antes de ]]></b:skin>
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active, 
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Por último usaremos el código que mostrará las imágenes, así que en Diseño-> Elementos de la página-> Añadir un gadget-> HTML/Javascript pegamos este código:
<div id='featured'>

<a href='URL del enlace'><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Wixus Blogger</a></span>

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius augue sit amet magna condimentum dictum.</span>

<a href='URL del enlace'><img rel='foto4' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>Wixus Blogger</a></span>

</div>
Esta última parte es la que contiene las imágenes, los enlaces y los textos descriptivos de cada imagen.
Lo que está en color rojo son las URL´s de los enlaces y de las imágenes.

Dentro de cada código de imagen están especificadas las medidas que tendrá cada imagen, pero puedes modificar esos tamaños a tu gusto, eso se hace en width (ancho) y height (alto), recuerda que todas las fotos deben tener el mismo tamaño especificado.

Lo que está en color azul es el texto descriptivo de cada imagen.
Pero atención, no basta con poner el texto descriptivo para que éste aparezca, sino que, cada descripción tiene un identificador (id), éste identificador debe ser único. Para que el texto descriptivo aparezca deberá ponerse dentro del código de la imagen el atributo rel + el nombre del identificador.
Por ejemplo, en el texto descriptivo de la primera imagen aparece su id que es, id="foto1" y dentro del código de la imagen aparece el atributo rel con el nombre del id, o sea, rel="foto1"

Como ves no es nada complicado, sólo hay que ponerle un poco de atención a las descripciones de las imágenes, pero fuera de eso será un slider sencillo de utilizar.

Y bueno, aunque está probado en todos los navegadores y en Internet Explorer funciona, el control de pausa no se muestra en ese navegador por los fallos que tiene, de igual modo es posible que el desplazamiento entre cada imagen no se vea con un efecto tan suave como se vería con otro navegador de mayor calidad como Mozilla Firefox o Chrome.

Si lo prefieres puedes descargar el script y subirlo a un alojamiento en caso de que no quieras tenerlo directo en tu plantilla.

Enlace: Descargar script