agregar contador de visitas en cada entrada o articulo blogger


Acá les traigo un buen contador de visitas para nuestro articulo o entrada de nuestro blogger. 
Primer paso: marcamos la casilla Expandir plantillas de artilugios y buscamos </head> encima pegamos:

.counter {width: 50px; padding: 8px 0 0 0; color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-xWJPOFExOAVqysXG6kxotr7Ly75Wae32PCBmutm7sv6ayv-of448DDm6uSbh4KAQlrJdMmvsEvBjVHLUqiZL6Mo326wZLwySwv2V_SsI0BSQTSdry1JKX5CyqH_2sc5u8obYbACwrV4/s1600/stats.gif) right no-repeat }

Segundo paso: buscamos <div class='post-footer-line post-footer-line-3'> y de bajo pegamos el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<table border='3' title='contador de visitas'>
<tr><td class='counter'></td>
<td>
<a href='http://www.branica.com/'><img alt='Branica' height='18' id='counter' src='http://counters.branica.com/?i=0&u=false&ox=10&oy=17&c=000000&b=plain.jpg&f=Terminator.ttf&fn=false&w=50&h=18&s=10' style='border:none'/><br/><font color='#838383' size='-3'/></a>
</td></tr>
</table>
</b:if>

Cave resaltar que las estadísticas solo aparesera en las entradas mas no en la pagina principal..


foto


Seguir leyendo »

Colocar comentarios facebook en blogger

Ahora aprenderemos a colocar la casilla de comentarios de facebook en blogger, además lo configuraremos para que puedas recibir notificaciones de los nuevos comentarios en tu propio facebook. Comenzamos:

Primero
Nos vamos al blogger > luego clic en diseño > edición HTML > y activamos la casilla EXPANDIR ARTILUGIOS

Como se muestra en la siguiente imagen(clic para agrandar)








Segundo
presionamos Ctrl + F para que se habilite el buscador (el cual va a aparecer en la parte de arriba del navegador) ahí pegamos <div class='post-footer-line post-footer-line-1'> ó<p class='post-footer-line post-footer-line-1'>(varía por el tipo de plantilla)

tal como se muestra en la siguiente imagen (clic para agrandar)




Tercero 
Pegamos el siguiente código debajo del resultado.

<div id='fb-root'/><script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/>
<div id='comentariosface'><fb:comments colorscheme='light' expr:href='data:post.url' height='80' num_posts='3' width='500'/></div>

Acá terminamos con la casilla del comentario facebook para cada entrada de blogger.

Cuarto
Ahora vamos a conectar nuestra casilla de comentario con nuestro facebook para recibir las notificaciones. Para eso debemos crearnos una aplicación facebook. Nos dirigimos a la página de desarrolladores https://www.facebook.com/developers/  y hacemos clic en crear aplicación.
Llena los datos, al poner el nombre le ponemos comentarios blog y acepta las condiciones de facebook.

Tal como se muestra en la siguiente imagen (clic para agrandar)





Luego copias la captcha y aceptas.
NO modifiquen nada solo tenemos que crear la pagina.

Quinto
Ahora buscamos </head> y justo arriba pegamos el siguiente código:

<meta property='fb:admins' content='Tu id de tu perfil facebook'/>
<meta property='fb:app_id' content='tu id de aplicaon facebook'/>

Si no sabes cual es tu id de perfil facebook puedes verlo de esta manera:
Entras a cualquier foto que tu colgaste, vemos la url y todos los números después del ultimo punto es tu id. como en la siguiente imagen (la parte que esta seleccionada es tu id facebook.



el id app lo sacamos de la aplicación que creamos.

Pueden ver un ejemplo en mi otro blog http://elpuenteaxel.blogspot.com/

Seguir leyendo »

Paginación o páginas numeradas en Blogger

Blogger solo muestra un enlace a la página siguiente y anterior, con la páginacion es posible mostrar un cantidad más grande de páginas para navegar indicadas con números y al mismo tiempos el siguiente y anterior su funcionamiento es un script y style muy simple y fácil de colocar el blogger.
Comencemos:
Primero ingresamos a blogger / Plantillas / Edicion HTML y precionando Ctrl + f buscamos ]]></b:skin>
y antes del codigo pegamos lo siguiente:
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:14px;width:640px;padding:17px;} .showpageNum a,.showpage a {background:#D5D5D5; color:#FFF; margin-right:.6em;text-decoration:none;font-size:12px;font-style:italic;line-height:0;text-align:center;padding:12px 12px 12px;} .showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:9px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} .showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;} .showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
Segundo buscamos el </body> y arriba de el pegamos el siguiente script:



<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=24;
var numshowpage=4;
var upPageWord ='Anterior';
var downPageWord ='Siguiente';
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ...    \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ...  \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div|farhan|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Pagina|de|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>


Seguir leyendo »

Los “trucos” de Facebook para que descuides tu privacidad


No hace mucho en este blog nos hacíamos eco de la cantidad y calidad de datos personales a los que tienen acceso las aplicaciones que habitan en las redes sociales y, en particular, en Facebook.
Como alertábamos, muchas de las aplicaciones más populares obtienen información sensible de los usuarios y de los amigos de éstos que luego es utilizada con finalidad muy diversa, no siempre la más deseada. En efecto, según un estudio publicado por el Wall Street Journal, las cien aplicaciones más populares en Facebook recaban información del usuario (y, en ocasiones, de los amigos del usuario) relativas a, entre otras, sus direcciones de correo electrónico, ubicación geográfica y preferencias sexuales (por ejemplo, “interesado en hombres/mujeres”).
Pero lo cierto es que, en aplicación de la legislación española, al objeto de poder recabar y tratar datos de carácter personal de un usuario, resulta necesario para quien recaba los datos contar con el consentimiento inequívoco del usuario afectado. Así lo exige de modo expreso el artículo 6 LOPD.
Y hasta aquí todo en orden porque las aplicaciones en Facebook solicitan el consentimiento del usuario para acceder a sus datos y posteriormente tratarlos con las finalidades correspondientes. Pero resulta que el consentimiento, nuevamente en aplicación de lo exigido por la legislación española, en particular por el artículo 1.265 del Código Civil, es nulo cuando es “prestado por error, violencia, intimidación o dolo”.
Latinajos al margen, y continuando con la aplicación del propio Código Civil, “para que el error invalide el consentimiento, deberá recaer sobre la sustancia de la cosa que fuere objeto del contrato, o sobre aquellas condiciones de la misma que principalmente hubiesen dado motivo a celebrarlo” (artículo 1266 CC). Es decir, que el error tiene que ser sobre el objeto principal del contrato –los datos del usuario en este caso- y no sobre elementos accesorios del mismo.
Pues bien, en este escenario que parecía claro, el paso fin de semana, la web de tecnología Techcrunch publicaba un interesantísimo post en el que hacía referencia a una serie de “trucos” utilizados por Facebook para facilitar el consentimiento del usuario en la entrega de datos. Y como no he podido resistirme, ahí van. Juzguen ustedes si esos trucos son o no suficientes para invalidar el consentimiento del usuario en la entrega de sus datos personales.
1.- Truco Primero: El truco del botón único.
El diseño antiguo de acceso a datos nos permitía optar entre “permitir” y “no permitir”. El nuevo diseño sólo nos permite “jugar”. Hábil, ¿no?
2.- Truco segundo: El truco del texto en gris.
Todos lo sabemos, el gris no es importante. Y si no es importante, mejor ni lo leemos, ¿no?
3.- Truco tercero: El truco de esconder la información a la que permites acceso.
El anterior diseño describía toda la información a la que se tenía acceso. El nuevo diseño sustituye esta retahíla de información por un mucho más “elegante” signo de interrogación.
4.- Truco cuarto: El truco del campo de visión.
¿Y si ponemos el botón “jugar” antes que el resto de la información? Ya nadie se leerá lo de abajo, ¿no? Mucho mejor, habrán pensado.
5.- Truco quinto: El truco del lenguaje amigable.
Éste es mi preferido. ¿Para que pedir permiso si se puede sustituir con un simple “a jugar”?
Ante esta nueva situación, sea legal o no, sean o no suficientes los trucos empleados por Facebook para anular el consentimiento del afectado, lo recomendable es darnos un paseo por la “configuración de las aplicaciones” de Facebook y conocer quién tiene acceso a nuestros datos. Me apuesto que habrá sorpresas.

Seguir leyendo »

Expandir y contraer partes de una entrada

Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.


Primero vamos a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->


Antes de pegar lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo siguiente será usar el código que es el que ocultará las partes dentro de un post. Así que cuando quieras ocultar algún elemento de la entrada deberás usar este código:
<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>

Toma en cuenta que donde dice expandir1 deberás cambiarlo cada vez que quieras usar este efecto, puedes modificarlos por expandir2expandir3, etc. Lo que está en color rojo es el contenido que estará oculto, puede ser texto, imágenes, tablas, videos, etc. cualquier elemento que tengas dentro de un post podrás ocultarlo.

fuente . http://goo.gl/rkeL7

Seguir leyendo »

Insertar tablas en Blogger

Pregunta Ricardo de Alicante, España cómo crear tablas en las entradas del blog. Si bien es algo sencillo requiere de un poco de atención para poder entender, así que haré mi mayor esfuerzo para explicarme.

El código básico para insertar una tabla es el siguiente:
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td>
<td>Cama</td></tr>
<tr><td>Carro</td>
<td>Barco</td>
<td>Avión</td></tr>
<tr><td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td></tr>
</tbody></table>


El resultado es este:

MesaSillaCama
CarroBarcoAvión
LunesMartesMiércoles

Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>
<tr><td>Palabra 1</td>
<td>Palabra 2</td>
<td>Palabra 3</td></tr>

Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>

Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.


<table border="5" cellpadding="4">
<tbody><tr><td>Tabla con borde "5"</td></tr>
</tbody></table>


Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"


<table border="2" bordercolor="green" cellpadding="4">
<tbody><tr><td>Tabla con borde verde</td></tr>
</tbody></table>


Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.


<table border="2" bgcolor="yellow" cellpadding="4">
<tbody><tr><td>Tabla con fondo amarillo</td></tr>
</tbody></table>


Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de<table lo pones después de la etiqueta <tr por ejemplo:
Fila caféFila café
Fila grisFila gris


Este fue el código para hacer eso:
<table border="1" cellpadding="6">
<tbody><tr bgcolor="brown">
<td>Fila café</td><td>Fila café</td></tr>
<tr bgcolor="grey">
<td>Fila gris</td><td>Fila gris</td></tr>
</tbody></table>


También puedes poner una imagen de fondo en la tabla, para lograr eso agregabackground="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.



Tabla con fondo de imagenTabla con fondo de imagen


<table background="URL de la imagen" border="1" cellpadding="4">
<tbody><tr><td>Tabla con fondo de imagen</td>
<td>Tabla con fondo de imagen</td></tr>
</tbody></table>


Como verás después de entender el código básico todo lo demás resulta fácil. De cualquier modo puedes probar los resultados y variaciones en un blog de pruebas antes de publicarlo.

Seguir leyendo »

Ver las publicaciones de todos tus amigos y páginas en Facebook

Seguro tú también habrás notado que muchas de las publicaciones de estas páginas que te gustan nunca aparecen en tu timeline de noticias y parecería que es porque nunca publican nada pero cuando entras directo a su página te das cuenta que no es así.

Esto sucede porque en las últimos cambios que realizó Facebook (uno de los tantos que siempre hace) hizo que por defecto sólo aparezcan las publicaciones de las personas y páginas con las que más interactúas, así que si te hiciste fan de alguna página y nunca diste click en unMe gusta, o nunca comentaste alguna publicación de esa página entonces lo más seguro es que nunca volverá a aparecer en las actualizaciones de tus noticias.

Así que para solucionar esto tienes dos opciones, una es que entres a la página de la que eres fan y hagas click en Me gusta en algunas de sus publicaciones, o bien que comentes en algunas de sus publicaciones, si lo haces durante un par de días o una semana entonces se incluirán de nuevo sus publicaciones en tu timeline de Noticias.


Para que las publicaciones de esa página sigan apareciendo sólo necesitas mantener esa interacción con comentarios o clicks de Me gusta.

La otra opción es cambiar la configuración de Facebook para que puedas ver las publicaciones de todos tus amigos y páginas de la que eres fan.
Para hacer eso entra a tu cuenta de Facebook y en la parte de arriba dentro de la sección Noticias haz click en Más recientes, ahí se desplegará un menú y haz click en Editar opciones


Se abrirá una pequeña ventana, ahí verás que dice Mostrar publicaciones de, haz click en el menú desplegable de al lado y selecciona Todos tus amigos y páginas.


De inmediato podrás ver en tu timeline de Noticias que ya aparecen todas las publicaciones detodos tus amigos y páginas que antes no veías.
Si quisieras ocultar la publicación de alguna de estas páginas o de amigos sólo busca alguna publicación de ese autor y pasa el cursor por el lado derecho hasta que aparezca un ícono de una cruz y haz click ahí.


En el menú desplegable que aparecerá selecciona Ocultar todas las publicaciones de XXXXX, y con eso dejarás de ver las publicaciones de esa página o persona en tus Noticias.

¿Por qué es bueno que tus lectores también conozcan esto? Pues porque quizá muchos de los fans de tu página no saben que estás actualizando contenido en tu blog y eso representa una pérdida significativa de visitas.

Seguir leyendo »

Menú horizontal deslizante con Scriptaculous


Desde que cambié la plantilla del blog han sido muchos quienes me han preguntado cómo poner el menú horizontal deslizante que hice.
La verdad es que no requiere mucha ciencia, es un simple menú en el cual he usado una  tabla y el mismo efecto de Scriptaculous que usamos para expandir y contraer.

Lo primero que haremos será agregar Scriptaculous y Prototype, si ya lo tuvieras no hace falta añadirlo nuevamente. En esta ocasión lo pondremos arriba de la plantilla, esto es para que funcione en Internet Explorer 7, de lo contrario no se deslizará y marcará error.

Así que entra en Diseño | Edición de HTML y después de <head> pega esto:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Luego antes de ]]></b:skin> pega los estilos:
/* Menú CdBlger
----------------------------------------------- */
#menu-cdblger{
background: #0B3861; /* Color de fondo */
width: 100%;
height: 24px;
font-weight:bold;
margin: 0px;
padding: 0px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#menu-cb {margin-top:0px;}

#menu-cb li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu-cb li a {
color:#FFF; /* Color del texto */
text-decoration: none;
}
#menu-cb li a:hover {
color:#CCC; /* Color del texto al pasar el cursor */
}
.menu-into {
background-color: #0B3861; /* Color de fondo del submenu*/
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
Y ahora busca esta línea:
<div id='content-wrapper'>
O si usas una plantilla del Diseñador de plantillas de Blogger entonces busca esta línea:
<div class='tabs-outer'>

Arriba de cualquiera de esas dos pega esto:
<div id='menu-cdblger'>
<ul id='menu-cb' style='position: relative; padding-top: 5px;'>
<li><a href='URL del blog'>Inicio</a></li>
<li><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias1&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias1' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8880;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
</tr>
</table></div></li>

<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>

</ul></div><div style='clear: both;'/>

Por último agrega la URL de los iconos y enlaces donde se indica.
En color verde están señalados los estilos que se pueden cambiar.
Si usas una plantilla del Diseñador de plantillas quizá sea conveniente que elimines todo lo que haya dentro de:
/* Tabs
----------------------------------------------- */

Para agregar más pestañas en el área principal sólo añade otro código como este antes de la última línea:
<li><a href='URL del enlace'>Pestaña</a></li>
El submenú que contiene las demás pestañas es una tabla y obviamente también se le pueden agregar más enlaces.

Si quisieras agregar otro submenú sólo añade antes de la última línea un fragmento como este:
<li><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias2&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias2' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8881;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>

</table></div></li>
Si te fijas este último código es igual al primer submenú (aunque con menos pestañas) lo único que ha cambiado es el doble ID en color naranja. Si se agregara otro submenú más sólo hay que cambiar el ID en color naranja las 2 veces que se indica,  por otro nombre, por ejemplocategorias3

Aunque quizá no es el menú más sofisticado y espectacular, sí es un menú con mucho potencial debido al área del submenú que puede albergar bastantes pestañas de forma organizada, así que si tienes muchos enlaces por agregar esta es una buena opción.
fuente: http://ciudadblogger.com/2011/03/menu-horizontal-deslizante-con.html

Seguir leyendo »

GRANDE

AQUI ESTA LO QUE BUSCAS