Entradas Resumidas solo Titulo

Insertando este condicional en la plantilla nos permitirá mostrar solo los títulos de nuestras entradas en la pagina de inicio del blog de Blogger, sin JavaScript.

Vamos al HTML de nuestra plantilla, presionamos Ctrol+F, nos aparecerá el buscador allí pegamos:

<data:post.body/>

lo reemplazamos por

<b:if codbnd='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p><data:post.body/></p>
</b:if>

Luego obtenemos una vista previa de su plantilla para verificar que todo esté correcto para guárdela.

Así solo visualizaremos en la pagina de inicio de nuestro blog de Blogger, solo el títulos de las entradas; logrando que la carga de la pagina sea más rápida.

Leer más

Como poner paginación en el blog?

Ir a Plantilla → Hacer Copia de seguridad de la plantilla Ir a ►Edición de HTML► presionamos CTRL+F en el buscador pegamos </body> y arriba de el pegamos el siguiente código:

<style type='text/css'>
.showpageOf{display:none!important}
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;padding:10px;}
.showpageNum a,.showpage a {background:#a991af; color:#fff; margin-right:.6em;text-decoration:none;font-size:12px;font-style:italic;line-height:0;text-align:center;padding:10px;}
.showpageNum a:hover,.showpage a:hover {background:#ebb499; color:#fff; margin-right:.6em;text-decoration:none;font-size:10px;font-style:italic;line-height:0;text-align:center;padding:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.showpagePoint {background:#ebb499; color:#fff; margin-right:.6em;text-decoration:none;font-size:12px;font-style:italic;line-height:0;text-align:center;padding:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
</style>
<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=2;
var numshowpage=2;
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>

Para personalizarlo se pueden cambiar los siguientes valores antes de Guardar la plantilla:

var postperpage=2 : → Número de entradas por página.
var numshowpage=2 : → Numero de cuadros a visualizar detrás y delante de la página activa.
var upPageWord='Anterior' : → Texto para el botón de las páginas previas.
var downPageWord='Siguiente' : → Texto para el botón de las páginas siguientes.

color:  → Se puede cambiar el color.
background: → Se puede cambiar el color.
font-family: → Se puede cambiar la fuente.

Leer más

Cómo hacer Blogger Plantilla Responsive

Una plantilla sensible blogger también la gran parte de blogger SEO, hoy en día todos los que usan los navegadores móviles, me refiero a decir que la mayoría de los usuarios son procedentes de una plataforma móvil, por lo que es necesario tener la Plantilla Blogger Responsive.

1. Vaya al escritorio de Blogger ► Plantilla.
2. Haga clic en el icono de engranaje para el móvil.
3. A continuación, seleccione "Sí. Mostrar plantilla móvil en los dispositivos móviles. "Y elegir el tema.(Personalizado)
4. Haga clic en el botón de guardar.

Veamos ahora unos detalles más técnicos de cómo se crearía una media query. Siempre que este familiarizado con las hojas de estilo resultará sencillo. Simplemente se trata de declarar las reglas específicas para cada tamaño dentro de una declaración con esta forma:

@media only screen and (max-width: 480px) { … }

Podemos especificar más dándole un ancho máximo y mínimo, por ejemplo:

@media only screen and (min-width: 480px) and (max-width: 768px) { … }

Dentro de los corchetes ubicaremos las reglas específicas de cada medida. No hay consenso sobre los puntos de cambio de las reglas, pero una definición lógica podría ser:

Móviles: max-width:480px

Tableta: min-witdh:480px and max-width: 800px

Desktop: min-witdh:800px and max-width: 1200px

Desktop de alta resolución: min-width:1200px

Para aplicarlo en la plantilla

• Ir a la plantilla ► Editar HTML.
• En el buscador ► Presionando CTRL+F pegar </head>

Sobre/arriba/encima pegar el siguiente código.


<!-- Plantilla Responsive -->
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
@media only screen and (max-width:979px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer{width: 100%!important;margin-right: 0!important;}
}
</style>

► Presiona Vista previa y si esta todo en orden Guarda la plantilla y tendrás tu Plantilla del blog Responsive.

► Para verificar escribir  http://Nombre del blog.blogspot.com/?m=1.

 Pruebalo en Troy test responsive

Leer más

Etiquetas con efecto hover en el blog

Blogger predefine el widget de etiquetas o categorías tipo lista, para darle estilo y dividirlo en dos columnas hay que:

• Ir a Plantilla.
• Personalizar y llegaremos hasta el 
• Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
• Avanzado, abajo del todo encontrarán una opción que dice 
• Añadir código CSS personalizado, en el recuadro

/*- Etiquetas -*/
#Label1 ul li{
float: left;
width: 45%;
}
#Label1 li{list-style: none;
margin: 0px!important;
padding: 0px!important;
}
#Label1 li a{
display: block;
width: 100px; /* ANCHO DE LINKS */
background: #ccc; /* FONDO DE LINKS */
color: #000000; /* COLOR DE LINKS */
border-left: 0px solid #eee; /* BORDE DE LINKS */
margin-bottom: 3px;
font: 9px verdana;
padding: 7px;
padding-left: 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
/* LINKS HOVERS */
#Label1 li a:hover{
background: #f4915f;
box-shadow: inset 0 0 16px #f0a882, 0 0 0px #f0a882;
border-left: 10px solid #f0a882; /* BORDE DE LINKS */
color: #000000; /* COLOR DE LINKS */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
letter-spacing: 0px;
}

Para  finalizar Aplicamos al blog

Este es el resultado

Blogger Diseño CSS Html Seo Gadget

Herramientas Personalizar Botones Etiquetas Condicionales Comentarios

Leer más

Botón minimalista para el blog

Esta clase de botones minimalista utilizando solo HTML son muy útiles, porque lo puedes poner donde quieras en tu web o blog sin complicaciones y se adaptan a tus necesidades.

Puedes utilizarlo en una entrada de tu blog o añadirlo en un gadget.

► Poner en HTML de la entrada este código:

<div class="boton-cpb"><a href="URL-que-desees-poner" rel="nofollow" target="_blank">Botón Minimalista</a></div>

Solo hay que reemplazar lo que esta en en rojo por la URL y el texto, en azul, correspondiente y guárdalo.


► Para integrarlo en tu blog tienes que ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

Pegamos el siguiente código css:

.boton-cpb a{
font:normal normal 12px Montserrat; /*Tamaño y tipo de letra*/
text-transform: uppercase; /*Para que esté en mayúsculas, sino borrar esta línea*/
letter-spacing: 3px; /*Espaciado entre letras, si no queréis borrar línea*/
background: #333333; /*Color de fondo del botón*/
border: 1px solid #333333; /*Tamaño, estilo y color del borde*/
color:#ffffff; /*Color de las letras*/
padding: 5px;
text-decoration:none;
}
.boton-cpb a:hover{ /*Al pasar el ratón por encima*/
background: #eeeeee; /*Color del fondo al pasar el ratón por encima*/
border: 1px solid #eeeeee; /*Tamaño, estilo y color del borde al pasar el ratón*/
color:#000; /*Color de las letras al pasar el ratón*/
text-decoration:none;
}

Resultado del Botón minimalista

Botón minimalista

El atributo "nofollow" ofrece a los webmasters un modo de indicar a los motores de búsqueda "No seguir los enlaces de esta página" o "No seguir este enlace concreto".

Leer más

Botones de colores sencillos con CSS

Botones de colores sencillos con CSS, funcionan en cualquier navegador incluyendo Internet Explorer.


El HTML es genérico, se escribe siempre igual:

<a class="boton color" href="#">ejemplo</a>

Para integrarlos en tu blog tines que ir a:



Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente código css:

.boton{ display: inline-block; text-decoration: none; font: bold 12px/12px HelveticaNeue, Arial; padding: 8px 11px; color: #555; border: 1px solid #dedede; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .boton.blanco{ background: #f5f5f5; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0)); /* WebKit */ background: -moz-linear-gradient(top, #f9f9f9, #f0f0f0); border-color: #dedede #d8d8d8 #d3d3d3; color: #555; text-shadow: 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb; } .boton.blanco:hover{ background: #f4f4f4; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#f8f8f8)); /* WebKit */ background: -moz-linear-gradient(top, #efefef, #f8f8f8); border-color: #c7c7c7 #c3c3c3 #bebebe; text-shadow: 0 1px 0 #fdfdfd; -webkit-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; -moz-box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; } .boton.gris{ background: #bdbdbd; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#aeaeae'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#aeaeae)); /* WebKit */ background: -moz-linear-gradient(top, #cacaca, #aeaeae); border-color: #b5b5b5 #a1a1a1 #8f8f8f; color: #555; text-shadow: 0 1px 0 #d4d4d4; -webkit-box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7; -moz-box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7; box-shadow: 0 1px 1px #c9c9c9, inset 0 1px 0 #d7d7d7; } .boton.gris:hover{ background: #c2c2c2; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bcbcbc', endColorstr='#c2c2c2'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbc), to(#c2c2c2)); /* WebKit */ background: -moz-linear-gradient(top, #bcbcbc, #c2c2c2); border-color: #989898 #8e8e8e #878787; text-shadow: 0 1px 0 #dadada; -webkit-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; -moz-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; } .boton.rosado{ background: #f67689; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78297', endColorstr='#f56778'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#f78297), to(#f56778)); /* WebKit */ background: -moz-linear-gradient(top, #f78297, #f56778); border-color: #df6f8b #da5f75 #d55061; color: #913944; text-shadow: 0 1px 0 #f89ca9; -webkit-box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1; -moz-box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1; box-shadow: 0 1px 1px #c1c1c1, inset 0 1px 0 #f9a1b1; } .boton.rosado:hover{ background: #f67c90; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f56c7e', endColorstr='#f78297'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#f56c7e), to(#f78297)); /* WebKit */ background: -moz-linear-gradient(top, #f56c7e, #f78297); border-color: #c36079 #c25669 #c14e5c; text-shadow: 0 1px 0 #f9a6b4; -webkit-box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e; -moz-box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e; box-shadow: 0 1px 1px #c3c3c3, inset 0 1px 0 #f8909e; } .boton.naranja{ background: #fecc5f; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feda71', endColorstr='#febb4a'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febb4a)); /* WebKit */ background: -moz-linear-gradient(top, #feda71, #febb4a); border-color: #f5b74e #e5a73e #d6982f; color: #996633; text-shadow: 0 1px 0 #fedd9b; -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; } .boton.naranja:hover{ background: #fecb5e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fec354', endColorstr='#fecd61'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#fec354), to(#fecd61)); /* WebKit */ background: -moz-linear-gradient(top, #fec354, #fecd61); border-color: #d29a3a #cc9436 #c89133; text-shadow: 0 1px 0 #fee1a0; -webkit-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; -moz-box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; } .boton.verde{ background: #b7d770; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cae285', endColorstr='#9fcb57'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#cae285), to(#9fcb57)); /* WebKit */ background: -moz-linear-gradient(top, #cae285, #9fcb57); border-color: #adc671 #98b65b #87aa4a; color: #5d7731; text-shadow: 0 1px 0 #cfe5a4; -webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4; -moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4; box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #d7e9a4; } .boton.verde:hover{ background: #b9d972; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8d872', endColorstr='#b9d972'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#b8d872), to(#b9d972)); /* WebKit */ background: -moz-linear-gradient(top, #b8d872, #b9d972); border-color: #8bb14d #83a648 #7d9e45; text-shadow: 0 1px 0 #d5e8aa; -webkit-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295; -moz-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295; box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #cae295; } .boton.azul{ background: #92dbf6; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe4f8', endColorstr='#6fcef3'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#abe4f8), to(#6fcef3)); /* WebKit */ background: -moz-linear-gradient(top, #abe4f8, #6fcef3); border-color: #8dc5da #76b7cf #63abc7; color: #42788e; text-shadow: 0 1px 0 #b6e6f9; -webkit-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa; -moz-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa; box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #c0ebfa; } .boton.azul:hover{ background: #92dbf6; border-color: #7caec0 #68a3ba #5a9cb5; text-shadow: 0 1px 0 #bee9fa; -webkit-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8; -moz-box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8; box-shadow: 0 1px 1px #d6d6d6, inset 0 1px 0 #ade4f8; } .boton.violeta{ background: #dfaeda; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8c4e4', endColorstr='#d494ce'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#e8c4e4), to(#d494ce)); /* WebKit */ background: -moz-linear-gradient(top, #e8c4e4, #d494ce);> border-color: #bc9db9 #ad89aa #a1799d; color: #7b5777; text-shadow: 0 1px 0 #eacae6; -webkit-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb; -moz-box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb; box-shadow: 0 1px 1px #d5d5d5, inset 0 1px 0 #eed3eb; } .boton.violeta:hover{ background: #e0b1db; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#deabd9', endColorstr='#e0b1db'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#deabd9), to(#e0b1db)); /* WebKit */ background: -moz-linear-gradient(top, #deabd9, #e0b1db); border-color: #a482a0 #9b7897 #947090; text-shadow: 0 1px 0 #ecd0e9; -webkit-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; -moz-box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; box-shadow: 0 1px 1px #cdcdcd, inset 0 1px 0 #ccc; } .boton.negro{ background: #525252; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e5e5e', endColorstr='#434343'); /* IE */ background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(#434343)); /* WebKit */ background: -moz-linear-gradient(top, #5e5e5e, #434343); border-color: #4c4c4c #313131 #1f1f1f; color: #fff; text-shadow: 0 1px 0 #2e2e2e; -webkit-box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686; -moz-box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686; box-shadow: 0 1px 1px #afafaf, inset 0 1px 0 #868686; } .boton.negro:hover{ background: #5a5a5a; border-color: #2c2c2c #1c1c1c #101010; text-shadow: 0 1px 0 #363636; -webkit-box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383; -moz-box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383; box-shadow: 0 1px 1px #b1b1b1, inset 0 1px 0 #838383; }

Resultado

ejemplo ejemplo
ejemplo ejemplo
ejemplo ejemplo
ejemplo ejemplo

Leer más

Ocultar los elementos de post-footer

Para ocultar los elementos de post-footer en la portada del blog ir a

Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

</head>

encima añade este bloque

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type="text/css">
.post-footer {
display: none;
}
</style>
</b:if></b:if>

►Para finalizar presionamos Vista Previa y si todo esta bien guardamos la plantilla.


Así se abran ocultado los datos del post-footer en la portada del blog en Blogger.

Leer más

Mostrar y ejecutar un elemento sólo en las páginas estáticas

Hay Gadgets de Blogger que podemos eliminar para hacer la carga más ligera, hay otros Gadgets en el blog que son necesarios para el blog y no queremos eliminarlos, así que lo que haremos será Mostrarlos y que solo se ejecuten en las páginas estáticas, y cuando el visitante entre a la portada este no estará.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
El código del elemento...
</b:if>

Sólo hay que localizar el gadget y agregar lo que esta en rojo, en este ejemplo utilizo el código de un LinkList1.

<b:widget id='LinkList1' locked='false' title=' ' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'> <ul>
<b:loop values='data:links' var='link'> <li>
<a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>

La primera linea que agregamos va justo después de <b:includable id='main'> y la segunda parte justo antes de </b:includable>

Esto lo haremos con cada uno de los gadgets que queremos esconder, aunque tienen un código distinto, sólo hay que guiarse por los datos que he dado.
De esta forma los gadgets se mostrarán solo en las paginas estáticas de nuestro blog, pero en las entradas se ocultarán.

Leer más

Reemplazar los links Entradas antiguas por el título de la entrada.

Para reemplazar los links Entradas antiguas, Entradas mas recientes por el título de las entrada en Blogger ir a

Plantilla → Copia de seguridad de su plantilla ►Haga clic en "Editar HTML"
Buscar

<data:post.body/>

debajo pegar

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<ul class='blog-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Siguiente</strong> <span>Usted esta viendo la Publicación más Reciente </span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Anterior</strong> <span>Usted esta viendo lo Último Publicado</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Siguiente</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Anterior</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>

El texto resaltado con color puede ser sustituido por el texto que desee.

buscar

<b:includable id='nextprev'>

aparecera un codigo similar a este

<div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>
   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>
</div>
<div class='clear'/> 

Encerrar este código dentro de los códigos condicionales como se muestra a continuación:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
código 
</b:if></b:if>

quedando así

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if></b:if>

Pegar debajo de

<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Nota: si ya tiene Jquery en la plantilla no ponerlo nuevamente

]]></b:skin>

arriba de este pegar

/*blog.page
-------------*/
.blog-pager {
border-top: 2px dashed #ddd;
border-bottom: 2px dashed #ddd;
 margin-bottom: 10px;
 overflow:hidden;
padding:0px;
}
.blog-pager li.next {
 float: right;
padding:0px;
background:none;
margin:0px;
}
.blog-pager li.next a {
 padding-left: 24px;
 }
.blog-pager li.previous {
 margin:0px -2px 0px 0px;
float: left;
 border-right:1px solid #ddd;
padding:0px;
background:none;
}
.blog-pager li.previous a {
padding-right: 24px;
 }
.blog-pager li.next:hover, .blog-pager li.previous:hover {
background:#333333; /*fondo al pasar el cursor*/
}
.blog-pager li {
width: 50%;
display: inline;
float: left;
text-align: center;
}
.blog-pager li a {
position: relative;
min-height: 77px;
display: block;
padding: 15px 46px 15px;
outline:none;
text-decoration:none;
}
.blog-pager li i {
 color: #ccc;
font-size: 18px;
}
.blog-pager li a strong {
display: block;
font-size: 20px;
color: #ccc;
letter-spacing: 0.5px;
font-weight: bold;
text-transform: uppercase;
font-family:oswald,
sans-serif, arial;
margin-bottom:10px;
}
.blog-pager li a span {
font-size: 15px;
color: #666;
 font-family:oswald,Helvetica, arial;
margin:0px;
}
.blog-pager li a:hover span,
.blog-pager li a:hover i {
color: #ffffff; /* color del texto al pasar el cursor*/
}
.blog-pager li.previous i {
 float:left;
margin-top:15%;
margin-left:5%;
}
.blog-pager li.next i {
float: right;
margin-top: 15%;
margin-right: 5%;
}
.blog-pager li.next i, .blog-pager li.previous i ,
.blog-pager li.next, .blog-pager li.previous{
-webkit-transition-property: background color;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: background color;
-moz-transition-duration: 0.4s;
-moz-transition-timing-function: ease-out;
-o-transition-property: background color;
-o-transition-duration: 0.4s;
-o-transition-timing-function: ease-out;
transition-property: background color;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
.fa-chevron-right {
padding-right:0px;
}

Leer más

Efecto de mostrar/ocultar la Navbar (Barra de Navegación) de Blogger

Para dejar la Navbar (Barra de Navegación) de Blogger y crear un efecto de mostrar/ocultar que se ejecute al pasar el mouse, logrando que la barra aparecerá y al quitarlo desaparecerá.

Para ello debemos ingresar a nuestro blog y luego

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
pegamos el siguiente estilos css:

#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

podemos agregarle color de fondo

#navbar-iframe {
background:#6CD1E7; /* Color de la navbar */
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#F06969; /* Color al pasar el cursor */
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Puedes ver el truco funcionando en nuestro BLOG DE PRUEBAS


→ Para Quitar la barra de navegación de Blogger (Navbar)

Leer más

Pie de pagina de las entradas personalizado en el blog

Para personalizar el post footer (pie de pagina de las entradas) de tu blog de blogger ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css:

/*Imagen en CATEGORÍAS - ETIQUETAS
------------------------*/
.post-labels{
padding-left:15px;
padding-top:2px;
background: url(URL de la imagen) center left no-repeat;
}
/*Imagen en FECHA
------------------------*/
.comment-timestamp {
padding-left: 10px;
padding-top: 2px;
background: url(URL de la imagen) center left no-repeat;
}
/*Imagen en COMENTARIOS
------------------------*/
.comment-link{
padding-left:20px;
padding-top:2px;
background: url(URL de la imagen) center left no-repeat;
}
/*Imagen en HORA
------------------------*/
.post-timestamp {
padding-left: 15px;
padding-top: 2px;
background: url(URL de la imagen) center left no-repeat;}
/*Imagen en (Publicado por) o AUTOR
---------------------------------*/
.post-author{
padding-left:10px;
padding-top:2px;
background: url(URL de la imagen) center left no-repeat;
}

Leer más

Personalizar los gadgets en Blogger

Para personalizar los gadgets en Blogger, podemos hacerlo de dos formas:

✒ Personalización individual de los gadgets del blog

Para proceder a personalizar cada uno los gadgets de la sidebar, individualmente, debemos saber identificarlos. Para esto vamos a Editar el HTML de nuestro blog de blogger:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

en el pegamos

<b:section-contents id='sidebar-right-1'>

Nos mostrara la sección donde se encuentran las identificaciones de los gadgets de la sidebar, cuyo código es como el siguiente:

<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Título del gadget' type='Profile'/>
<b:widget id='Image1' locked='false' title='Título del gadget' type='Image'/>
<b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/>
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Título del gadget' type='NewsBar'/>
</b:section-contents>

Este código corresponde a un blog con seis tipos de gadgets. Cada uno de los entrecomillados resaltados en rojo es como se identifica cada uno de los gadgets, es lo que debemos tener en cuenta para personalizarlos. Los entrecomillados resaltados en azul son los tipos de gadgtes.

Teniendo identificados los gadgets ir a:

• Plantilla 
• Personalizar 
• Diseñador de Plantillas 
• Avanzado 
• Añadir Código CSS Personalizado,en el recuadro pegar el Código correspondiente. 

Ejemplo personalizar el titulo de BlogArchive1

#BlogArchive1 h2{
color: #0b3861; /* Color del título */
background: #58acfa; /* Color del fondo */
text-align: center; /* Título en el centro */
font-weight: bold; /* Título en negrilla */
font-family: Verdana; /* Tipo de fuente */
font-size: 12px; /* Tamaño de la fuente */
}

Podemos poner un ícono o imagen al título de un gadget

#BlogArchive1 h2{
color: #0b3861; /* Color del título */
background: url(URL de la imagen) center left no-repeat;
text-align: center; /* Título en el centro */
font-weight: bold; /* Título en negrilla */
font-family: Verdana; /* Tipo de fuente */
font-size: 12px; /* Tamaño de la fuente */
}

Para que la imagen quede a la derecha del título cambiamos left por right.

►La identificación de los gadgets la debemos poner exactamente igual a como están en los códigos de nuestra HTML, teniendo en cuenta mayúsculas y minúsculas, anteponiendo el símbolo #.

✒ Personalización del contenido del blog.

Teniendo en cuenta los Elementos de la plantilla de Blogger podemos personalizar gadgets o widget de nuestro blog

......widget-content{
color: #...; /* Color del texto */
background: #...; /* Color del fondo */
font-family: ....; /* Tipo de fuente */
font-size: ...px; /* Tamaño de la fuente */
}

Ir a para esto ir a:

• Plantilla
• Personalizar
• Diseñador de Plantillas
• Avanzado
• Añadir Código CSS Personalizado,en el recuadro pegar el Código:

Ejemplo:

.sidebar .widget {
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 2px solid #eee;
}
.sidebar .widget-content {
margin-top: 15px;
}
.sidebar .widget h2 {
border-bottom: 1px solid #eee;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
}

Leer más

Letra capital en la entradas del blog

Cambiar la letra inicial del texto, la primera letra o letra capital dando una apariencia distinta.

Con este método, automático, se mostrara tu letra en todas las entradas con un tamaño de fuente mayor, evitando el procedimiento antiguo en que había que utilizar un código para mostrar la letra capital entrada por entrada.

Para aplicarlo en tu blog de blogger ir a: 

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

.post-body:first-letter {
font-size:28px;
color:#007cbb;
font-style: italic;
}

para aplicarlo a titulo del post

.post h3 a:first-letter {
font-size:28px;
color:#666666;
font-style: italic;
}

se puede cambiar

• font-size: tamaño de la letra
• color: color de la letra
• font-style: estilos de fuente (oblique; normal;)

Ademas se le pueden agregar otros estilos (padding: ; margin: ; border: ; etc.)

Leer más

Ampliar las entradas y ocultar la sidebar en las páginas estáticas

En esta entrada mostrare como lograr que las entradas independientes o páginas estáticas tengan un ancho mucho mayor al de las entradas normales y que la sidebar (barra lateral) se oculte.Ver ejemplo aquí.

Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

</head>

Encima añade este bloque:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper {
float: center;
width: 1000px;
}
#sidebar-wrapper {
visibility: hidden;
display: none;
 width: 0px;
}
</style>
</b:if>

El main-wrapper (la zona de las entradas) tendrá un ancho de 1000 píxeles.

La barra lateral (sidebar-wrapper) estará oculta (visibility: hidden; display: none;) y con un ancho de 0 píxeles (width: 0px;).

Guarda la plantilla para terminar.

Leer más

Elementos de la plantilla de Blogger

Elementos wrapper de la plantilla de Blogger.

Los contenedores siguen una estructura de envolventes, una jerarquía.

El outer-wrapper es el envoltorio principal del blog, el mayor, el que define el ancho total.

El header-wrapper es el que contiene al encabezado, nuestro logo, etc. El ancho de éste y los demás elementos principales que contiene el outter-wrapper debe ser menor o igual a éste, sino se producirán errores de overflow.

El content-wrapper es el contenedor de contenido, no es el contenedor de los posts, sino a uno mayor que engloba al sidebar y a los posts. Al igual que el header-wrapper su parámetro de ancho (width) debe ser menor o igual al del outer-wrapper.

El main-wrapper es el contenedor de los posts, aquí por ejemplo puedes elegir un color de fondo para todo este campo o los márgenes respecto a los límites del content-wrapper o los paddings, etc.

El sidebar-wrapper es el contenedor del sidebar, aquel donde se encuentran contenidos todos nuestros widgets y/o elementos que hemos incorporado en forma de código html, javascript, imágenes. Aquí suelen configurarse el estilo de las listas (por ejemplo para las entradas o el archivo, el blogroll o los enlaces, etc.). En el caso sean 2 en Blogger suelen llamarse sidebar1-wrapper y sidebar2-wrapper.

El footer-wrapper es aquel contenedor inferior del blog donde se publican los créditos del theme, el hosting, licencias, autores, etc.

Leer más

Mostrar las etiquetas del blog en mayúsculas o minúsculas

Para poner las etiquetas de tu sidebar (barra lateral) en mayúsculas o minúsculas se puede hacer, simplemente añadiendo unas líneas de CSS, sin entrar en la edicion de HTML.

1. Primero debes tener el Gadget de etiquetas colocado en tu sidebar. 
2. Debemos ir a Plantilla, ▶ Personalizar y llegaremos hasta el ▶Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice ▶ Avanzado, abajo del todo encontrarán una opción que dice añadir ▶ Añadir código CSS personalizado
   
   en ese recuadro van a añadir lo siguiente:

• Para mostrar las etiquetas en MAYÚSCULA:

#Label1 ul {text-transform:uppercase;
text-align:center;
margin:0px;
padding:0px;}
#Label1 ul li {display:inline;}

• Para mostrar las etiquetas en minúsculas:

#Label1 ul {text-transform:lowercase;
text-align:center;
margin:0px;
padding:0px;}
#Label1 ul li {display:inline;}

lowercase: muestra todo el texto del elemento con letras minúsculas.
uppercase: muestra todo el texto del elemento con letras mayúsculas.

Sintaxis

• text-transform: permite transformar el texto de un elemento para mostrarlo en mayúsculas, minúsculas o una mezcla de ambas

• text-align: La alineación de los contenidos (texto, imágenes) que se encuentran dentro de un elemento de bloque.Puede ser: left, right, center, justify, inherit.

• margin: Establece el ancho de  los márgenes. En px.

• padding: Para el ancho. En px.

• display: Es el tipo de caja generada por un elemento, sólo uno de los siguientes valores: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.

Todo estos datos puedes cambiarlos según el diseño que se ajuste a tu gusto, estos cambios los podrás ir viendo en la pre-visualización del diseño.

Le dan a aplicar al blog y listo.

Leer más

Quitar ese espacio en la parte superior de la plantilla del blog

Para quitar ese espacio en la parte superior de la plantilla del blog.

 Hay que agregar un margen con valor negativo para que suba la estructura del blog.

1. Lo primero que debemos hacer es ir a Plantilla, 
2. Personalizar.
3. Llegaremos hasta el Diseñador de Plantillas, vamos abajo del todo en donde dice
   
4. Avanzado, abajo del todo encontrarán una opción que dice 
5. Añadir CSS, 
6. En ese recuadro van a añadir lo siguiente:

.navbar {
margin-top:-30px !important;
}

En vista preliminar, que se encuentra debajo, podrás observar los cambios. Le dan aplicar al blog y listo, con ese margen de valor negativo se habrá subido la estructura de la plantilla desapareciendo ese espacio en la parte superior.

Si el espacio es mayor puedes aplicar un margen menor o modificarlo donde dice -30px.

▶ Para quitar la NavBar puedes ver esta entrada Quitar la barra de navegacion de Blogger (NAVBAR)

Leer más

Centrar la cabecera del blog

Para centrar nuestra cabecera del blog lo que debemos hacer es:

1. Ir a Plantilla, 
2. Personalizar y llegaremos hasta el 
3. diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
4. Avanzado, abajo del todo encontrarán una opción que dice 
5. añadir CSS, en el recuadro van a añadir

el siguiente código:

.header .widget {
text-align:center;
}
.header img {
margin:0 auto;
}

Hacen click en aplicar al blog y ya está listo.

Leer más

Poner Fondo al cuerpo de tu blog

Para cambiar el fondo de nuestro blog por una imagen o cambiar la imagen de fondo actual por otra. Para ello:

1. Guardan plantilla por si nos equivocamos

Para personalizarlo nos vamos a Plantilla ► Editar HTML y buscamos con (Crtl +F)  . Accents

/* Accents
---------------------------------------------- */ 

Debajo pegan esto:

.main-outer {
background: url( URL DE LA IMAGEN)repeat;
background-position: center;
padding: -10
width: 1000px;
border-right: 0px dashed #639CD7;
border-left: 0px dashed #639CD7;
}
.footer-outer {
background: url(URL DE LA IMAGEN )no-repeat;
background-position: bottom center;
padding; -10
width: 1000px;
height: 209px;
border-right: 0px dashed #639CD7;
border-left: 0px dashed #639CD7;
border-bottom: 0px dashed #639CD7;
margin-bottom: 1px;
}

Sintaxis

URL DE LA IMAGEN: la URL de la imagen.
.main-outer : Cuerpo del blog
.footer-outer : El pie de página
width : Ancho de la imagen
height: Medida de alto de la imagen
border-right:  El marco

Las medidas tienen que ir probando hasta dar con el píxel justo que encaje hasta que quede.

Es sencillo de poner en el blog, lo complicado es dar con la imagen adecuada o hacerla.

Leer más

Estilos de blockquote o texto citado

El blockquote o texto citado se usa para resaltar partes de texto sea frase o código que sean de importancia.
La forma de usarlo es encerrando el texto que quieres citar entre <blockquote> y </blockquote> o usando el icono que se encuentra en el editor de entradas.

Para personalizarlo nos vamos a Plantilla, Editar HTML y buscamos:

blockquote {
..............
..............
..............
}

solo tienes que eliminarlo y sustituir por cualquiera de los códigos

• 1º Blockquote

/*blockquote
---------------*/
blockquote {
-webkit-transition: all 0.2s linear;
background: #F7F7F7;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ACACAC;
clear: both; color: #666666;
font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-size: 15px;
line-height: 22px;
margin: 10px 30px;
overflow: auto;
padding: 4px 10px;
transition: all 0.2s linear;
width: auto;
}

• 2º Blockquote

/*blockquote
---------------*/
blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitaSi2C6BMD_kSBhVPBb16N7LiO1r1yrERi16937jQTxauRJ4V1C7NqqXYilq8hbp8VX5d_iNX0prcuegwn_QQ7agjxqt-4RhVJQGVymmyUfQP5yfMLBWhJBFgR1sgIqVzs5uHAHyOj8Yc/h120/quote.png)
no-repeat;
margin: 20px;
color: #666;
border-bottom: 1px solid #e8e8e8;
background-color: #f9f9f9;
padding: 20px 0px 9px 30px;
color: #000;
margin-left: 10px;
margin-top: -9px;
width: 520px;
-webkit-border-radius: 6px; border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
font-style: italic;
line-height: 30px;
padding-right: 20px;
}

• 3º Blockquote

/*blockquote
---------------*/
blockquote{
background-color:#F5F5F5;
border-color:#CCC;
border-style:dashed dashed dashed solid;
border-width:1px 1px 1px 5px;
color:#666;
padding:10px
}

• 4º Blockquote
  

/*blockquote
---------------*/
blockquote {
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-box-shadow: inset 0px 0px 7px #222;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-webkit-box-shadow: inset 0px 0px 7px #222;
background-color: transparent;
border: 2px dashed #797979;
box-shadow: inset 0px 0px 7px #222;
color: black;
font: normal 11px/16px Verdana,Arial,Sans-Serif;
height: 150px;
margin: 0px 30px 15px;
padding: 28px 28px;
display:block;
font:normal 12px/22px Monaco,Monospace !important;
color:#CFDBEC;
background-color:#2f2f2f;
background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
}

• 5º Blockquote

/*blockquote
---------------*/
blockquote {
background-color: white;
font-family: Lato, Helvetica, Arial;
font-size: 17px;
line-height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6I6P5FTmWOE3rGDfDF8jQHUIBGUVQVX9Ifu0IpbLkbCFVL793X5yF5BVsH11FaUK1xR-_bqTOjOCQFrYlAN5DiLqt7xQCcgzDar26qzgk1-OjvyzU7NAJBMWYjIORRaenFreIPZZsAphK/h30/quotel+ined.png) 0px 0px repeat-y scroll rgb(255, 255, 255);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid rgb(220, 220, 220);
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 30px inset, rgba(0, 0, 0, 0.2) 1px 1px 3px;
color: #333333;
padding: 15px 0px 15px 42px;
white-space: pre-wrap;
width: 400px;
word-spacing: 5px;
word-wrap: break-word;
}

Para añadir el blockquote sin entrar en el HTML


Ir a Diseñador de plantillas ► 1 Avanzado ► 2 Añadir CSS ►3 pega el código HTMLque elijas luego►4 Aplicar al blog.

Si sus plantillas ya tienen el blockquote personalizado, entonces cuando agreguen el código que han personalizado pueda que sobrescriban los códigos. Para que su personalización tome prioridad, añadan !important al final de cada código. Ejemplo:

blockquote {
 background-color: #F2706B !important;
 padding: 10px !important;
 margin: 10px !important;
 border-color: #FCF3F2!important;
 border-style: dashed !important;
 border-width: 1px !important;
 -webkit-border-radius: 10px !important;
 -moz-border-radius: 10px !important;
 border-radius: 10px !important;
 font-family: 'Open Sans Condensed', sans-serif !important;
 font-size: 14px !important;
 color: #000!important;
 }

Sintaxis en CSS

background-color: #valor-hexadecimal; Color del fondo Los seis números que representan un color.

background-image: url(‘enlace’); La imagen del fondo

background-position: left top; background-position: left center; background-position: left bottom; Posición del fondo Pueden usar una de las posiciones, siempre y cuando estén usando una imagen de fondo.

background: repeat; Repetición del fondo Pueden remplazarlo con repeat-x, repeat-y y no-repeat.

padding: 10px; Relleno El espacio entre el texto y el borde de contenedor. Pueden cambiar el valor de 10 por el que ustedes gusten. También pueden remplazar padding por padding-top, padding-left, padding-right; y padding-bottom;.

margin: 10px; Margen El espacio afuera del contenedor. Pueden cambiar el valor de 10 por el que ustedes gusten. También pueden remplazar margin-top, margin-left, margin-right; y margin-bottom;.

border-color: #valor-hexadecimal; Color del borde Seis números que representan el color.

border-style: dashed; Estilo del borde Pueden remplazar dashed (guiones) con dotted (punteada) o solid (sólida).

border-width: 3px; Ancho del borde Remplacen el 3px con el valor que gusten.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; Esquinas redondeadas Remplacen el valor de 10 por el que ustedes gusten.

font-family: ‘nombre-de-la-fuente’, ‘fuente-alternativa'; Tipografía Por ejemplo: Arial, Helvetica, sans-serif;

font-size: 16px; Tamaño de la tipografía Remplacen el valor 16 por el tamaño que ustedes deseen.

color: #valor-hexadecimal; Color de la tipografía Los seis números que representan el color.

Leer más