Crea tu Blog

Botón para traducción del blog en 52 idiomas

TranslateThis es un botón Javascript que se puede agregar y dar la opción para traducción del blog en 52 idiomas.

Solamente hay que copiar y pegar el siguiente código Javascript en donde quieran mostrar el botón:

<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

El botón también nos permite personalizarlo.

Se puede cambiar el texto, imagen, que parte del blog no traducir, idiomas a mostrar, etc.. Ver detalles:

Ejemplos:
Imagen: btnImg : 'URL de la imagen',
btnHeight : Altura de la imagen,
btnWidth : Ancho de la imagen,
panelText : 'Traducción en:',
moreText : '36 Idiomas más »',
busyText : 'Traduciendo la página...',
cancelText : 'Cancelar',
doneText : 'Esta página traducida por el',
undoText : 'Cerrar »',
cookie : false,

Se agrega en la función JavaScript "TranslateThis"

<script type="text/javascript">
TranslateThis({
btnImg : 'http://2.bp.blogspot.com/_WvACVGW1iPE/THfM_9C9dbI/AAAAAAAABSc/gsbrD14os4w/s320/translate.jpg',
btnHeight : 38,
btnWidth : 38,
panelText : 'Traducción en:',
moreText : '36 Idiomas más »',
busyText : 'Traduciendo la página...',
cancelText : 'Cancelar',
doneText : 'Esta página traducida por el',
undoText : 'Cerrar »',
cookie : false,
});
</script>

El código final quedaría así:

<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>

<script type="text/javascript">
TranslateThis({
btnImg : 'http://2.bp.blogspot.com/_WvACVGW1iPE/THfM_9C9dbI/AAAAAAAABSc/gsbrD14os4w/s320/translate.jpg',
btnHeight : 38,
btnWidth : 38,
panelText : 'Traducción en:',
moreText : '36 Idiomas más »',
busyText : 'Traduciendo la página...',
cancelText : 'Cancelar',
doneText : 'Esta página traducida por el',
undoText : 'Cerrar »',
cookie : false,
});
</script>

Fuente: loseasi

--> Leer Más...

Efecto en la galería de fotos de tu Plantilla

Esta opción se adecua para los blogs de fotografía, por lo que haremos que la plantilla parezca una galería de imágenes incluyendo ventanas modales.

El procedimiento es mucho más sencillo ya que no requiere de ningún script para hacer resúmenes, sólo condicionaremos la forma que se mostrarán en la portada y nos valdremos de Shadowbox para las ventanas modales aunque eso es opcional.

El primer paso es entrar a Diseño | Edición de HTML y pegar antes de </head> lo siguiente:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#sidebar-wrapper { /* Con esto ocultamos la sidebar de la portada */
display: none;
visibility: hidden;
}
#main-wrapper {
width: 830px; /* Ancho del blog en la portada */
}
.post {
border: 10px solid #424242; /* Color y tamaño del borde */
float: left;
height: 175px; /* Alto de cada contenedor */
width: 175px; /* Ancho de cada contenedor */
margin: 6px; /* Distancia entre cada contenedor */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #BDBDBD; /* Color del título de las fotos */
background: #424242; /* Color de fondo del título */
margin: -5px -5px 0 -5px;
text-align: center;
}
.post img {
height: 175px; /* Alto de la foto en miniatura */
width: 175px; /* Ancho de la foto en miniatura */
float: left !important;
border: 0;
padding:0;
margin:0;
}
h2.date-header { /* Con esto ocultamos la fecha */
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
#sidebar-wrapper { /* Con esto ocultamos la sidebar de la portada */
display: none;
visibility: hidden;
}
#main-wrapper {
width: 830px; /* Ancho del blog en la portada */
}
</style>
</b:if>
</b:if>

Con ese simple paso ya tenemos las entradas en columnas tipo revista, ahora viene la personalización que es la parte más importante.

En la primera parte ocultamos la sidebar de la portada con el fin de que tenga más espacio para mostrar más imágenes y para que se vea realmente como una galería.

El segundo bloque que dice /* Ancho del blog en la portada */ es la suma del ancho del #main-wrapper más el ancho del #sidebar-wrapper, por ejemplo, si el #main-wrapper tiene 600px de ancho y el #sidebar-wrapper tiene 220px de ancho entonces la medida que pondremos será de 880px

El nombre de estos contenedores está basado en las plantillas clásicas de Blogger, así que en las nuevas y otras modificadas el nombre será distinto, ya será cuestión de que cada quien identifique el nombre y ancho de estos contenedores.

Ya que hemos establecido el ancho del blog entonces procederemos a ajustar el ancho y alto de los contenedores de las fotos así como el ancho y alto de las fotos miniatura. Eso se hace donde se indica en color verde, ahí tomaremos en cuenta que entre más pequeñas sean las miniaturas más columnas de fotos cabrán en el blog.

También configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio, por ejemplo, si ajustaste el tamaño para mostrar columnas de tres entradas entonces deberás configurar el blog para que muestra 6, 9, 12 o 15 entradas en la página principal; si fueran columnas de dos entonces tendrás que mostrar ya sea, 4, 6, 8 o 10 entradas.

Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.

Un dato que hay que tomar muy en cuenta es que si agregas texto a la entrada éste deberá estar debajo de la imagen, de lo contrario el texto se mostrará encima de la miniatura y se verá mal.

Por último y a modo opcional vamos a agregar Shadowbox para que las fotos de la galería tanto en la entrada individual como en la portada se vean dentro de una ventana modal.

Para ello descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra de nuevo en Diseño | Edición de HTML y antes de </head> esto:

<link href='URL del archivo css' rel='stylesheet' type='text/css'/>
<script src='URL del archivo js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>

Sustituye lo que está en color rojo por las URLs de los archivos que se indican y que subiste previamente.

Lo último es lo más simple, sólo creamos una entrada y cargamos la foto, en la pestaña Edición de HTML (no en la de Redactar) veremos el código de la imagen, será algo como esto:

<a rel="shadowbox" title="Título de la imagen" href="http://3.bp.blogspot.com/_dsEG33PDaHw/THf2fvKHVfI/AAAAAAAAAU8/
o1827ZGOWEM/s1600/11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="http://3.bp.blogspot.com/_dsEG33PDaHw/THf2fvKHVfI/AAAAAAAAAU8/
o1827ZGOWEM/s400/11.jpg" width="400" /></a>

Lo único que hacemos es agregar lo que está en color rojo y ya, con eso la imagen se abrirá en una ventana modal. Agrega donde se indica el título de la fotografía, ese título aparecerá arriba de la imagen una vez que se muestre.

Si deseas que la foto sea parte de una galería de imágenes entonces lo que deberás agregar será esto:

rel="shadowbox[galeria1]"

Cambia el nombre galeria1 por el nombre de la galería que quieras, así todas las fotos que tengan el mismo nombre de esa galería se mostrarán con flechas dentro de la ventana modal.

Como has podido ver, crear una plantilla en forma de galería no es difícil, el resultado puede ser tan espectacular como tu creatividad te lo permita.

Puedes ver un ejemplo funcionando en este blog de pruebas y haz click en cualquier imagen.

Fuente: CiudadBlogger

--> Leer Más...

Entradas resumidas estilo Magazine

Mini Entradas en tu blog: como darle un aspecto tipo revista al blog en el cual las entradas se muestran como "mini entradas" apiladas en columnas.

En esta parte vamos a ver cómo hacer que la primera entrada tenga un ancho más grande que las demás para darle otro estilo pero siempre dentro del tipo revista (magazine).

Bien, esta vez sin tantas palabras les diré los pasos a seguir; primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<data:post.body/>

Elimínala y en su lugar pon esto:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:
post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Ahora busca esta línea:

<b:include data='post' name='post'/>

Igualmente elimínala y en su lugar pon esto:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<
data:post.id/>");</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;
</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;
}

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

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

//]]>
</script>

Y debajo de eso pega esto:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>

#first { /* Estilos del contenedor del primer post */
margin: 0px 0 10px 7px;
padding: 0px;
width: 610px;
height: 300px;
float: left;
border: 1px solid #1c1c1c;
background: #E6E6E6;
}

.first-body { /* Estilos para el texto del post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #2E2E2E;
}

#first h3 { /* Estilos para el título del post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:center;
line-height: 1.4em;
}

#first h3 a, #first h3 a:visited { /* Color del título */
color: #DF0174;
}

#first h3 a:hover { /* Color del título al pasar el cursor */
color: #fff;
}

#first .comment-link { /* Estilo para el link de los comentarios */
float:right;
padding: 0px 5px 15px 0px;
}

.post { /* Estilos del contenedor de los mini post */
border: 1px solid #1c1c1c;
float:left;
width: 290px;
height: 210px;
margin: 5px;
padding: 0px 5px 5px 5px;
overflow:hidden;
background: #FBEFFB;
}

.rmlink a { /* Estilos del texto Leer más */
color: #39ADCE;
text-decoration:none;
}

h2.date-header { /* Con esto ocultamos la fecha */
height:0px;
visibility:hidden;
display:none
}

.post-footer { /* Estilos del post-footer de los mini post */
text-transform:uppercase;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
line-height: 1.4em;
}

#blog-pager {
clear:both;
}

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

Con todo esto hemos hecho tres cosas, una es aplicar el Leer más automático a todas las entradas, otra es darle un identificador diferente al primer post así como un Leer más exclusivo a la primer entrada, y por último condicionar el tamaño y los estilos de las entradas en la portada.

Ahora vamos a personalizar:

En los dos primeros códigos que hemos agregado aparece en color rojo el texto Leer más... ese se puede cambiar por otro o bien poner una imagen en su lugar, para tal caso se debe eliminar ese texto y poner este código:

<img src="URL de la imagen" />

Sólo agrega la URL de tu imagen donde se indica y listo. Eso deberás hacerlo en los dos texto de Leer más... para que el cambio se vea tanto en la primera entrada como en el resto de ellas.

Después viene la parte del resumen de las entradas. Debajo de </head>, al inicio del script que pegamos se encuentra esta parte:

summary_noimg = 200;
summary_img = 180;
img_thumb_height = 60;
img_thumb_width = 60;
summary_noimg1 = 850;
summary_img1 = 780;
img_thumb_height1 = 125;
img_thumb_width1 = 125;

El primer número es el número de caracteres que se motrarán en las entradas cuando no haya una imagen.

El segundo número es el número de caracteres cuando hay una imagen.

El tercero y último es el alto y ancho de la imagen en miniatura.

Lo mismo para lo que está en color azul, pero esa configuración sólo afecta al primer post. Como el primer post es más ancho entonces cabrán mayor número de caracteres y podrás hacer más grande el tamaño de la miniatura.

Y por último vienen los estilos y tamaños de las entradas. Eso último que agregamos es un código que condiciona la forma que se ven las entradas en la portada.

Ahí veremos que las partes que empiezan con #first aplican sólo al primer post de modo que donde dice:

width: 610px;
height: 300px;

Es el ancho y alto respectivamente del tamaño de la primer entrada, ahí puedes modificar los valores hasta que se ajuste al tamaño adecuado. Generalmente el ancho deberá ser el mismo que tiene el ancho normal de las entradas.

Luego, debajo de .post se encuentran las medidas para el resto de las entradas, justo en esta parte:

width: 290px;
height: 210px;

De igual modo width es el ancho y height es el alto del resto de las demás entradas. Ahí tendrás que experimentar un poco con los tamaños para que queden justo como deseas; entre más pequeños sean más entradas cabrán a lo ancho del blog.

Para finalizar configura el número de entradas a mostrar en la página principal de modo que nunca vaya a quedar vació un espacio. Para hacerlo ve a Configuración | Formato | Mostrar un máximo de y ahí elige el número de entradas que se mostrarán.

Fuente: Ciudad Blogger

--> Leer Más...

Sitemap o tabla de contenido de nuestras publicaciones por fecha

Ese sitemap es un índice que muestra el título de todas las entradas publicadas en el blog y ordenas por etiquetas.

Partiendo del mismo script podemos implementar un sitemap que muestre el índice de todas las entradas publicadas pero ordenadas por fecha, agrupándolas por mes y mostrando a un lado la fecha que fue publicada (ver ejemplo en ciudadblogger).

Para poner en tu blog una tabla de contenido como esta entra en Diseño > Edición de HTML y antes de </head> pega esto:

<script type='text/javascript'>
// <![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre",
"Octubre","Noviembre","Diciembre"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}
postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);
postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('')}
function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");
document.write('<p><strong><a href="'+postYearMonth2[b]+'">'+temp1+"</a></strong></p>
<ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");
a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");
if(b>postTitle.length){break}}};
// ]]>
</script>

Ahora en una entrada nueva pega este código:

<script src="http://tublog.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Cambia lo que está en rojo por el nombre de tu blog y listo. Si lo deseas puedes cambiar el órden de la entrada para que aparezca hasta el último.

Así de sencillo podrás tener una tabla de contenido ordenada por fechas.

--> Leer Más...

Menú horizontal drop and down con CSS

He visto que los menús con subpestañas (drop and down) son lo más solicitados y aunque el menú con efecto deslizante es del agrado de muchos no todos lo pueden usar debido a que requiere jQuery, así que veamos cómo hacer un menú drop and down sólo con CSS sin usar ningún tipo de script que pueda interferir con el funcionamiento del sitio Web.

En cuanto al diseño de estos menús las posibilidades son enormes, este me gusta por lo sencillo de su aspecto y lo adaptable que es con muchas plantillas aunque con las nuevas plantillas de Blogger no funciona pero bueno, ya hemos visto que casi nada funciona en esas plantillas...

Puedes ver el menú haciendo clik en el siguiente botón.

Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
float: left;
position: relative;
width: 140px; /* Ancho de las pestañas */
}

#menu li ul {
position: absolute;
display: block;
top: 2em;
left: 0;
}

#menu li>ul {
top: auto;
left: auto;
}

#menu li:hover ul { display: block; }
#menu li:hover>ul { visibility:visible; }
#menu ul ul { visibility:hidden; }
#menu ul, li { margin: 0 0 0 0; }

#menu ul a {
display: block;
text-decoration: none;
color: #777; /* Color del texto de las pestañas */
background: #f9f9f9; /* Color de fondo de las pestañas */
padding: 5px;
border: 1px solid #ccc; /* Borde de las pestañas */
text-align: center; /* Alineación del texto */
}

#menu ul a:hover {
color: #E2144A; /* Color del texto al pasar el cursor */
}

#menu li ul a {
text-align: left;
text-decoration: none;
color: #777; /* Color del texto de las subpestañas */
background: #fff; /* Color de fondo de las subpestañas */
border: 1px solid #ccc; /* Borde de las subpestañas */
padding: 5px;
}

#menu li ul a:hover {
color: #E2144A; /* Color del texto de las subpestañas al pasar el cursor */
background: #f9f9f9; /* Color de fondo de las subpestañas al pasar el cursor */
}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<div id="menu">
<ul id="menuList">
<li><a class="submenu" href="URL del enlace">Pestaña 1</a></li>
<li><a class="submenu" href="URL del enlace">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
</ul>
</li>
</ul>
</div>

Cambia la URL del enlace donde se indica así como el nombre de la pestaña y de las subpestañas.

Si deseas agregar otra pestaña sólo agrega antes del </ul> de color azul otra línea como esta:

<li><a class="submenu" href="URL del enlace">Otra pestaña</a></li>

Si deseas que la pestaña tenga subpestañas entonces agrega este código en lugar del otro:

<li><a class="submenu" href="URL del enlace">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>

Como puedes darte cuenta es un menú simple, elegante y fácil de personalizar que no requiere nada más que CSS.

Fuente: ciudadblogger

--> Leer Más...

Añadir otros enlaces en el gadget de páginas estáticas

Ya hemos visto que desde hace algún tiempo podemos añadir páginas estáticas fácilmente a nuestro blog.

El problema es que una vez añadidas, los enlaces en forma de menú se muestran en el blog, pero solo los enlaces que hemos creado a las páginas estáticas.

Varias personas me han preguntado como añadir en ese mismo menú enlaces a otras páginas que no sean estáticas, por ejemplo una página de etiquetas, a una entrada concreta o incluso a una página externa.

Vamos a ver como hacerlo, pero antes de empezar hemos de tener añadidas las páginas estáticas.

[1] Una vez en nuestro escritorio de Blogger, vamos a Diseño - Edición HTML.

[2] Marcamos la casilla de "Expandir las plantillas de artilugios".

[3] Como ya tenemos añadidas las páginas estáticas, localizamos en la plantilla el gadget que las muestra y que será algo como esto:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<liclass='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[4] Una vez localizado, añadiremos los enlaces que necesitamos justo después de </b:loop> tal como vemos en este ejemplo:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>

JUSTO AQUI AÑADIMOS LOS ENLACES
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[5] Los nuevos enlaces los colocamos de esta manera, uno debajo de otro:

<li><a href="DIRECCION_DEL_ENLACE">TEXTO_DEL_ENLACE</a></li>

[6] Usamos "Vista previa" y tendremos que ver algo como esto, los nuevos enlaces a continuación de las páginas estáticas en el orden en que los hayamos ido colocando:

[7] Si todo está correcto, guardamos los cambios.

Fuente: El Escaparate de Rosa

--> Leer Más...

Botón para traducción del blog en 52 idiomas

Efecto en la galería de fotos de tu Plantilla

Entradas resumidas estilo Magazine

Sitemap o tabla de contenido de nuestras publicaciones por fecha

Menú horizontal drop and down con CSS

Añadir otros enlaces en el gadget de páginas estáticas

Buscar

Seguidores

Archivo Crea tu Blog

Destacados

Blogroll GB Perú