viernes, 21 de febrero de 2020
miércoles, 3 de abril de 2019
- abril 03, 2019
- Kalasirispb
- blog
- No comments
Texto entradas
--------------------------------------------------------------------------------
Muestra -------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------- <script src="https://kalasirispb.blogspot.com//feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=mostrarentradasconthumb"></script>
Entradas ultimas --------------------------------------------------------------------------------------------------
· Agujas de coser
---------------------------------------------------------------------------------------
-----------------
Tu texto va aquí.
--------------------------------------------------------------------------------
--------------------------------------------------
Muestra -------------------------------------------------------------------------------------------------------------------
texto | texto | texto |
Entradas ultimas --------------------------------------------------------------------------------------------------
Material básico para curso de costura
La relación de material que se detalla a continuación no lleva desgaste,salvo el jaboncillo, por lo que es preferible comprarlos de buena calidad porque podrán ser usados durante mucho tiempo· Agujas de coser
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
Compartir para el movil
Compartir
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_pinterest"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
AddToAny
------------------------------------------------------------------------------
domingo, 10 de febrero de 2019
- febrero 10, 2019
- Kalasirispb
- Imagenes
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...).
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'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</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 Publicado por El Potro , Etiquetas: Entradas , Gadgets 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ías2.- Luego antes de </head> pega este script:
--------------------------------- */
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;}
<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
- febrero 10, 2019
- Kalasirispb
- Imagenes
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
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
- febrero 10, 2019
- Kalasirispb
- Imagenes
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.
Suscribirse a:
Entradas (Atom)