Si optimizamos el CSS en blogger garantizamos que la página nos cargue con más rapidez, ya que quitan unos Kbs (no muchos pero a la larga se notará).
Existe una herramienta llamada Robson CSS Compressor que nos facilita el trabajo de comprimir el CSS, algunos ejemplos que hace esta herramienta son:
En los colores (lo básico y sencillo):
los colores básicos como #FFFFFF o #000000 son transformados en #FFF y #000
los colores en rgb ( rgb(255,255,255)) son transformados en los de este tipo #333 (Hexadecimal)
Yo selecciono únicamente estas características, ya que sino esta herramienta comprime tanto el código que es casi imposible de reconocer como antes.
/* Reset And General */
body {
line-height: 1.7em;
background:#45474a;
margin-top:0;
color:#000000;
font:normal normal 12px Droid Sans;
}
a:link,a:visited,a:hover {
color:#247ee5;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border-width:0;
}
h1,h2,h3,h4,h5,h6 {
font-family:Arial, Helvetica, sans-serif;
font-weight:400;
clear:both;
}
h1 {
font-size:28px;
}
h2 {
font-size:24px;
}
h3 {
font-size:20px;
}
h4 {
font-size:12px;
}
h5 {
font-size:10px;
}
h6 {
font-size:8px;
}
hr {
background-color:#000000;
border:0;
height:1px;
margin-bottom:2px;
clear:both;
}
#header-wrapper {
position:relative;
height:138px;
font:normal normal 12px Droid Sans;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/-6ojXmeun1K0/TZ6YLnxaRNI/AAAAAAAAArg/JsvlfUmf7b4/s1600/bk_body.png) center no-repeat;
}
#header-inner {
background-position:center;
margin-left:auto;
margin-right:auto;
}
#header {
margin-top:26px;
margin-left:120px;
position:absolute;
left:0;
}
#header h1 {
font-size:48px;
color:#333;
}
#header a {
color:#333;
text-decoration:none;
}
#header .description {
color:#999;
display:block;
font-size:12px;
margin-top:6px;
padding-left:5px;
padding-top:5px;
}
#crosscol-wrapper {
width:100%;
height:auto;
padding-bottom:22px;
margin-top:0;
overflow:hidden;
}
#crosscol-wrapper img {
width:920px;
height:auto;
}
#crosscol-wrapper .caption {
color:#fff;
position:absolute;
height:32px;
overflow:hidden;
text-align:left;
float:left;
width:900px;
margin:-45px 0 0 25px;
}
#crosscol-wrapper .caption,x:-moz-any-link,x:default {
color:#fff;
position:absolute;
height:32px;
overflow:hidden;
text-align:left;
width:900px;
margin:-45px 0 0 -450px;
}
#outer-wrapper {
text-align:left;
font:normal normal 12px Droid Sans;
margin:0 auto;
}
#content-wrapper {
width:960px;
padding-top:10px;
background:#fff;
border:1px solid #c5c5c5;
border-radius:5px;
clear:both;
font:normal normal 12px Droid Sans;
-ms-border-radius:3px;
margin:0 auto;
line-height: 1.5em;
}
#main-wrapper {
float:left;
width:648px;
text-align:left;
display:inline;
margin-left:20px;
font:normal normal 12px Droid Sans;
line-height: 1.5em;
}
#main {
font:normal normal 12px Droid Sans;
line-height:
padding:0 20px 10px 15px;
line-height: 1.5em;
}
#sidebar-wrapper {
float:right;
width:290px;
display:inline;
}
#sidebar {
padding-left:20px;
}
.post-header-line-1 {
font-size:11px;
padding-bottom:5px;
border-bottom:1px solid #dddddd;
font:Halvetica, Arial, Sans-serif;
display:none;
margin:5px 0 15px;
line-height: 1.5em;
}
.post {
width:580px;
float:left;
background:#fff;
font:normal normal 12px Droid Sans;
margin:0;
padding:13px 15px;
line-height: 1.5em;
}
.post h3 {
height:30px;
width:600px;
overflow:hidden;
border-top:1px #dadada;
border-bottom:1px #dadada;
font:normal normal 12px Droid Sans;
margin:0;
}
.post h3 a,.post h3 a:visited,.post h3 strong {
font:normal normal 20px 'Trebuchet MS', Trebuchet, sans-serif;
text-decoration:none;
color:#444444;
letter-spacing:-1px;
border-top:1px #dadada;
}
body {
line-height: 1.7em;
background:#45474a;
margin-top:0;
color:#000000;
font:normal normal 12px Droid Sans;
}
a:link,a:visited,a:hover {
color:#247ee5;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border-width:0;
}
h1,h2,h3,h4,h5,h6 {
font-family:Arial, Helvetica, sans-serif;
font-weight:400;
clear:both;
}
h1 {
font-size:28px;
}
h2 {
font-size:24px;
}
h3 {
font-size:20px;
}
h4 {
font-size:12px;
}
h5 {
font-size:10px;
}
h6 {
font-size:8px;
}
hr {
background-color:#000000;
border:0;
height:1px;
margin-bottom:2px;
clear:both;
}
#header-wrapper {
position:relative;
height:138px;
font:normal normal 12px Droid Sans;
margin-bottom:10px;
background:url(http://4.bp.blogspot.com/-6ojXmeun1K0/TZ6YLnxaRNI/AAAAAAAAArg/JsvlfUmf7b4/s1600/bk_body.png) center no-repeat;
}
#header-inner {
background-position:center;
margin-left:auto;
margin-right:auto;
}
#header {
margin-top:26px;
margin-left:120px;
position:absolute;
left:0;
}
#header h1 {
font-size:48px;
color:#333;
}
#header a {
color:#333;
text-decoration:none;
}
#header .description {
color:#999;
display:block;
font-size:12px;
margin-top:6px;
padding-left:5px;
padding-top:5px;
}
#crosscol-wrapper {
width:100%;
height:auto;
padding-bottom:22px;
margin-top:0;
overflow:hidden;
}
#crosscol-wrapper img {
width:920px;
height:auto;
}
#crosscol-wrapper .caption {
color:#fff;
position:absolute;
height:32px;
overflow:hidden;
text-align:left;
float:left;
width:900px;
margin:-45px 0 0 25px;
}
#crosscol-wrapper .caption,x:-moz-any-link,x:default {
color:#fff;
position:absolute;
height:32px;
overflow:hidden;
text-align:left;
width:900px;
margin:-45px 0 0 -450px;
}
#outer-wrapper {
text-align:left;
font:normal normal 12px Droid Sans;
margin:0 auto;
}
#content-wrapper {
width:960px;
padding-top:10px;
background:#fff;
border:1px solid #c5c5c5;
border-radius:5px;
clear:both;
font:normal normal 12px Droid Sans;
-ms-border-radius:3px;
margin:0 auto;
line-height: 1.5em;
}
#main-wrapper {
float:left;
width:648px;
text-align:left;
display:inline;
margin-left:20px;
font:normal normal 12px Droid Sans;
line-height: 1.5em;
}
#main {
font:normal normal 12px Droid Sans;
line-height:
padding:0 20px 10px 15px;
line-height: 1.5em;
}
#sidebar-wrapper {
float:right;
width:290px;
display:inline;
}
#sidebar {
padding-left:20px;
}
.post-header-line-1 {
font-size:11px;
padding-bottom:5px;
border-bottom:1px solid #dddddd;
font:Halvetica, Arial, Sans-serif;
display:none;
margin:5px 0 15px;
line-height: 1.5em;
}
.post {
width:580px;
float:left;
background:#fff;
font:normal normal 12px Droid Sans;
margin:0;
padding:13px 15px;
line-height: 1.5em;
}
.post h3 {
height:30px;
width:600px;
overflow:hidden;
border-top:1px #dadada;
border-bottom:1px #dadada;
font:normal normal 12px Droid Sans;
margin:0;
}
.post h3 a,.post h3 a:visited,.post h3 strong {
font:normal normal 20px 'Trebuchet MS', Trebuchet, sans-serif;
text-decoration:none;
color:#444444;
letter-spacing:-1px;
border-top:1px #dadada;
}
body{line-height:1.7em;background:#45474a;margin-top:0;color:#000;font:400 normal 12px Droid Sans}a:link,a:visited,a:hover{color:#247ee5;text-decoration:none}a:hover{text-decoration:underline}a img{border-width:0}h1,h2,h3,h4,h5,h6{font-family:Arial, Helvetica, sans-serif;font-weight:400;clear:both}h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}h4{font-size:12px}h5{font-size:10px}h6{font-size:8px}hr{background-color:#000;border:0;height:1px;margin-bottom:2px;clear:both}#header-wrapper{position:relative;height:138px;font:400 normal 12px Droid Sans;margin-bottom:10px;background:url(http://4.bp.blogspot.com/-6ojXmeun1K0/TZ6YLnxaRNI/AAAAAAAAArg/JsvlfUmf7b4/s1600/bk_body.png) center no-repeat}#header-inner{background-position:center;margin-left:auto;margin-right:auto}#header{margin-top:26px;margin-left:120px;position:absolute;left:0}#header h1{font-size:48px;color:#333}#header a{color:#333;text-decoration:none}#header .description{color:#999;display:block;font-size:12px;margin-top:6px;padding-left:5px;padding-top:5px}#crosscol-wrapper{width:100%;height:auto;padding-bottom:22px;margin-top:0;overflow:hidden}#crosscol-wrapper img{width:920px;height:auto}#crosscol-wrapper .caption{color:#fff;position:absolute;height:32px;overflow:hidden;text-align:left;float:left;width:900px;margin:-45px 0 0 25px}#crosscol-wrapper .caption,x:-moz-any-link,x:default{color:#fff;position:absolute;height:32px;overflow:hidden;text-align:left;width:900px;margin:-45px 0 0 -450px}#outer-wrapper{text-align:left;font:400 normal 12px Droid Sans;margin:0 auto}#content-wrapper{width:960px;padding-top:10px;background:#fff;border:1px solid #c5c5c5;border-radius:5px;clear:both;font:400 normal 12px Droid Sans;-ms-border-radius:3px;margin:0 auto;line-height:1.5em}#main-wrapper{float:left;width:648px;text-align:left;display:inline;margin-left:20px;font:400 normal 12px Droid Sans;line-height:1.5em}#main{font:400 normal 12px Droid Sans;line-height:1.5em}#sidebar-wrapper{float:right;width:290px;display:inline}#sidebar{padding-left:20px}.post-header-line-1{font-size:11px;padding-bottom:5px;border-bottom:1px solid #ddd;font:Halvetica, Arial, Sans-serif;display:none;margin:5px 0 15px;line-height:1.5em}.post{width:580px;float:left;background:#fff;font:400 normal 12px Droid Sans;margin:0;padding:13px 15px;line-height:1.5em}.post h3{height:30px;width:600px;overflow:hidden;border-top:1px #dadada;border-bottom:1px #dadada;font:400 normal 12px Droid Sans;margin:0}.post h3 a,.post h3 a:visited,.post h3 strong{font:400 normal 20px 'Trebuchet MS', Trebuchet, sans-serif;text-decoration:none;color:#444;letter-spacing:-1px;border-top:1px #dadada}
Falta añadir que el código CSS está entre Skin en Edición de HTML de nuestra plantilla, aunque, podría estar en los gagets e incluso en los post con <style> aquí el CSS </style>
No hay comentarios:
Publicar un comentario