domingo, 10 de febrero de 2019

Widget entradas recientes (con imágenes) para blogger.


Debemos tener claro que lo prioritario en nuestro blog siempre es el contenido, pero aún así no viene mal adornarlo con un buen diseño de vez en cuando. La calidad del contenido es fundamental pero también lo es que éste sea lo más accesible, y cómodo para el lector. En este sentido, hace poco, decidí pegarle “un cambio de imagen” a mi blog e instalar un buena plantilla.
Durante el cambio de plantilla, me encontré con el inconveniente de que en la página de inicio, no se mostraban las últimas entradas publicadas, lo que se conoce como “entradas recientes”. Blogger, ofrece un widget de entradas recientes, pero muy poco personalizable. Aquí os dejo el código de uno del que podéis cambiar casi todo lo que queráis.

Copia el código y añádelo a un Gadget HTML, luego cambia todos los parámetros que necesites. Marco en rojo algunas de las cosas que necesitarás personalizar (color background, fuentes de letra, tamaño de la imagen en miniatura, núm. de entradas, núm de palabras que se muestran en el resumen...).




<style type='text/css'>
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:109px}
.mas-elemen img{background:#999;padding:4px;float:left;height:64px;margin-right:8px;width:64px}
.mas-elemen h6,.mas-elemen h6 a{font-size:14px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:12px Arial;text-align:justify;color:#555;line-height:12px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUd-guWZF4y3qiVv8TZfCjWF8YjoIScZRhG6CXBqzHyzJnNhthltAu3fSnQaJy13-Cg4sQ3wAB23SGLrj-iYgNSE2vinghW09dFEkCH-XJ_0HkFEH7T0F6_pjGcPBhMS6lzABdJw4tcQA/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:10px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 6;
var startfeed = 0;
var urlblog = "http://TU URL";
var charac = 150;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>


http://borjasanzweb.blogspot.com/2013/11/widget-entradas-recientes-con-imagenes.html



********************************************************************

Últimas entradas por categorías con imagen en miniatura

25 de mayo de 2011 536 comentarios,
Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un gadget con las últimas entradas queremos poner sí las últimas entradas pero por categorías, de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.


 


Para poner en tu blog este gadget de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}
2.- Luego antes de </head> pega este script:
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmuzTg3byYhpyyU7ZZjhriPIM8E7EiwC_Kc1O276Nf1kaL1bzgR3Du2LvvxrjRrl9k3dHj67zaWHs4bJPXO3eb-RJIplZBQGaiugliOQd2vR_PRrcfk34YKIRFbiuyFsGBorqPdUTSFe4/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ene";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Abr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Ago";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

3.- Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>
En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando mayúsculas y minúsculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendrá el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se vería así:
http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta

También dentro de éste último código hay unas áreas que podemos personalizar, true significa que lo mostrará y false que no lo mostrará.
var numposts ← Número de entradas a mostrar
var showpostthumbnails ← Mostrar o no las miniaturas
var displaymore ← Mostrar o no el enlace para leer más
var displayseparator ← Mostrar o no un separador
var showcommentnum ← Mostrar o no el número de comentarios
var showpostdate ← Mostrar o no la fecha de las entradas
var showpostsummary ← Mostrar o no el resumen de las entradas
var numchars ← Número de caracteres en los resúmenes

Y en el segundo código hay una URL en color naranja, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las últimas entradas de otras etiquetas entonces sólo tienes que repetir el paso #3 por cada categoría adicional que quieras agregar.


http://www.ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html


Si tenemos una idea más o menos clara de la forma en que Blogger inserta las imágenes desde la interfase, enseguida nos daremos cuenta que no es suficiente cuando queremos crear algo un poco más original. Para esto, es inevitable caer en el uso del estilo. Las propiedades CSS son la herramienta más poderosa de que disponemos ya que su uso es relativamente sencillo.

Las propiedades de estilo que podemos aplicar a una imagen son múltiples, algunas, son comunes a casi todos los elementos, entre ellas, tenemos:margin: superior derecho inferior izquierdo margin-top: | margin-right: | margin-bottom: | margin-left:


Establecen la cantidad de espacio entre uno o más lados de un elemento y el elemento adyacente.padding: superior derecho inferior izquierdo padding-top: | padding-right: | padding-bottom: | padding-left:

Establecen la distancia entre los bordes de un elemento y el área que lo contiene. A diferencia de margin, no admite valores negativos. En el ejemplo de abajo, el cuadrado rojo es el contenedor(en este caso, un DIV), y la imagen es el contenido:


padding:0

padding:10px

padding:-10px

margin:-10px

En la primera, el contenido se ubica por defecto en la parte superior izquierda del contenedor. En la segunda, el padding se establece en 10 pixeles en todas direcciones y por lo tanto se separa. En la tercera, el padding es negativo, pero como no puede salir del contenedor, el valor es ignorado. Para sacarlo es necesario utilizar la propiedad margin.

La propiedad padding nos permite separar la imagen del texto. Normalmente, un valor de 10 pixeles es suficiente, pero puede utilizarse el que más nos guste.

padding:10px

padding:30px


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat accumsan et iusto odio dignissim qui blandit praesent luptatum.


Otro grupo se encarga de establecer las propiedades de los bordes de un elemento. Utilizada de este modo, pueden definirse las tres propiedades para los cuatro borde en forma simultánea:border: border-width | border-style | color border-top: borde superior border-bottom: borde inferior border-left: borde izquierdo border-right: borde derecho


Pero también es posible establecer las características de los bordes de manera individual:border-width: thin | medium | thick | longitud (pixeles) border-top-width: borde superior border-bottom-width: borde inferior border-left-width: borde izquierdo border-right-width: borde derecho


Se usa para establecer el ancho de borde de un elemento y por defecto está definido como medium.


Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Esta otra propiedad establece el estilo del borde de un elemento y debe ser especificada para que el borde sea visible: border-style: none | solid | double | dotted | dashed border-style: groove | ridge | inset | outset border-top-style: borde superior border-bottom-style: borde inferior border-left-style: borde izquierdo border-right-style: borde derecho

solid

double

dotted

dashed
groove

ridge

inset

outset

Algunos estilos del borde sólo son visibles si el ancho de este es suficiente. Para establecer el ancho de todos los bordes o de cada uno de ellos se utiliza:border-width: thin | medium | thick | tamaño (pixeles) border-top-width: borde superior border-bottom-width: borde inferior border-left-width: borde izquierdo border-right-width: borde derecho


Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Para establecer el color del borde se utiliza:border-color: color border-top-color: borde superior border-bottom-color: borde inferior border-left-color: borde izquierdo border-right-color: borde derecho

Con el mismo criterio que las demás, si se dan cuatro valores, se aplican a los colores de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto


Para colocar un borde alrededor de una imagen, básicamente, debemos establecer tres propiedades:style="border-style:tipo; border-color:color; border-width:ancho;"


Así como puede establecerse el borde, también puede establecerse el fondo de los objetos. En el caso de las imágenes, el fondo sólo tendrá sentido si la imagen tiene transparencias (formatos GIF y PNG). Por ahora sólo veamos una de las propiedades:background-color:color

Utilizando todas estas propiedades, podemos empezar a jugar. Por ejemplo, vamos a enmarcar la imagen. Para eso, colocamos la imagen dentro de un "contenedor" (DIV o SPAN):<span style="margin:valor; padding: valor; border:valores; background:color;"> <img src="URL_imagen" style="valores;" /> </span>




SPAN

margin: 0px

padding: 10px

border: 3px solid royalblue

background: beige

IMG

border: 3px solid chocolate




SPAN

margin: 0px

padding: 0px

border:1px solid chocolate

IMG

border: 10px solid black





DIV (externo)

padding:10px

background-color:powderblue

DIV (interno)

padding:13px

border:1px solid whitesmoke

background:#D26347

IMG

border:1px solid black


Como escribir los códigos es tedioso, si deseamos utilizar un estilo repetidas veces, tenemos la posibilidad de agregar ese estilo a la sección correspondiente del HEAD de la página. Allí, crearemos una clase, que contendrá el código. Este ejemplo, se basa en el código llamado Polaroid, creado por Noded y permite combinar bordes y textos:.polaroid { padding:15px 15px 25px 15px; border:1px solid black; /* borde externo */ background:white; /* contenedor */ text-align:center; color:black; }


Y se usa así:<div class="polaroid" style="width:ancho_imagen"> <img src="URL_imagen"> el texto a ser mostrado </div>



El uso de la clase Polaroid




El fondo de un objeto puede ser un color pero también puede ser una imagen, para esto usamos estas propiedades:background: color image repeat attachment position


Esta es la forma rápida de establecer todas las propiedades simultáneamente.background-image: url(imagen) | none


Establecer la imagen de fondo de un elemento cualquiera. El valor necesario es url() colocando como parámetro. Las comillas simples o dobles son necesarias sólo si el path es relativo.background-attachment: scroll | fixed


Determina si la imagen de fondo especificada se desplazará con el contenido o será fija.background-repeat: repeat | no-repeat | repeat-x | repeat-y


Determina cómo se repite la imagen de fondo especificada. Por defecto, el valor establecido es repeat, que muestra como un mosaico(tile). El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y la repetirá verticalmente.background-position: porcentaje | tamaño background-position: top | center | bottom left | center | right


Posición inicial de la imagen de fondo especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados (aquellos de los que se conoce la dimensión, por ejemplo IMG).




La forma más sencilla de asignar una ubicación de fondo es con palabras clave. Las palabras clave son interpretadas como sigue: top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100%





no-repeat

repeat

repeat-x

repeat-y
Si colocamos una imagen de fondo en un elemento contenedor, los elementos contenidos se "superpondrán". Lo más simple es que el contenedor sea un DIV: <div style="width:ancho;height:alto;background-image:url(URL_imagen)"> ... cualquier código HTML ... </div>

Esta es la técnica utilizada por muchas páginas para mostrar o resaltar algún texto en particular. Se requieren dos imágenes (apertura y cierre de comillas) y, en general todo se encuentra contenido dentro de un tag BLOCKQUOTE: <blockquote style="background: url(imagen_1) no-repeat left top"> <p style="background: transparent url(imagen_2) no-repeat right bottom;"> ....... el texto ....... </p> </blockquote

Aún quedan cosas en el tintero pero por hoy es suficiente.


NOTA: los navegadores interpretan algunas propiedades de manera diferente, en lo que hace a este artículo, los valores utilizados en padding y margin han sido probados en Firefox e Internet Explorer y funcionan de modo aceptable pero con diferencias. Hasta ahora, parece imposible escribir código que sea absolutamente compatible.http://vagabundia.blogspot.com/2006/09/indice-blogger.html






Aquí veis un blog de prueba en el que las fotos o imágenes salen con un recuadrito gris y sombras. Este efecto aparece tanto en la imagen de la entrada como en las imágenes que coloquemos en las columnas. Si nos gusta (a mi no mucho) lo dejamos, si no nos gusta...¡¡acabamos con él!!


Seguid el paso a paso:

Pinchamos en plantilla
Personalizar
Avanzado: aquí buscamos el apartado en el que pone imágenes.
Nos tenemos que asegurar de que el primer color (color de fondo) y el segundo (color del borde) estén en transparente.







Cuando lo hayamos hecho, pinchamos en Aplicar al blog.

Volvemos a blogger.
Pinchamos en plantilla
Editar HTML
Activamos el cuadrito que pone expandir artilugios.
Pulsamos F3 para que nos salga el buscador
Pegamos lo siguiente en el buscador: .post-body img
Nos saldrá algo parecido a esto:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,


.BlogList .item-thumbnail img {

padding: $(image.border.small.size);

background: $(image.background.color);



border: 1px solid $(image.border.color);


-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);


Nos vamos a centrar en la parte coloreada de morado. Y lo que vamos a hacer es tan sencillo como cambiar cada uno de los números delante de px por un cero, así (recordad que esto lo tenéis que hacer en vuestra plantilla de HTML):


-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);


De esta manera quitamos la sombra de la foto, pero no eliminamos el efecto, por si acaso algún día nos apetece volver a recuperarlo. Si es así, solo tendríamos que volver a escribir los mismo números.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.






Una de las ventajas del CSS3 es porder aplicar bordes redondeados sin complicarnos la existencia, siempre y cuando quien vea la página use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.


Y una forma de poder usar estos bordes es con las imágenes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompañados de transiciones.


La declaración del borde redondeado es border-radius, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o sólo a algunas de ellas.


A continuación verás unos ejemplos de estos bordes y cómo se comportan las imágenes al pasar el cursor sobre ellas.Puedes usar el que más te guste, sólo copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>








.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}








.post-body img {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Estos efectos se aplicarán a todas las imágenes de las entradas. Si quiseras usarlo sólo para las que tú elijas entonces cambia .post-body img por .redondeado y .post-body img:hover por .redondeado:hover
Luego en el código de tu imagen agrega la clase:

<img class="redondeado" src="URL de la imagen" />

Esos son sólo unos ejemplos, y a partir de ellos cada quien puede modificarlo tanto como quiera agregando o eliminando más estilos, eso como siempre ya depende de cada quien. Pero como has podido ver, podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.


http://www.ciudadblogger.com/2012/02/efectos-de-bordes-redondeados-en-las.html


Leer más con imágenes en miniatura mejorado 



Anteriormente vimos cómo tener el Leer más con imágenes en miniatura que hace que todas las entradas tengan un resumen de forma automática, sin tener que estar ingresando códigos extra cada vez que redactamos una entrada.
Si bien ese script funciona muy bien muchos han sido quienes han preguntado si es posible mostrar una imagen aun cuando la entrada no la tenga; y si había alguna forma para que las imágenes en miniatura no quedaran fuera de proporción, pues usualmente no subimos imágenes perfectamente cuadradas sino más bien rectangulares y al mostrarse en miniatura se deformaban.


Bien, después de un par de horas de pelearme con la computadora pude hacerle tres mejoras al script de modo que si una entrada no tiene una imagen podrá mostrar una imagen predeterminada para ilustrar el resumen.
Luego, las imágenes en miniatura ya no perderán su proporción, por lo que una imagen rectangular podrá verse más pequeña pero igualmente rectangular.
Y además, las imágenes en miniatura tendrán un enlace a la entrada, así que podrás acceder al post completo desde el link de Leer más, o desde el título de la entrada, o bien, haciendo click en la imagen en miniatura.







El procedimiento es el mismo, primero entramos en Diseño | Edición de HTML, y busca esta línea:
<data:post.body/>Elimínala y en su lugar agrega esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></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 antes de </head> pega lo siguiente:

<script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_k5BK1LyuFs1B4_MW9OHV4FkbAbZ3pmc1IkrSgCx-ZzwkIZuyS31SzoKISkEwevX8w75Bapm8nI_rXta8bCaUyLnZ1444pJIYgXlHsjou0wIH2i6YIJkZ22DFNcjezJZ67uOEU2rHjmM/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>Guarda los cambios y listo. Ahora veamos las modificaciones que se le puede hacer para personalizarlo.


En el primer código que hemos agregado, he puesto en negrita los estilos para el resumen, ahí se puede cambiar el tamaño de la letra, la alineación del texto, y se le pueden agregar más estilos como el color de la letra, color de fondo, etc.
En donde dice Leer más puedes cambiarlo por otro texto o bien, por una imagen, si ese es el caso entonces elimina ese texto y en su lugar agrega esto cambiando la URL de la imagen donde se indica:
<img src="URL de la imagen" border="0" />
En el segundo código que hemos agregado veremos al inicio dos variables:
summary_txt = 410; indica el número de caracteres que tendrá el resumen.
img_thumb_width = 120; es el ancho que tendrán las imágenes en miniatura.

Un poco más abajo está una URL en color azul, esa es la imagen que se mostrará en el resumen cuando la entrada no tenga una imagen, y será esta:




Esa imagen la puedes cambiar por cualquier otra que elijas, sólo cambia la URL en color azul por la de la imagen que quieres.


Como has podido notar los códigos son bastantes similares al método anterior sólo que con unas pequeñas modificaciones que aunque parecen insignificantes mejoran por mucho la funcionalidad del script.



Para hacer este tutorial debemos de tener instalado el gadget de etiquetas.
Para instalarlo vamos a Diseño → Agregar gadget →Etiquetas

En título podemos colocar el nombre que queramos



1. Vamos a etiquetas seleccionadas
2. Clic en editar (Esto es para no colocar todas las etiquetas en el blog, debemos de seleccionar las que más importancia tienen.)
3. Clic en Lista *importante!

4. Guardar.

Ya tenemos instaladas las etiquetas en nuestro blog, si vamos a verlas se ven normales y lo que queremos en este tutorial es colocarles un botón para mejorar su aspecto.

Así que copiamos este código:

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(URL de tu botón) no-repeat center left;
}


1. Vamos a Plantilla → Editar HTML
2. Ctrl+f (para buscar) y buscamos </b:skin>
3. Pegar antes de </b:skin> el código que hemos copiado.
***Donde dice URL del botón: debemos de pegar la url de nuestro botón
Y guardamos plantilla





Y listo!! a si de fácil ha sido ;)
*** En padding-left, Nos indica cuanto espacio colocamos entre el borde izquierdo y las etiquetas

Nos quedará así:
Este serial el resultado final ♥



Recomendaciones:
La imagen del botón no debe de ser muy grande, las medidas ideales serian 16x16 hasta 20x20.
Aqui hay algunos iconos


HACER UN MENÚ DE IMÁGENES CON EFECTO HOVER






Hola a todos :) ! El tutorial de hoy es un poquito largo pero el resultado es muy bonito, ideal para hacer algo distinto en el blog, espero les guste...
1. Diseñar las imágenes que vamos a utilizar:


Vamos a iniciar diseñando las imágenes que van a ser dos por cada botón y tienen que ser de distinto color para que se note el efecto hover al pasar el puntero del mouse sobre ellas.


Consejo: Utilizar una paleta de colores para que las imágenes combinen entre si

Donde encontrar iconos bonitos? Hace días encontré esta página preciosa, tiene unos iconos muy bonitos, aunque debes de tener Illustrator o Photoshop para poder usarlos: V E R P Á G I N A y para los que no utilicen estos programas les dejo esta página donde hay unos iconos preciosos V E R P Á G I N A
Donde encontrar paleta de colores?: Esta página la uso mucho y me encanta! V E R P Á G I N A








2. Obtener la url de las imágenes:

Alojar las imágenes en Dropbox o en los álbumes de google, en mi caso yo siempre uso los álbumes de mi cuenta de google porque es muy sencillo y efectivo.



3. Ordenar etiquetas en blogger:
V E R TU T O R I A L


4. Modificar el código para crear el menú:

Copiar y pegar este código en un documento de texto (word) para poder editarlo
Cambiar los textos que están en colores por la URL de nuestras imagenes y la URL de la página a la que vamos a enlazar cada imagen.


<center>
<table cellpadding="12px" cellspacing="12px">
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
</table></center>



E L C Ó D I G O


<center> : Esto espara centrar las imágenes
<table cellpadding="12px" cellspacing="12px">: Esta parte es la que hace que nuestras imágenes se vean alineadas e indican el espacio de separacion de cada una, asi que puede variar el valor 12px a más o menos, todo depende de como nos guste.
URL página para enlazar: Acá debemos de colocar la URL de la página que queremos que nos lleve al darle clic a la imagen
URL imagen #1: Colocamos la URL de la imagen que queremos que aparezca de forma predeterminada
URL imagen #2: Colocamos la URL de la imagen que va a crear el efecto hover, entonces debe de ser la imagen que es de color diferente. Esto es que al pasar el cursor del mouse sobre la imagen se cambie a la imagen que esta de otro color.
height="90px: Indica la altura de cada imagen
width="85px: Indica el ancho de cada imagen
Onmouseout: Muestra la imagen #1 cuando el puntero del mouse esta fuera
Onmouseover: Muestra la imagen #2 cuando el puntero del mouse esta sobre la imagen #1

5. Donde colocar el menú?:

Este menú lo podemos colocar donde queramos, únicamente debemos de copiar y pegar todo el código en un gadget de HTML y listo.
Y este es el resultado final:
http://unblogbonitoparati.blogspot.com/2015/05/menu-blogger-imagenes-efecto-hover.html




Creando un resumen de entradas.

En la entrada "Resumen de entradas en Blogger: Dar estilo al enlace de salto de línea" se explica cómo mostrar un resumen de los artículos en la página principal del blog de forma manual, siendo necesario incluir en cada entrada un salto de línea.

En esta ocasión vamos a crear un resumen de entradas automático para la página Inicio del blog y ver cómo pueden configurarse sus distintos elementos.

























1. CREAR UN RESUMEN DE ENTRADAS EN LA PÁGINA INICIO DEL BLOG DE FORMA AUTOMÁTICA


Vamos a Tema → Editar HTML

Una vez dentro de la ventana de edición, activamos el buscador con CTRL + F y escribimos </head>.

A continuación de esta etiqueta </head> añadimos el siguiente script,

 <!--SCRIPT PARA RESUMEN DE ENTRADAS EN LA PÁGINA INICIO -->
<script type='text/javascript'>
img_thumb_width = 150; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/
summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/
</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="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>





1.2. Añadir los condicionales.


Los condicionales los añadimos para que se ejecute el script con el resumen de entradas solo en la página principal del blog.

Localizamos en la plantilla la etiqueta <data:post.body/> (normalmente suele haber dos o tres).

Eliminamos la última etiqueta <data:post.body/> y en su lugar añadimos el siguiente código HTML,

<!-- si es una página estática se muestra el contenido de la entrada data:post.body -->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>  <!-- si la condición no se cumple entonces se ejecutan las siguientes órdenes -->
<!-- si NO es una entrada individual "item" se ejecuta el script -->
<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>
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if>
 <!-- si es una entrada individual "item" muestra el contenido de la entrada data:post.body -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>
Guardamos los cambios y visualizamos el blog.

El Resumen de Entradas incluye en primer lugar la fecha de publicación del blog y bajo ella, el título del post.

Si el artículo tiene una imagen destacada o Thumbnail, se mostrará a continuación del título y se situará a la izquierda del texto [float:left].

Muestra también el salto de línea "Leer más" que llevará al lector a la página correspondiente a esa entrada y por último se mostrará el pie de entrada o post-footer.


IMAGEN 1 - Resumen de Entradas Blogger


La primera entrada no tiene ninguna imagen por lo tanto el resumen de entradas solo muestra su fecha, título, fragmento resumido, "leer más" y post-footer.

La segunda entrada se muestra con una imagen destacada o Thumbnail. Si no la tiene, Blogger por defecto cogerá la primera de la publicacion.

Si el espacio ocupado por la imagen es inferior al espacio que ocupa el texto, el resultado sería el siguiente,



IMAGEN 2 - Resumen de Entradas Blogger




Ya hemos incluido un Resumen de Entradas pero es muy posible que necesitemos personalizarlo para adecuarlo a nuestras necesidades.

Vamos a ver diferentes supuestos.



2. Cómo se puede modificar el tamaño de las miniaturas o Thumbnails


Dentro del script, buscamos las siguientes líneas.


img_thumb_width = 150; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/



y modificamos los valores asignados para el ancho y alto.

En este caso he modificado ambos valores a 350.



IMAGEN 3 - Resumen de Entradas Blogger [Thumbnail configuración tamaño]




Si queremos que las imágenes ocupen el ancho total de la caja contenedora debemos modificar los valores a 100%. Si la imagen tuviera un ancho inferior al espacio de la caja contenedora se mostraría con sus dimensiones originales.


img_thumb_width = "100%"; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = "100%"; /*Alto imagen miniatura Thumbnail*/






3. Cómo se puede mostrar una imagen predeterminada para las entradas sin Thumbnails


Si queremos que las publicaciones que no tienen ninguna imagen o miniatura muestren una imagen predeterminada (será la misma para todas las entradas que cumplan esta condición) tenemos que añadir estas líneas al script.

Las pegaremos después de var summ = summary_noimg; y antes de if(img.length>=1) {


.....

var summ = summary_noimg; 
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 15px 10px 0px;"><img src="URL de la imagen" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_noimg;
}

 if(img.length>=1) {
...







4. Cómo se puede modificar la longitud del fragmento de texto


Dentro del script, buscamos las siguientes líneas.


summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/



Voy a modificar ambos valores.

Para las entradas que no tengan una miniatura o una imagen modifico el valor a 500.
[summary_noimg = 500]

Para las entradas que cuenten con Thumbnail o alguna imagen, el valor será de 5.
[summary_img = 5]




IMAGEN 4 - Resumen de Entradas Blogger [Texto configuración longitud]




En la primera entrada que tiene imagen se muestra la palabra "Internet" que tiene 8 caracteres. Aunque he establecido un valor de 5 se muestra una longitud superior porque no corta las palabras (tiene en cuenta los espacios).

Si pusiera un valor igual a 0 seguirá mostrando la palabra "Internet".




5. Cómo modificar el tipo de letra del fragmento de texto


Dentro del script busco la etiqueta <div>.


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';



Y la sustituyo por una etiqueta <div style>.


var summary = imgtag + '<div style = "font-family:tahoma; font-size:18px; font-weight:600">' + removeHtmlTag(div.innerHTML,summ) + '</div>';



El texto se mostrará en fuente Tahoma, con tamaño de 18px y en negrilla.



IMAGEN 5 - Resumen de Entradas Blogger [Texto configuración formato Fuente]







6. Cómo posicionar el texto bajo la imagen o Thumbnail


Seguimos en el script y localizamos esta línea.


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';



Igual que en el caso anterior modifico la etiqueta <div> por la marcada en negrilla.


var summary = imgtag + '<div class="summary" style="clear:both">' + removeHtmlTag(div.innerHTML,summ) + '</div>';



Ahora el fragmento de texto se muestra bajo la imagen.



IMAGEN 6 - Resumen de Entradas Blogger [Texto bajo la imagen o Thumbnail]


7. Cómo eliminar el fragmento de texto


Buscamos en el script la misma línea que en el apartado anterior.


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';



En esta ocasión la reemplazo por una etiqueta <div style>


var summary = imgtag + '<div style = "display: none">' + removeHtmlTag(div.innerHTML,summ) + '</div>';



Ahora el resumen de entradas no muestra el texto.


IMAGEN 7 - Resumen de Entradas Blogger [Texto eliminado]


8. Cómo eliminar la miniatura o Thumbnail


Dentro del script, buscamos las líneas relativas a la imagen.


imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';



Modifico la etiqueta <span style> eliminando las propiedades marcadas en negrilla del cuadro superior y en su lugar incluyo [display:none].


imgtag = '<span style="display: none;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';



Ahora el resumen de entradas ya no muestra las imágenes.



IMAGEN 8 - Resumen de Entradas Blogger [Sin imágenes o Thumbnails]

9. Cómo eliminar el pie de página de cada publicación


Si queremos eliminar el post-footer o pie de página que muestra el autor de la publicación, los comentarios de los usuarios, los botones de redes sociales para compartir y las etiquetas, tenemos que localizar los condicionales que hemos añadido en el punto 2 e incluir las líneas en rojo.


<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<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>
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.post-footer { display: none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Como se puede ver en la siguiente imagen ya no es visible el pie de página.



IMAGEN 9 - Resumen de Entradas Blogger [Sin post-footer o pie de entrada]

10. Cómo eliminar la fecha de publicación de cada entrada


Si no queremos que en el resumen se muestre la fecha de publicación de las entradas tenemos que seguir trabajando con los condicionales del punto 2. Para este supuesto necesitamos incluir las líneas marcadas en rojo.


<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<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>
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.date-header { display: none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>


La página principal del blog se verá así,



IMAGEN 10 - Resumen de Entradas Blogger [Sin fecha de publicación]


11. Cómo eliminar el título de cada entrada


Normalmente es necesario y útil mostrar el título de las publicaciones pero si decidimos eliminarlo haremos igual que en el punto anterior (eliminación de la fecha) añadiendo,


<style type='text/css'>
.post-title { display: none;}
</style>






12. Cómo aplicar formato al salto de línea "Leer más"


Continuando con las líneas correspondientes a los condicionales del punto 2, buscamos la etiqueta span del salto de línea.
<span class='jump-link'>.


<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>



La propiedad float nos permite ajustar el texto "Leer más". Por el momento se posiciona a la derecha, con un padding superior de 10px y un padding derecho de 50px.


float:right (a la derecha)
padding-top:10px (relleno superior de 10px)
padding-right:50px (relleno derecho de 50px)



Podemos modificar su configuración y estilo añadiendo las propiedades que necesitemos para ajustar su formato al deseado.

Por ejemplo, vamos a posicionarlo a la izquierda, con un margen superior de 10px para separarlo del fragmento de texto, se aplica un padding de 5px para que el texto "Leer más" quede centrado, el fondo es amarillo con borde negro, la fuente del texto en verdana tamaño 15px y negrilla.

Eliminamos el texto en malva y lo sustituimos por el marcado en rojo.


<span class='jump-link' style='float:left;margin-top:10px;padding:5px;background:yellow;border:solid black;font-family:verdana; font-size:15px; font-weight:600'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></span>



Ahora vemos que ha cambiado el salto de página.



IMAGEN 11 - Resumen de Entradas Blogger [Formato salto de página]

Una vez comprobado cómo puede añadirse un resumen de entradas en la portada del blog y cómo pueden configurarse sus distintos elementos, vamos a ver un ejemplo.





Ejemplo de Resumen de Entradas [Fecha + Título + Fragmento Texto + Salto de Página]

En un gran número de blogs es frecuente encontrar en su portada un resumen de entradas que muestra la fecha de publicación, el título de la entrada, el fragmento de texto con un borde y el enlace para ver el contenido de la entrada.



IMAGEN 12 - Resumen de Entradas Blogger [Ejemplo]




Código del script



 <!--SCRIPT PARA RESUMEN DE ENTRADAS EN LA PÁGINA INICIO -->
<script type='text/javascript'>
img_thumb_width = 510; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/
summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/
</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="overflow:hidden; border: none; margin-bottom:25px; margin-top: -20px; float:left; max-height:'+img_thumb_height+'px;width:auto"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
var summ = summary_img;
}
  var summary = imgtag + '<div class="summary" style="clear:both">' + '<div style = "font-family:arial; font-size:16px; font-weight:600; border: double lightgray; padding: 8px; margin-left:5px; margin-right:5px">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>



HTML con los condicionales


<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<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>
 <span class='jump-link' style='float:left;margin-top:10px;margin-bottom:25px; padding:5px;background:linear-gradient(rgba(242,225,206, 0.5) 45%, dimgrey 95%, beige);border-radius:15px;
  border:4px ridge maroon;font-family:verdana; font-size:15px; font-weight:600'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.post-footer { display: none;}
</style>
</b:if>
 <b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>
Como hemos podido comprobar, mostrar en la página principal del blog un resumen de las entradas en lugar de la publicación completa puede resultar muy interesante.

Es posible que no se ejecute correctamente el script, en este caso eliminamos la etiqueta <data:post.body/> anterior a la última y añadimos el código HTML del punto 2.



https://prodpersonal.blogspot.com/2018/02/resumen-de-entradas-en-la-portada-del.html

Ya he creado un menú de páginas para organizar el contenido del blog mediante una barra de menú horizontal situada bajo la cabecera y con tres pestañas por el momento (Inicio - Blogger - Photoshop).
Ahora quiero personalizar este menú.


CAMBIO DE LA DISPOSICIÓN Y LETRA DEL MENÚ HORIZONTAL DEL BLOG
Voy a empezar centrando las pestañas.
Como tengo que modificar el código HTML de la plantilla, antes hago una copia de seguridad del blog.

Centrado de pestañas

Para personalizar el menú de pestañas que organiza mi contenido por temática, voy al menú de Blogger y selecciono Plantilla - Editar HTML.


Se abre la ventana con el código HTML de la plantilla.
Hago clic con el ratón sobre cualquier punto de esta ventana y pulso las teclas CTRL+F para activar el buscador interno de esta ventana.
Se abre un recuadro Search y escribimos /* Tabs




Localiza la entrada (círculo rojo) a partir de la cual está el código HTML para las páginas que he creado en el blog.
Al final de este código para las páginas (Tabs), y justo antes del código para el módulo siguiente que en mi caso es /*Headings, escribo el siguiente código,



/* Centrar Páginas */
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}





Guardo la plantilla.
Visualizo el blog para ver el resultado. Las pestañas del menù de páginas están ya centradas y en línea horizontal por la propiedad display:inline. Por el momento solo tengo tres pestañas y el efecto no es el mejor, así que puedo eliminar este código para que queden alineadas otra vez a la izquierda.


Si quisiera alinear las pestañas a la derecha el código sería usando right en lugar de center.

/* Centrar Páginas */
.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}


Para alinear las pestañas a la izquierda en forma de columna sería,

/* Centrar Páginas */
.PageList {text-align:left !important;}
.PageList li {display:online !important; float:none !important;}

El efecto es el siguiente,





En cuanto a la propiedad float, hace referencia al posicionamiento flotante de la caja. Como no quiero que las cajas de cada pestaña se desplacen a izquierda (left) o derecha (right), establezco el valor "none" para evitar su desplazamiento.

Personalizar la letra (tipo, tamaño y color)

Como en el caso anterior, voy a Plantilla - Editar HTML y busco mediante CTRL+F el siguiente texto tabs-inner.


Voy a trabajar ahora con el código que está dentro del recuadro en rosa.



<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#1563c3"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="#000000"/>
</Group>


Voy a poner una fuente de letra "Century Gothic" con un tamaño de 25px y en color naranja "#ff8c00"


El código pasa a ser el siguiente (en negrilla y azul las modificaciones).

<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 25px 'Century Gothic', Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 25px 'Century Gothic', Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#fffff" value="#FF8C00"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="#FF8C00"/>
</Group>


El nombre del tipo de letra, como está formado por dos palabras con un espacio intermedio, debe escribirse entre comillas 'tipo letra'.
Aparecen más tipos de letra después de Century Gothic, esto se debe a que si el sistema no reconoce el primer tipo de letra, mostrará el texto en el siguiente.
<Variable name="tabs.text.color"....> corresponde al texto de las páginas que se han añadido.
<Variable name="tabs.selected.text.color"...> corresponde al texto de la página principal (Inicio). Podemos establecer un mismo color para todas o diferenciar el texto de la página principal con otro color.

Este es el resultado,

Menú Páginas horizontal





BTemplates.com

Con la tecnología de Blogger.

Popular Posts