Espera unos segundos se esta Cargando...

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.

Entrada relacionada-Related posts

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://lh3.googleusercontent.com/-ev7nq4v6mTA/VI1h00AyCoI/AAAAAAAAEnE/FOttzJ_KmBk/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.




Leer más

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.
Buscador Responsive en el blog


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ñoAñadir un GadgetHTML/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.


Leer más

Como poner paginación en el blog?

11 de septiembre de 2016



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

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








Leer más

Cómo hacer Blogger Plantilla Responsive

3 de agosto de 2016


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.

Blogger Plantilla 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 ". 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

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger