Buenas tardes creativas!!! Ya estamos aquí con la segunda parte de como diseñar nuestro blog, en la anterior entrada os enseñe lo básico, os hablé de mi blog de verano que lo podéis encontrar aquí , que volví a diseñarlo, y ahora tiene otro aspecto. Vamos a lo principal, primero haré un resumen de lo que hablamos anteriormente. La cabecera es lo principal que necesita un blog, sin una cabecera el blog no sería un blog. Luego aprendimos a como centrar la cabecera, os acordáis os di un código y también os dije donde lo teníais que poner. Por si no os acordáis Os vais a plantilla/ Personalizar/avanzado/añadir CSS y una vez allí lo introducimos, y luego le ponemos en aplicar al blog y listo. Después os explique como añadir un gadget, era muy sencillo, y muy fácil, sin complicaciones ninguna y en un momento se hacia. En el paso 3 os explicaba como añadir una imagen con texto, que era también bien sencillo y una manera más bonita y limpia para que nuestro blog quedará impecable y os explique el método que utilizo, y la página que utilizo para subir una foto. En el paso 4 os hablé de diseñar el blog, como los enlaces, el texto de blog, etc. Algo también muy sencillo. Y por ultimo y el más importante, el añadir las páginas del blog, que ya os explique como se hacía. Por si no os acordáis os dejo aquí la entrada. Vamos a la segunda parte de diseño, hoy empezaremos con lo que se puede añadir de extra, los separadores de entrada, los separadores de gadgets, las imágenes y otras imágenes que ya os iré explicando paso a paso.
1. Primero crea la imagen o descárgala.
2. Después consigue la URL de la imagen. Ya sabes que hay muchos sitios donde colgar las imágenes y conseguir las URLs. Tienes un #TutorialDelDomingo referente al tema aquí. Si la cuelgas en cualquier entrada, con el botón derecho pinchando sobre ella, haz click en conseguirURL de imagen.3. Ahora entra en PLANTILLA, EDICIÓN DE HTML, y expande las flechitas que verás a la izquierda (sustituyen al antiguo "expandir plantilla de artilugios") hasta que ecuentres el código. 4. Con Ctrl+F abre el buscador y busca la etiqueta <b:include data='post' name='post'/>5. Justo debajo de esa etiqueta tienes que pegar el siguiente código:<center><img src='URL de la imagen'/></center>Es una imagen de ejemplo, no es la que yo utilizo. Pues bien que tenemos que hacer después subir esta imagen a Tinypic.com y os saldrán tres enlaces de URL pues es la ultima vale. Cuando ya tengáis la Url os la guardáis, en notas o donde queráis. Después nos vamos a Diseño/ añadir gadget/ htlm/javascript, y el código de debajo es el que tenéis que poner.Pasos a seguir: 1. Lo que está en lila es la URL de la imagen que hemos subido a Tinypic, vosotras la tenéis que sustituirla por la vuestra. 2. El color naranja, es para el borde del texto del botón si os fijáis yo lo tengo puesto en Dashed, que es el de puntitos, pero vosotras podes hacer lo que queráis. 3. Lo que está en color azul lo tenéis que sustituirlo por vuestra URL de vuestro blog.<div align="center" style="padding: 5px;"><img src="http://i61.tinypic.com/2nthfkk.png" title="creacionestentativas" alt="creacionestentativas" /></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#ffffff;border: dashed1px #ff9082; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block; width: 90%;">
Como añadir una linea en el título de la entrada del blog
Es muy sencillo, solo tendréis que añadir un código, que os dejaré un poco más abajo y ahora os digo lo que tenéis que cambiar, y lo que no. Solo tenéis que ir a plantilla/ personalizar/avanzado/añadir Css y tenéis que añadir este código. Varia según como lo quieras.
h3.post-title{color: #000000; /**Título de un sólo color (aquí puesto en negro)**/border-top:3px solid #000000; /**Línea superior (aquí puesto en negro)**/border-bottom:3px solid #000000; /**Línea inferior (aquí puesto en negro)**/text-align: center; /**Título centrado**/}Si pegáis esto os saldrá el título así:
Para cambiarlo, lo único que tenéis que hacer es seguir mis siguientes pasos.
- El color del titulo, por el que queraís cada uno es libre de poner el color que quiera, y si no quieres, cambiarle el color, dejarlo como está.- Las lineas siempre pueden variar, es decir puedes cambiarle el color, los pixeles, si son del 2 al 5 la linea se os hará más gruesa, si le dais al uno solo os saldrá una linea muy fina también podéis optar por cambiar la solo el numero, y si queréis la lineas diferente lo podéis substituir por dashed, solid, dotted etc. Pero si solo queréis una linea a bajo tenéis que borrar donde pone solid, solo esa parte y ya está. Es decir algo así.
h3.post-title{color: #000000; /**Título de un sólo color (aquí puesto en negro)**/border-top:3px #000000; /**Línea superior (aquí puesto en negro)**/border-bottom:3px solid #000000; /**Línea inferior (aquí puesto en negro)**/text-align: center; /**Título centrado**/
Como añadir una linea en el menú del blogEs muy sencillo, para que no os compliquéis mucho la vida os lo haré más fácil de lo que es solo tenéis que iros a plantilla/ editar HTML. Se os abrirá el código de vuestra plantilla, no os preocupéis es más fácil de lo que parece.
Vale, una vez abierta le tenéis que dar a ctrl y f y os saldrá un buscador, ponéis Tabs, una vez allí borras todo de tabs y lo sustituyes por este código que os dejo abajo. Luego le dais a guardar plantilla y ya lo tendréis en vuestro blog. Tenéis que borrarlo todo de taps y añadir este código y listo a disfrutar!!
/* Tabs
----------------------------------------------- */.tabs-inner .section:first-child { border-top: $(header.bottom.border.size) $(tabs.border.color);}
.tabs-inner .section:first-child ul { margin-top: -$(header.border.size); border-top: 1px solid $(tabs.border.color); border-left: $(header.border.horizontalsize) $(tabs.border.color); border-right: $(header.border.horizontalsize) $(tabs.border.color);}
.tabs-inner .widget ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; border-bottom: 1px solid $(tabs.border.color);
margin-top: $(tabs.margin.top); margin-left: -$(tabs.margin.side); margin-right: -$(tabs.margin.side);}
.tabs-inner .widget li a { display: inline-block;
padding: .6em 1em;
font: $(tabs.font); color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) $(content.background.color); border-$endSide: $(tabs.bevel.border.width) $(tabs.border.color);}
.tabs-inner .widget li:first-child a { border-$startSide: none;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none;}
Nos vemos el Lunes con la guía de Microsoft word y el Jueves entrada en mi blog de verano. Y el próximo jueves en este blog, hay sorpresa.!!
Con mucho,Love