Desde hoy ya está disponible en Blogger el nuevo diseñador de plantillas.
Para acceder a él, solo tenéis que pulsar en la ficha Diseño y ahí tendréis la nueva opción incorporada, Diseñador de plantillas.
Blog dedicado a la informática. Se tratarán temas de diseño gráfico, diseño web, utilidades para blogs, webs interesantes, redes sociales, twitter, facebook, photoshop ...
Desde hoy ya está disponible en Blogger el nuevo diseñador de plantillas.
Para acceder a él, solo tenéis que pulsar en la ficha Diseño y ahí tendréis la nueva opción incorporada, Diseñador de plantillas.
Blogger pone a nuestra disposición un nuevo diseñador de plantillas para nuestros blogs.
La opción, de momento, solo está disponible en la página de Blogger in draft (Blogger en borrador)
Para quien no lo sepa aún, Blogger in draft es una versión especial de Blogger en la que podremos probar las nuevas funciones de Blogger antes de que éstas salgan a la luz.
Como he dicho anteriormente, para poder probar el nuevo diseñador de plantillas tendremos que acceder a nuestra cuenta de Blogger desde la página Blogger in draft.
Una vez dentro, podemos ver que la apariencia es similar a la que nos ofrece el escritorio de Blogger.
Como hay personas que tienen cierta dificultad para agregar la nueva columna, he decidido poner en descarga directa los archivos de esas plantillas con la columna ya agregada, para que solo tengáis que sustituir la vuestra por la nueva sin modificar nada del código HTML.
No es que haya creado todos los archivos para todas las plantillas de Blogger, pero la mayoría sí están.
@media all {
div#main-wrapper {
float: $startSide;
width: 66%;
padding-top: 0;
padding-$endSide: 1em;
padding-bottom: 0px;
padding-$startSide: 1em;
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 */
}
div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: $endSide;
}
div#sidebar {
width: 30%;
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 */
}
}
div#newsidebar
realizando las siguientes modificaciones: div#newsidebar {
width: 30%;
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 */
}
div#main-wrapper
), en vez de dejarlo en 66% lo vamos a definir en 40%.div#sidebar
y div#newsidebar
) en vez de 30% lo definiremos al 28%. <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
<div id='main-wrapper'>
, haciendo las siguientes modificaciones: <div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 31%;
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 */
}
}
div#newsidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 25%;
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 */
}
Una vez añadido el código, nos dirigimos a la parte del cuerpo (body) de la plantilla para agregar la nueva columna.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
<div id='main-wrapper'> , quedando el código de esta forma:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(
http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(
http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
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 */
}
#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $startSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(
http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x $startSide top;
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 */
}
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Éste es el código de la columna lateral que tenemos a la derecha del blog. Lo que haremos será copiar y pegar este código justo antes de la línea <div id='main-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
#newsidebar-wrapper {
#sidebar-wrapper {
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat $startSide bottom;
}
#header-wrapper {
padding-bottom: 15px;
}
#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y $startSide top;
}
#content-wrapper {
position: relative;
width: 990px;
background: #f7f0e9;
}
#sidebar-wrap {
<div id='sidebar-wrap'>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<div id='main-wrap1'><div id='main-wrap2'>
<div id='newsidebar-wrap'>
padding-$endSide:1em;
#sidebar-wrapper {
<div id='sidebar-wrapper'>
<div id='main-wrapper'>
<div id='newsidebar-wrapper'>
#content-wrapper {
#sidebar-wrapper {
#newsidebar-wrapper {
<div id='sidebar-wrapper'>
<div id='main-wrapper'>
<div id='newsidebar-wrapper'>
#outer-wrapper {
padding-$endSide:1em; Esta nueva entrada la dedicaremos a personalizar la plantilla que tenemos aplicada a nuestro blog de Blogger, es decir, modificar los colores y el tipo de letra de los diferentes elementos de la plantilla.
En más de una ocasión al cambiar la plantilla de nuestro blog por otra os aparecerá, en el lugar donde se debe mostrar la fecha de la entrada, el texto "Undefined".
La solución a este problema es cambiar el formato de la hora que tenemos en nuestro blog.
Esta nueva entrada del blog está dedicada a cambiar el aspecto de nuestro blog de Blogger con plantillas gratuitas que podemos encontrar en muchas páginas de internet.
Reservados todos los derechos. Queda prohibida la reproducción, distribución, comunicación pública y utilización, total o parcial, de los contenidos de esta web, en cualquier forma o modalidad, sin previa, expresa y escrita autorización por parte del administrador [José M García]. |