Cosas para el Blog

Inicio » Entradas. Entradas

Mostrando entradas con la etiqueta Entradas. Mostrar todas las entradas

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.

Ocultar los elementos de post-footer

23 de enero de 2015

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.

Agregar Leer más automático con imagen en miniatura

16 de enero de 2015

Hay un script que se puede agregar al blog de de Blogger. Es una actualización que fue creado por Lasantha Bandara, y esto creará automáticamente un resumen en las entradas con imágenes en miniatura.
A continuación los pasos para añadir el Leer más automático con imágenes en miniatura

Ir a Plantilla → Copia de seguridad de la plantilla ►Haga clic en "Editar HTML" ►Ctrol+F►
Buscar

<data:post.body/>

Sustituye esa etiqueta por este otro código:

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

NOTA: La etiqueta <data:post.body/> en la mayoría de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las demás hasta que des con la indicada.

Ahora buscar y pegar antes de </head> lo siguiente script:

<script type='text/javascript'>
 summary_noimg = 250;
 summary_img = 200;
 img_thumb_height = 150;
 img_thumb_width = 150;
 </script>
 <script type='text/javascript'>
 //<![CDATA[
 function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; }
 //]]>
 </script>

summary_noimg : número de caracteres que se mostrará cuando no hay imagen.
summary_img : número de caracteres que se muestra cuando hay una imagen.
img_thumb_height :altura de las miniaturas.
img_thumb_width : ancho de las miniaturas.

Personalizar el "Leer más"

Buscar en la plantilla ]]></b:skin> y pegar el siguiente código CSS:

.rmlink {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.rmlink a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.rmlink:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}

Ahora guarde su plantilla y listo tendrá el resumen automático en el blog .

Pie de pagina de las entradas personalizado en el blog

14 de diciembre de 2014

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;
}

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.)

Dividir el texto de una entrada en dos Columnas

10 de noviembre de 2014

A veces necesitemos escribir a dos columnas en una entrada, cuando tenemos un texto muy largo y no queremos poner “Leer más” en la entrada.

Para dividir el texto de una entrada en dos Columnas:

Creamos una nueva entrada pegamos el código en edición HTML y el texto que esta en rojo lo cambiaremos por el texto que queramos poner en esa entrada, para que quede así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dui nibh, mollis semper magna. Etiam sit amet nunc eu nunc convallis laoreet. Praesent id dui vitae orci facilisis rutrum eget id neque. Ut condimentum, lectus pellentesque scelerisque interdum, nisl dui viverra neque, in vestibulum felis est sed arcu. Fusce lacus nulla, commodo semper luctus sit amet, fermentum ac neque. Donec faucibus velit non ante vulputate semper.

Este es el código

<div style="float: left; width: 45%">Texto de la columna (lado izquierdo)</div><div style="float: right; width: 45%">Texto de la columna (lado derecho)</div>
<div style="clear: both"></div>

El texto que esta en rojo lo cambiaremos por el texto que queramos poner.

Si queremos insertar una imagen el código sera el siguiente:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="Trucos” border="0" />Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Quedando de esta manera:

Quisque euismod vulputate lectus, vitae pretium leo sodales at. Aliquam erat volutpat. Ut feugiat vehicula nulla vel placerat. Nunc nec metus neque, sit amet vulputate leo. Vivamus sodales odio sed augue lacinia ultrices.Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. Vivamus sit amet nibh vel enim aliquam auctor.

Poner botones compartir debajo del titulo del post

12 de julio de 2014

Para poner los botones de compartir debajo del titulo del post o entrada

Buscar

<div class='post-share-buttons goog-inline-block'>

nos mostrara

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

borramos todo el codigo y buscamos

<div class='post-header-line-1'/>

Nota → Existen 2 lineas con el mismo código, prueba en ambas ya que para algunos resulta bajo la primera y en otros bajo la segunda.

después de esta linea pegar

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

↑Es el predefinido por Blogger.

o puedes poner ↓

<table border='0' cellpadding='0' style='float:left;'><tbody>
<tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' expr:data-text='data:post.title'></a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?locale=es_ES&href=" + data:post.url+ "&layout=button_count&show_faces=true&share=true&width=120&height=21&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; height:21px'/>
</td>
</tr>
</tbody>
</table>