Cosas para el Blog

Entradas Resumidas solo Titulo

11 de octubre de 2023

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 == "item"'>
<p><data:post.body/></p>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<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.

Entradas relacionadas con imagen en Blogger

18 de septiembre de 2016

Entradas Relacionadas con miniaturas o Related Posts with thumbnails en el blog es muy útil y se hace mediante las etiquetas que tenga tu blog, por lo que se mostrarán los post relacionados que están bajo la misma etiqueta.

Con de los Related Posts al final de las entradas de Blogger se aumenta las visitas del blog, ya que es muy probable que el navegante haga clic en esta y el blog ganara mas vistas el trafico.

Entradas Relacionadas con miniaturas o Related Posts with thumbnails mejora los enlaces internos del sitio.

Las Entradas Relacionadas son una de las estrategia interna de enlace SEO como también lo son las Etiquetas o Categorías, el Archivo y breadcrumbs, entre otras.

Como Entradas Relacionadas/Related Posts no está disponible en el panel de administración de Blogger, en este momento, tenemos que añadir un fragmento de código en la plantilla del blog, para esto sólo hay que seguir las instrucciones.

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

<!--Entrada relacionada con imagen en miniatura Scripts y Estilo CSS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {width:600px;float:left;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:20px;}
#related-posts h2{ text-align:center;font-size: 1.6em;font-weight: bold;color:#000;font-family: 'Open Sans', sans-serif;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{width:80px;height:180px;color:#000;}
#related-posts a:hover{color:#000;}
#related-posts a:hover {background-color:#a991af;}
#related-posts img {padding:4px;padding-top:7px;}
</style>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pK0XIrSEesngKZWJVif3oSpdIRahhN2r45cYRF1WCrN1yiOldIZK8fN9Q40bWbyYIcx5zB7cfaOHYHFYQFbIIfpRyROHauJQEEFFmSkdzzyAEE8wDASuq4id38g-fN8dIKylnXfFBxw/w72-h72-p/cosasparaelblog.png';
var maxresults=6;
var splittercolor='#ebb499';
var relatedpoststitle='Entradas Relacionadas';
</script>
<script src='https://sites.google.com/site/cosaspablog/home/related-posts.js' type='text/javascript'/>
</b:if>
<!-- Fin Entrada relacionada con imagen en miniatura Scripts y Estilo CSS-->

3. Después busca la siguiente linea:

<div class='post-footer-line post-footer-line-1'>

Aparecerá dos veces nosotros trabajaremos con la segunda.

4. Y debajo ello agrega el siguiente bloque:



<!-- Código Entrada relacionada con imagen en miniatura -->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<!-- Fin código Entrada relacionada con imagen en miniatura -->

Para personalizarlo

Se pueden cambiar los siguientes valores antes de GUARDAR LA PLANTILLA

var defaultnoimage= ► Url de la imagen por defecto cuando la entrada no contiene. El tamaño de la imagen es 72 x 72 pixeles.
var maxresults= ► Cantidad de Entradas relacionadas que están bajo la misma etiqueta.
var splittercolor= ► Color del borde entre las imágenes
var relatedpoststitle= ► Titulo de las Entradas relacionadas que se desea mostrar.
color: → Se puede cambiar el color.
background: → Se puede cambiar el color.
font-family: → Se puede cambiar la fuente.

Buscador Responsive en el blog

12 de septiembre de 2016

En un post anterior mostré como poner un Buscador personalizado para el blog, ahora explicare como añadir un buscador adaptable en el blog de blogger.

Una de las mayores ventajas de este cuadro de búsqueda, es lo fácil que es de añadir y personalizar.

El editor de blogger tiene una opción. Abres el editor y vas a Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el código.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Buscar...' type='text'/>
<button id='search-button' type='submit'><span><i class='fa fa-search'/></i></span></button>
</form>
</div>
<style>
.search-box{color:#ffffff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
#search-box{position:relative;margin:0 auto;border:1px solid #cccccc;padding:5px;border-radius:4px}
#search-form{height:40px;background:#ffffff;overflow:hidden}
#search-text{font-size:14px;color:#3b8686;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:40px;color:#ffffff;text-align:center;border-width:0;background:#C10000;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#3b8686}
</style>

Importante tienes que tener instalado en el HTML de la plantilla FontAwesome.

Si no lo tienes ir a la plantilla ► Editar HTML.
En el buscador ► Presionando CTRL+F pegar <head> debajo de el pegar :

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Para cambiar el color del botón de busquedad cambiar los siguiente codigos: background:#C10000 y background:#3b8686
Ver tabla de colores hexadecimales.

Para terminar haz click en guardar y listo.

Como poner paginación en el blog?

11 de septiembre de 2016

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.

Nube de etiquetas con FontAwesome en el blog

4 de agosto de 2016

Blogger predefine el widget de etiquetas o categorías tipo lista, pero también podemos personalizarlo para darle estilo hay que Configurarlo seleccionando tipo Nube

Luego:

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 -*/
.Label a{padding-left:10px;background :#ebb499;text-transform: uppercase;padding:0 10px;color: #ffffff !important;height:26px;line-height:26px;text-decoration:none;border:none !important;-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;float:left;margin-left:1px;margin-top:1px;font-size:13px;}
.Label a:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#414141;transition:all .3s ease-out;}
.Label a:hover{background:#a991af;color:#000 !important;border:2px solid #414141}
#Label1 span[dir=ltr]{display: none; /*evitamos mostrar la etiqueta seleccionada*/
}

Para finalizar Aplicamos al blog

► Lo que esta marcado con rojo son los colores que se pueden cambiar.
► Lo que esta marcado con verde es el código FontAwesome que puedes cambiar.

Importante tienes que tener instalado en el HTML de la plantilla FontAwesome.

si no lo tienes ir a

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

debajo de el pegar

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Este seria el resultado