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

Poner el título de la entrada antes del nombre del blog en los resultados de los buscadores para aumentar el tráfico desde los buscadores



En los resultados de las búsquedas de Google, los blogs de Blogger muestran por defecto el nombre del blog antes del título de cada entrada. Según Google, el título es uno de los aspectos más importantes que hacen un usuario haga click en un determinado resultado de búsqueda.

Así que es recomendable invertir este orden para que se visualice mejor en los buscadores y obtengamos más visitas desde la página de resultados de los buscadores.

Para llevar a cabo esta pequeño cambio solo visible en los resultados de los buscadores; vamos al menú de plantillas y editamos el código fuente de nuestra plantilla (edición HTML). Buscamos, entre el código de nuestro sitio, la siguiente línea:

<title><data:blog.pageTitle/></title>

y la reemplazamos totalmente por este:

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title><b:else/> <title><data:blog.pageTitle/></title></b:if>

Ha sido sencillo, ¿no?

Fuente | ExprimiBlog

Orbit: Slider de imágenes con jQuery



Aunque Coin Slider es un slideshow que funciona muy bien y ha tenido buena aceptación, son muchos quienes desean que este gadget cuente con flechas de desplazamiento para poder navegar por las imágenes de forma más inmediata.

Un slideshow que permite hacer eso es Orbit, que funciona a base de jQuery y muestra las imágenes con flechas de navegación. Pero además, en la parte superior izquierda indica cuál es la imagen que se está viendo, y del lado superior derecho un control de pausa e indicador del tiempo entre cada foto.

Una de las ventajas que me gusta de este slider es que el script cuenta con una versión corta, por lo que podremos colocar el script directo en la plantilla y así nos evitaremos colgarnos de un hosting.

Para empezar vamos a colocar los scripts que son lo que harán que funcione, así que vamos a Diseño | Edición de HTML y antes de </head> pegamos 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>


Ahora es turno de los estilos, así que antes de ]]></b:skin> pegamos esto:

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKxsQBX7iB7mEWPgreVg39EsJKeEeG80ltvdbWp6qnQNFcSlchDwdN7nhknC5CwVX1bdw9g_cNidz-fLKt63GxQbUrTty37ARkXR23AZiTzpMLfMf96UcmWxi8ECUQQoBGJ_xP7uE4sun/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUgyJb1HqZoqWK7kizZqGrpcveNpJZ_wtAqFfqRoETLHs7y6KvHlQzdxQmpmFinlmpaBXfw6cY1vOGpXWCyAumZi0VUeBj_5eHQSyI53SEp868ppsBQEqcr0XeccFDjaj5cYuHjNfhkEf/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oGz-j1B4eH7pjuHEjWECXdR2FCKDLvmcPLAbGdYnrX_ca_XxKDqn7RyghtSHg5IrXIZmUOxlCl6sNLMhdoNs4UllOo-d31XSFbU4yX-76g5Ij2Ci92Ds7M55_7Ct8RQn2-Y5e2axm7qd/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLQQPa0-6wqL45dbDHNadftc7PjidrDWt_XXquwhKyJWgOsuyUR_RURIW8xwilSvBiml2DNv2qvNiUvz89PINxwadDGtEpFmeGDojSj3u7eSTPLMhuUtsgvX8Bxf4ogK0CZoJ3PlFahWtb/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg9M5xyQNp8dG8d-G1ZnosykWWWRUEyDyCb1H-FlYAv92vobgd8W7Zxhx8MPjz9CNzAQLS3RttmdSEaqeOzycpMHZMFntzhQ4lCYGCv9h1UAwIfbeqxV_AkiHse_v9mYWWPQfZ9gWMOEa/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjURCajOOj65Nhgi0C5rBSWgaowswP-30Y2Nezpuw7yXBM0fXnFRRBeLoMBEsEqhbiQmx7BE61yK-VWle_JfmttiDqBuXqIPVVW0YlLdXls7g3TcFHSW46cN0IEE03lMZZzCruP1We9nt1b/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; }



Ya 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'>Descripcion de la imagen</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';'>Texto que aparecera con el enlace</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;'>Descripcion de la imagen</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'>Descripcion de la imagen</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 URLs 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 verde 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.


ACTUALIZACIÓN: 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.


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


Fuente | CiudadBlogger

Cómo hacer que la imagen de fondo del blog cubra toda la pantalla


CSS3

La primera opción es usando CSS3, la ventaja con este método es que no sobrecargamos el blog con scripts, usaremos únicamente la propiedad background-size que se encargará de realizar lo que queremos.
La desventaja es que esta propiedad sólo es soportada por los navegadores modernos, así que en el caso de Internet Explorer sólo se verá de la versión 9 en adelante, en los demás navegadores no deberá haber problema.
El método es muy simple, sólo tenemos que ingresar a la Edición HTML de la plantilla, localizar el background que está dentro de body { y reemplazarlo por esto:

background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;

Se vería más o menos así:

body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

jQuery (Es el que yo uso :P)

Con este método usaremos jQuery con el plugin BackStretch, la ventaja es que funciona en todos los navegadores, incluyendo IE7 en adelante. La desventaja no es mayor si ya usas jQuery, ya que el plugin en realidad es pequeño. Para usar este método en tu blog entra en la Edición HTML y antes de </head> pega este script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
$.backstretch("URL de la imagen");
</script>

Pon la URL de la imagen donde se indica y listo.

Con este método la carga de la imagen del fondo se hace hasta el final, esto es para que el usuario no tenga que estar esperando a que cargue la imagen para que empiece cargar el blog, así que si en el body { ya utilizas una imagen de fondo se verá primero e instantes después se cargará la del script, por lo que si lo deseas puedes eliminar la imagen que tengas en el body y así dejar que sólo cargue la imagen del script.

Como puedes ver ambos sistemas son fáciles de aplicar, cada uno con sus pros y contras, pero el resultado es el mismo, extender la imagen de fondo para que se ajuste a la pantalla de cualquier monitor sin importar la resolución del mismo.

Fuente | CiudadBlogger