Para subrayar un texto en blogger, en Creación de entradas / Crear / Edición de HTML hay que poner el siguiente código:
<u>aquí va el texto subrayado</u>
NOTA: haré más adelante un post agrupando todos los códigos básicos...o algún menú desplegable en la sidebar para acceder a ellos...ya veremos.
Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas
mover la fecha de los post
En mi plantilla (mínima black), no se si en otras también, la fecha en la que es escrito el post aparece por encima del título pero a mí me gusta que la fecha esté en segundo orden de importancia respecto del título del blog, es decir, para mi es más importante lo que se dice que cuando se dice y ésto lo llevo a la estética del blog...pero para variar en un novatillo como yo me fue imposible. Busqué por la web pero en ningún sitio había algo tan (al menos la idea lo era) simple.
Así que me decidí a consultar directamente a los bloggenios y fue JMiur el que a un chasquido de dedos me da la respuesta y aquí la almaceno por si me hace falta más adelante configurarla y para que algún fugaz visitante disfrute de ella.
Así que me decidí a consultar directamente a los bloggenios y fue JMiur el que a un chasquido de dedos me da la respuesta y aquí la almaceno por si me hace falta más adelante configurarla y para que algún fugaz visitante disfrute de ella.
Explicación:
1.Entramos en Panel/Diseño/Edición HTML/Expandir plantilla de artilugios y buscamos el siguiente código:
<b:if cond="data:post.dateHeader">
<h2 class="date-header"><data:post.dateheader></data:post.dateheader></h2>
</b:if>
2. Ahora cortamos el código:
<h2 class="date-header"><data:post.dateheader></data:post.dateheader></h2>
JMiur recomienda "comentar" ésta línea de código para no perder su situación original (por si hay que restaurarla):
<!-- <h2 class="'date-header'"><data:post.dateheader/></h2> -->
poniéndola entre los símbolos
<!-- línea de código -->
3. Pegamos ésa línea aquí:
<b:includable id="post" var="post">
<div class="post">
<a name="data:post.id">
<b:if cond="data:post.title">
</b:if></a><h3 class="post-title"><a name="data:post.id">
<b:if cond="data:post.link">
</b:if></a><a href="data:post.link"><data:post.title></data:post.title></a>
<b:else>
<b:if cond="data:post.url">
<a href="data:post.url"><data:post.title></data:post.title></a>
<b:else>
<data:post.title>
</b:if>
</b:if>
</h3>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
nube de etiquetas
Ahora que estoy lanzado (XD) en ésto de toquetear el código vamos a cambiar el modo en el que se muestran las etiquetas en la sidebar y pasar de que se vean en una lista vertical (algo monótono) a que se vean a modo de "nube de etiquetas". Acudo raudo a la bloguería y encuentro el código adecuado (una vez más):
Pasos:
1. justo antes del código:
]]></b:skin>:
2. pego éste otro código:
/* NUBE
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:8px;color:#fff}
#labelCloud .label-cloud li:before{content:"" !important}
3. localizamos el código </head> y justo antes pegamos éste:
// LabelCloud User Variables
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [25,25,112];
var minFontSize = 10;
var minColor = [100,149,237];
var lcShowCount = false;
</script>
4. Ahora tendremos que SUSTITUIR toda una porción de código, que es la que está entre:
NOTA: Como siempre digo, todo ésto lo tengo a modo de guión propio, quien busque profundizar en los códigos éste no es su sitio (ni de coña) bebed de las fuentes, aquí os dejo unas pocas
Pasos:
1. justo antes del código:
]]></b:skin>:
2. pego éste otro código:
/* NUBE
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:8px;color:#fff}
#labelCloud .label-cloud li:before{content:"" !important}
3. localizamos el código </head> y justo antes pegamos éste:
// LabelCloud User Variables
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [25,25,112];
var minFontSize = 10;
var minColor = [100,149,237];
var lcShowCount = false;
</script>
4. Ahora tendremos que SUSTITUIR toda una porción de código, que es la que está entre:
<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
..............
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
..............
</b:widget>
Por el siguiente código:<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
NOTA: Como siempre digo, todo ésto lo tengo a modo de guión propio, quien busque profundizar en los códigos éste no es su sitio (ni de coña) bebed de las fuentes, aquí os dejo unas pocas
desplegar partes del blog
Veamos si ésto funciona: siempre me ha parecido práctico el archiconocido (ver/ocultar) con un efecto de deslizamiento, permite mantener la pantalla más ordenada y mejorar el aspecto general del blog.
.jpg)
Explicación del código por partes:
1. descargamos el archivo scriptaculous-js-1.8.1
2. alojamos los archivos "prototype.js", "scriptaculous.js", "builder.js", "effects.js", "dragdrop.js", "controls.js" y "slider.js"; por ejemplo en googlepages
3. en diseño/edición html buscamos </head> y justo antes pegamos el siguiente código:
<script type="text/javascript" src="URLdelfichero prototype.js"></script>
<script type="text/javascript" src="URLdelfichero scriptaculous.js?load=effects"></script>
Sustituimos lo que está destacado en blanco por la "ruta de enlace" de cada uno de esos archivos que tengamos en googlepages (botón secundario/copiar ruta de enlace)
4. ahora, cada vez que queramos emplear éste efecto pondremos el siguiente código:
<a href="#" onclick="Effect.toggle('nombreunico','blind'); return false">ver/ocultar (+/-)</a>texto
<div id="nombreunico" style="display: none;"><div>elementoaver/ocultar</div></div>
significando lo que está destacado en blanco:
nombreunico:aquí pondremos un nombre (único y exclusivo!!) el que queramos al elemento al que le aplicamos dicho efecto
ver/ocultar (+/-): texto o imagen en la que clicamos para expandir el elemento oculto
texto: si queremos poner un texto entre el enlace anterior y el elemento a expandir
elementoaver/ocultar:la foto/texto/vídeo o lo que queramos expandir
NOTA: hay 3 efectos, blind, appear y slide (a gusto del bloggeador).
Et voilá, ésto lo he adaptado a mis entendederas de la explicación que oloblogger hace del efecto.
1. descargamos el archivo scriptaculous-js-1.8.1
2. alojamos los archivos "prototype.js", "scriptaculous.js", "builder.js", "effects.js", "dragdrop.js", "controls.js" y "slider.js"; por ejemplo en googlepages
3. en diseño/edición html buscamos </head> y justo antes pegamos el siguiente código:
<script type="text/javascript" src="URLdelfichero prototype.js"></script>
<script type="text/javascript" src="URLdelfichero scriptaculous.js?load=effects"></script>
Sustituimos lo que está destacado en blanco por la "ruta de enlace" de cada uno de esos archivos que tengamos en googlepages (botón secundario/copiar ruta de enlace)
4. ahora, cada vez que queramos emplear éste efecto pondremos el siguiente código:
<a href="#" onclick="Effect.toggle('nombreunico','blind'); return false">ver/ocultar (+/-)</a>texto
<div id="nombreunico" style="display: none;"><div>elementoaver/ocultar</div></div>
significando lo que está destacado en blanco:
nombreunico:aquí pondremos un nombre (único y exclusivo!!) el que queramos al elemento al que le aplicamos dicho efecto
ver/ocultar (+/-): texto o imagen en la que clicamos para expandir el elemento oculto
texto: si queremos poner un texto entre el enlace anterior y el elemento a expandir
elementoaver/ocultar:la foto/texto/vídeo o lo que queramos expandir
NOTA: hay 3 efectos, blind, appear y slide (a gusto del bloggeador).
Et voilá, ésto lo he adaptado a mis entendederas de la explicación que oloblogger hace del efecto.
letra de inicio GIGANTE
Llevaba tiempo buscando la forma de que la primera letra de cada post fuese más grande que las demás y distinta, en creación de entradas/crear se puede hacer pero es demasiado limitado para mi gusto. Oloblogger tenía el código adecuado y es el que sigue:
Antes de:
</head>
pegamos lo siguiente:
<style type='text/css'>
.letrag {
float:left;
color: #990000;
font-size:100px;
font-family:none;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
</style>
A partir de ahora y cada vez que queramos éste aspecto para los post deberemos hacer lo siguiente, supongamos (como en éste caso) que la L es la primera letra del post, el código sería:
<span class="letrag">L</span>
Hay la posibilidad de que ésta letra aparezca de manera automática al crear una entrada de forma que no tengamos que escribir el código cada vez que creemos una entrada, nos vamos a Configuración/Formato y en el recuadro que hay al final pegamos el código anterior.
Y seguimos para la configuración total.
He añadido éste color a algunas partes de los textos para decir donde lo puedo encontrar....cosas mías.
Antes de:
</head>
pegamos lo siguiente:
<style type='text/css'>
.letrag {
float:left;
color: #990000;
font-size:100px;
font-family:none;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
</style>
A partir de ahora y cada vez que queramos éste aspecto para los post deberemos hacer lo siguiente, supongamos (como en éste caso) que la L es la primera letra del post, el código sería:
<span class="letrag">L</span>
Hay la posibilidad de que ésta letra aparezca de manera automática al crear una entrada de forma que no tengamos que escribir el código cada vez que creemos una entrada, nos vamos a Configuración/Formato y en el recuadro que hay al final pegamos el código anterior.
Y seguimos para la configuración total.
He añadido éste color a algunas partes de los textos para decir donde lo puedo encontrar....cosas mías.
cambiar el color del link
Para cambiar el color de un enlace cada vez que pasemos el ratón por encima de él, nos vamos a diseño/edición html y buscamos la secuencia:
a:hover {
color:#f5f5f5;
text-decoration:underline;
}
donde cambiaremos lo que queramos modificar; en mi caso he quitado el subrayado (valor "none" donde pone "underline") y he cambiado el color a blanco "puro" #ffffff. Quedando el código de ésta guisa:
a:hover {
color:#ffffff;
text-decoration:none;
}
Es el efecto que más me gusta, destaca y es simple...puf cómo ha sonado ésto, jeje.
a:hover {
color:#f5f5f5;
text-decoration:underline;
}
donde cambiaremos lo que queramos modificar; en mi caso he quitado el subrayado (valor "none" donde pone "underline") y he cambiado el color a blanco "puro" #ffffff. Quedando el código de ésta guisa:
a:hover {
color:#ffffff;
text-decoration:none;
}
Es el efecto que más me gusta, destaca y es simple...puf cómo ha sonado ésto, jeje.
Restore Text
modificar el interlineado
El espacio que hay entre línea y línea (interlineado) me parece excesivo así que vamos a disminuirlo, diseño / edición html / buscamos:
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
En la que tendremos que modificar el 1.6 en la línea "line-height:1.6em;"
Recordar que ésto sirve para la plantilla mínima que es la mía. Ciao.
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
En la que tendremos que modificar el 1.6 en la línea "line-height:1.6em;"
Recordar que ésto sirve para la plantilla mínima que es la mía. Ciao.
poner la fecha en la sidebar
No se cuanto tiempo tendré éste script en mi plantilla, pero hasta que me canse estará ahí. En la plantilla / añadir código html o js incluir la siguiente secuencia:
<script type="text/JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year <1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("01","02","03","04","05","06","07","08","09","10","11","12")
document.write("<medium> Hoy estamos a "+dayarray[day]+" "+daym+" "+montharray[month]+" "+year+"</medium>")
</script>
<script type="text/JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year <1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("01","02","03","04","05","06","07","08","09","10","11","12")
document.write("<medium> Hoy estamos a "+dayarray[day]+" "+daym+" "+montharray[month]+" "+year+"</medium>")
</script>
Restore Text
eliminar el número de las etiquetas
En edición html / expandir plantilla de artilugios debemos localizar y eliminar el código:
y fin del numero que aparece al lado de cada una.Está por ésta zona:
ANTES
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
DESPUÉS
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>
</li>
</b:loop>
</ul>
(<data:label.count/>)
ANTES
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
DESPUÉS
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>
</li>
</b:loop>
</ul>
hacer desaparecer la navbar
La navbar es esa franja horizontal que aparece en lo alto del todo del blog que nos "ayuda"
a navegar por los blogs y acceder al panel de control con rapidez y diligencia.
Pero un servidor de ustedes tiene un código estético muy contrario al de nuestros amigos de blogger y si el blog es mío lo será hasta el último píxel que lo compone y cualquier elemento ajeno a mi gusto será considerado inmediatamente enemigo a abatir y así será. De modo que ahora la he tomado con la dichosa barrita navbar, eliminémosla pues:
Buscamos en el código html (ctrl+f) algo así:
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><
Pero un servidor de ustedes tiene un código estético muy contrario al de nuestros amigos de blogger y si el blog es mío lo será hasta el último píxel que lo compone y cualquier elemento ajeno a mi gusto será considerado inmediatamente enemigo a abatir y así será. De modo que ahora la he tomado con la dichosa barrita navbar, eliminémosla pues:Buscamos en el código html (ctrl+f) algo así:
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><
escribir código html en un post
En éste guión de códigos en que estoy convirtiendo mi blog, no puede faltar el explicar cómo
introducir código html en los post; si lo hacemos tal cual, blogger entiende que estás metiendo
líneas de código e intenta ejecutarlas dando ERROR continuamente.
La solución es simple, consiste en sustituir los símbolos "estrictamente mayor y menor" (es decir, los símbolos < y > por & l t; código & g t; respectivamente hallá donde aparezcan (& l t; y & g t; se escribirán sin espacio entre las letras)
introducir código html en los post; si lo hacemos tal cual, blogger entiende que estás metiendo
líneas de código e intenta ejecutarlas dando ERROR continuamente.
La solución es simple, consiste en sustituir los símbolos "estrictamente mayor y menor" (es decir, los símbolos < y > por & l t; código & g t; respectivamente hallá donde aparezcan (& l t; y & g t; se escribirán sin espacio entre las letras)
tachando palabras
Cuando para reforzar un argumento o delatar un eufemismo queremos tachar alguna palabra haremos lo siguiente, prestad mucha atención porque es realmente complicado:
paso 1: nos vamos a Crear entrada
paso 2: escribimos el texto
paso 3: localizamos la palabra o palabras que queremos que aparezcan tachadas
paso 4: antes y después de la palabra localizada escribiremos <s>palabro</s>
paso 5: guardamos el texto
paso 6: le damos a vista previa para comprobar que lo hemos hecho bien
paso 7: nos tomamos un azucarillo por lo bien que lo hemos hecho
Ésteestúpido extraño post es para dar algo de texto a un código que seguro olvidaré con el tiempo y seguro necesitaré con el tiempo y por tanto acudiré a mi propio blog para recordarlo y me odiaré y asombraré al tener una perspectiva histórica de la evolución de mi estupidez singularidad verborreica.
paso 1: nos vamos a Crear entrada
paso 2: escribimos el texto
paso 3: localizamos la palabra o palabras que queremos que aparezcan tachadas
paso 4: antes y después de la palabra localizada escribiremos <s>palabro</s>
paso 5: guardamos el texto
paso 6: le damos a vista previa para comprobar que lo hemos hecho bien
paso 7: nos tomamos un azucarillo por lo bien que lo hemos hecho
Éste
malditas mayúsculas
Como buen "mayusculófobo" no soporto el uso indiscriminado de las mayúsculas en los textos y menos aún en los blogs; para mí las mayúsculas son algo muy serio XD que solo hay que
emplearlo cuandopretendemos necesitamos destacar algo, sucede igual que con los
colores no soy "colorófobo" pero casi (al explicar un código están justificados). Ahora, eso
si, a lo que no renuncio es al "cursivicidio" tengo prohibido ese modelo de letra por
absurda...inclinar el texto, ¿en que puedes estar pensando para hacer eso?. Bueno, a lo que
voy, el siguiente paso que me interesa para no tener que ver el lamentable aspecto que ofrece
blogger por defecto es quitar todo rastro de mayúsculas y para eso hago lo siguiente:
Me voy al código html/expandir plantilla de artilugios/pulso Ctrl+F y en el recuadrito escribo
"uppercase", ahora en cada sitio donde encuentre un "uppercase" lo sustituiré por "normal" y
fin del "problemo". Algunos de los sitios donde he encontrado "uppercase" son:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:normal;
letter-spacing:.2em;
font: $pagetitlefont;
}
(el título del blog)
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:normal;
letter-spacing:.2em;
color:$sidebarcolor;
}
(las cabeceras de los post, el perfil, las entradas....)
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:normal;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
(el texto bajo cualquier post:autor, etiqueta...)
Y ASÍ SUCESIVAMENTE EN TODOS LOS QUE QUERAMOS VARIAR (p.ej. aquí se justifican las mayúsculas)
Ni que decir tiene que todo lo dicho anteriormente es criterio exclusivo de alfonsete del que
existirán tantas variantes como seres pueblan el planeta, así es y así debe ser.
Ahora que leo lo que escribo y el modo en que me expreso en cuestiones de códigos veo que es
totalmente de andar por casa, sin explicaciones técnicas....bueno, quien busque eso es mejor
que se vaya a alguno de los auténticos genios que he mencionado antes, ellos darán mejor
explicación del por que de todo ésto. Es mas un guión personal que un intento de ayuda.
Saludos a mis millones de fanáticos de ésta y las demás galaxias XD.
emplearlo cuando
colores no soy "colorófobo" pero casi (al explicar un código están justificados). Ahora, eso
si, a lo que no renuncio es al "cursivicidio" tengo prohibido ese modelo de letra por
absurda...inclinar el texto, ¿en que puedes estar pensando para hacer eso?. Bueno, a lo que
voy, el siguiente paso que me interesa para no tener que ver el lamentable aspecto que ofrece
blogger por defecto es quitar todo rastro de mayúsculas y para eso hago lo siguiente:
Me voy al código html/expandir plantilla de artilugios/pulso Ctrl+F y en el recuadrito escribo
"uppercase", ahora en cada sitio donde encuentre un "uppercase" lo sustituiré por "normal" y
fin del "problemo". Algunos de los sitios donde he encontrado "uppercase" son:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:normal;
letter-spacing:.2em;
font: $pagetitlefont;
}
(el título del blog)
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:normal;
letter-spacing:.2em;
color:$sidebarcolor;
}
(las cabeceras de los post, el perfil, las entradas....)
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:normal;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
(el texto bajo cualquier post:autor, etiqueta...)
Y ASÍ SUCESIVAMENTE EN TODOS LOS QUE QUERAMOS VARIAR (p.ej. aquí se justifican las mayúsculas)
Ni que decir tiene que todo lo dicho anteriormente es criterio exclusivo de alfonsete del que
existirán tantas variantes como seres pueblan el planeta, así es y así debe ser.
Ahora que leo lo que escribo y el modo en que me expreso en cuestiones de códigos veo que es
totalmente de andar por casa, sin explicaciones técnicas....bueno, quien busque eso es mejor
que se vaya a alguno de los auténticos genios que he mencionado antes, ellos darán mejor
explicación del por que de todo ésto. Es mas un guión personal que un intento de ayuda.
Saludos a mis millones de fanáticos de ésta y las demás galaxias XD.
ancho del blog
Lo primero es cambiar el ancho donde voy a postear buscando el código:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 920px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 680px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
cambio en los tres # los valores de width (ancho en inglés). De éste modo tengo un blog más ancho y "apetecible" deleer.
Observamos que ha cambiado el ancho del blog pero no de la cabecera (header) para ello
busquemos los códigos
#header-wrapper {
width:920px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
y
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:920px;
text-transform:normal;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
haciendo coincidir sus anchos con los de outer wrapper.
Idem para el footer:
/* Footer
----------------------------------------------- */
#footer {
width:920px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:normal;
letter-spacing:.1em;
text-align: center;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 920px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 680px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
cambio en los tres # los valores de width (ancho en inglés). De éste modo tengo un blog más ancho y "apetecible" deleer.
Observamos que ha cambiado el ancho del blog pero no de la cabecera (header) para ello
busquemos los códigos
#header-wrapper {
width:920px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
y
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:920px;
text-transform:normal;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
haciendo coincidir sus anchos con los de outer wrapper.
Idem para el footer:
/* Footer
----------------------------------------------- */
#footer {
width:920px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:normal;
letter-spacing:.1em;
text-align: center;
}
the first post
Debido a que me importa 3 carajos ser reconocido por internet a través de mi blog, a que he tomado ésto de bloguear como hobby (es la mayor utilidad que le veo al hecho de mantener uno propio, no así el consultar los demás, es curioso) he decidido abrir éste de nombre tan personal. Sería curioso que alguien que me conozca anduviese por aquí...jeje.
¿Para que crear un blog? en mi caso como he dicho antes es un hobby, en él iré posteando todo lo que voy descubriendo de blogger y a la vez configuraré éste, además de escribir todo lo que se me ocurra y expresarme del modo que quiera tb lo voy a usar a modo de recordatorio de determinadas cosas y de vez en cuando desahogarme y despotricar contra todo lo despotricable. Hay quien se lo toma muy en serio ésto de postear y los blogs se vuelven pretenciosos y pesados, tb hay auténticos genios de blogger (vagabundia, la bloguería, laeulalia....etc etc etc etc etc etc) que nos ayudan a los torpes principiantes en ésto de bloguear (o como se diga).
Bueno, lo primero que he hecho es elegir la plantilla mínima black, algo simple, lo mas simple posible porque no me gusta el aspecto de ninguna de las plantillas que ofrecen por defecto y tengo la intención de configurarla a mi gusto (blogger mediante), ahora modificaré todo lo que me permite sin tocar el código ni añadir nada, veamos que tal. Saludos a mis miles de seguidores XD.
¿Para que crear un blog? en mi caso como he dicho antes es un hobby, en él iré posteando todo lo que voy descubriendo de blogger y a la vez configuraré éste, además de escribir todo lo que se me ocurra y expresarme del modo que quiera tb lo voy a usar a modo de recordatorio de determinadas cosas y de vez en cuando desahogarme y despotricar contra todo lo despotricable. Hay quien se lo toma muy en serio ésto de postear y los blogs se vuelven pretenciosos y pesados, tb hay auténticos genios de blogger (vagabundia, la bloguería, laeulalia....etc etc etc etc etc etc) que nos ayudan a los torpes principiantes en ésto de bloguear (o como se diga).
Bueno, lo primero que he hecho es elegir la plantilla mínima black, algo simple, lo mas simple posible porque no me gusta el aspecto de ninguna de las plantillas que ofrecen por defecto y tengo la intención de configurarla a mi gusto (blogger mediante), ahora modificaré todo lo que me permite sin tocar el código ni añadir nada, veamos que tal. Saludos a mis miles de seguidores XD.
Suscribirse a:
Entradas (Atom)
