Expandir y contraer gadgets con efecto deslizante

Muchas veces algunos gadgets se vuelven muy largos con el paso de tiempo, como el de Etiquetas, Archivo del blog, Lista de enlaces, etc. y estos comienzan a ocupar demasiado espacio en la sidebar, así que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se expandan sólo cuando el lector quiera verlos, y además de eso con un efecto deslizante. 

Puedes ver un ejemplo en este blog de pruebas.

Para hacer esto en los gadgets vamos a usar Scriptaculous que es el que le dará el efecto deslizante.

Sólo vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios.

Agrega antes de </head> lo siguiente:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>

Ahora localizamos el gadget al que queremos aplicarle el truco, por ejemplo, un gadget HTML/Javascript sería más o menos así:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot; ExpandGadget1&quot;,&quot;slide&quot;); return false'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id=' ExpandGadget1' style='display: none; text-align:left;'>
<div class='widget-content'>
<data:content/>
</div>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que está en color rojo y listo. Aquí lo que se debe tomar en cuenta es que cada vez que se ponga en un gadget se debe cambiar lo que está en color azul por otro nombre, por ejemplo ExpandGadget2, ExpandGadget3, etc. o cualquier otro nombre pero nunca debe ser igual a otro que ya tengamos.

Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues éstos varían según el tipo de gadget que sean, pero para saber dónde debemos poner el código sólo hay que guiarnos por los códigos que están en color gris, así que sólo localiza la primera línea gris y debajo pega el primer código en rojo, luego localiza la segunda parte gris y ahí deberás pegar alrededor lo otro en color rojo, y por último busca la última línea gris y arriba de ella pega el último código rojo.

No está de más recordarles que se usa Scriptaculous y que no es compatible con jQuery, así que si usas jQuery entonces deberás realizar el hack para que puedan funcionar las dos librerías juntas.

visto en ciudad blogger

Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue dónde empiezan y dónde acaban.
Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets.

Haremos que las entradas se vean más o menos así.

Y los gadgets así.

Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Diseño | Edición de HTML, y ahora...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Antes de ]]></b:skin> agrega esto:

.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}

.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

.footer-inner .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

El tamaño, tipo y color del borde se modifica en border: 1px solid #000;
También puedes elegir que los bordes sean redondeados, sólo cambia los valores en color azul por unos más altos, por ejemplo 10px entre más alto sea el valor más redondeadas serán las esquinas.

El primer bloque corresponde a los bordes de las entradas, el segundo bloque a los bordes de los gadgets de la sidebar, y el tercer bloque a los gadgets del footer. Si no quieres aplicar el enmarcado a una de estas áreas sólo elimina el que le corresponde.

En el caso de algunos diseños de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos será este:

.date-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}

Para las Plantillas antiguas de Blogger

Antes de ]]></b:skin> agrega esto:

.post {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.main .post {margin:20px 0; padding:15px;}

.sidebar .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}

.footer .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}

De igual forma el primer bloque es para las entradas, el segundo para la sidebar, y el tercero para el footer.

Ya sea que uses una plantilla del Diseñador, o una plantilla antigua, quizá tengas que modificar la separación del borde pues en algunos casos podrá quedar muy pegado al contenido. Esa separación se modifica en el padding que aparece en los estilos. Y en el caso de la distancia entre gadgets y gadget o entrada y entrada, esa se controla en el margin, el primer valor es el margen superior e inferior, y el segundo valor es el margen izquierdo y derecho.

Estos métodos son únicamente para plantillas oficiales de Blogger, para cualquier otra plantilla personalizada les recomiendo contacten al autor de su plantilla para preguntar sobre el procedimiento.

 

visto en ciudad blogger.

Leer más...

Si usamos bordes tendremos un resultado como este.

Y si usamos imágenes podrá verse más o menos así.

Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:

.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Para las Plantillas antiguas de Blogger

De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:

.sidebar .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:

.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.

Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.

Leer más...

Los tabviews son elementos que nos permiten agrupar en un solo contenedor varios gadgets y que pueden seleccionarse por medio de pestañas.

Su función principal es ahorrarnos espacio en el blog para evitar tener dispersos gadgets de la misma categoría y así poder agrupar en uno solo varios gadgets. Hay varios métodos para crear tabviews, algunos requieren jQuery, otros Mootools, o cualquier otro script.

Para agregarlo a tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega los estilos:

/* Tabview
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin:0;
padding:3px 0; /* Si usas plantilla del Diseñador cambia el 0 por 15px */
font-size:12px; /* Tamaño de la fuente en las pestañas */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#0B243B; /* Color de las pestañas */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#fff;
}
.tabviewnav li a:hover {
color:#fff;
background:#084B8A; /* Color de la pestaña al pasar el cursor */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#084B8A; /* Color de la pestaña activa */
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #ccc; /* Borde del contenedor general */
background:#fff; /* Color de fondo del gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Ahora antes de </head> pega este script:

<script type='text/javascript'>
// Tabview para agrupar gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Por último busca esta línea:

<div class='column-right-inner'>

O si usas una plantilla antigua de Blogger busca esta línea:

<div id='sidebar-wrapper'>

Pega debajo de cualquiera de esas dos líneas lo siguiente:

<div class='tabview'>
<b:section class='tabviewtab' id='Pestaña1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña3' maxwidgets='1'/>
</div>

Guarda los cambios, y entra en Diseño | Elementos de la página, ahí verás las nuevas áreas para agregar los gadgets, los identificarás porque tienen mayor separación que los demás.

Sólo tienes que dar click en Añadir un gadget para agregar el gadget a la pestaña que le corresponde, o bien, arrastrar un gadget que ya tengas a esa sección.

Si quieres agregar más pestañas sólo añade antes del último </div> una línea como esta:

<b:section class='tabviewtab' id='Pestaña4' maxwidgets='1'/>

Toma en cuenta que cada línea que agregues deberá tener un ID diferente, por ejemplo Pestaña5, Pestaña6, etc.

Puedes agregar varios tabviews, sólo repite el último paso y recuerda cambiar de igual forma el nombre de los IDs.

Si deseas agregarlo en una entrada para mostrar un contenido entonces el código que deberás añadir en tu post será este:

<div class='tabview'>
<div class='tabviewtab' id='Pestaña1' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
<div class='tabviewtab' id='Pestaña2' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
<div class='tabviewtab' id='Pestaña3' title='Título de la pestaña'>
... Aquí el contenido ...
</div>
</div>

Ahí agrega el contenido que quieras donde se indica y el título de la pestaña, y de igual forma puedes añadir más pestañas antes del último </div> añadiendo un fragmento como este:

<div class='tabviewtab' id='Pestaña4' title='Título de la pestaña'>
... Aquí el contenido ...
</div>

Recuerda que, si tu sidebar es muy angosta no conviene que pongas muchas pestañas, o que los títulos de las pestañas sean muy largos, de lo contrario las pestañas se encimarán.

También debes tomar en cuenta que este gadget no acelera la velocidad de carga del blog, es únicamente para agrupar gadgets en uno solo, incluso -dependiendo de cada blog- podría tardar un poco en cargar el tabview.

visto en ciudad blogger

Leer más...

Seguro no es el caso de todos pero habrá quienes en algún momento tengan la necesidad de poner el gadget de Seguidores de su blog en otro blog distinto. No me refiero a exportar tus seguidores a otro blog pues eso como tal no estoy seguro que se pueda.
A lo que me refiero es a poder mostrar el gadget de seguidores del blog principal en otro blog diferente y que los lectores también puedan hacerse seguidores desde ese segundo blog.

Para conseguir que el gadget de Seguidores se muestre en otro blog entra a Google Friend Connect, ahí busca en la columna izquierda el nombre de tu blog y da click en él.

Aparecerá un pequeño menú, busca Configuración y luego selecciona la pestaña Avanzados.

Una vez hecho eso busca el punto número 2 que dice Otras opciones, ahí verás un recuadro titulado Direcciones alternativas.

Dentro del recuadro encontrarás dos URLs de Blogger, justo debajo de ellas agrega la URL del otro blog donde quieres mostrar a tus seguidores y guarda los cambios.

Luego regresa al pequeño menú del lado izquierdo, da click en Gadgets y selecciona Miembros.

Configura tu gadget de seguidores con el ancho y colores que quieras, cuando termines da click en Generar código.

Ya sólo copia ese código y dirígete al blog donde deseas mostrar tus seguidores, ahí pega en un elemento HTML/Javascript el código que copiaste y listo.

Verás que en ese blog se muestra el mismo número de seguidores que tienes en tu blog principal. Aunque en algunos casos quizá diga que no hay seguidores, pero si le das click en Unirte o en Acceder de inmediato se mostrarán todos los seguidores.

Un dato curioso es que en ese momento verás que el gadget tradicional de Seguidores de tu blog principal habrá cambiado ligeramente, básicamente habrá cambiado el color del botón para unirse el cual tendrá un color azul y mostrará un texto distinto al habitual.

Otra "curiosidad" es que en adelante te llegará un correo cada vez que alguien se haga seguidor de tu blog, pero si te enfada recibir esos correos puedes eliminar esas notificaciones haciendo click en el enlace que viene en los mismos correos.

Como dije al principio, quizá no sea útil para todos pero si algún día alguien necesita hacerlo por equis razón entonces ahí está la información.

Leer más...

En algunas ocasiones es necesario ser lo más descriptivo posible con ciertas áreas del blog como por ejemplo en las páginas de etiquetas; ya sea porque quizá la etiqueta que elegimos no dice mucho sobre la temática de la que se habla, o porque el público al que está dirigido el blog necesita más detalles para su comprensión.

Así que una forma de ser más explícitos es agregar una descripción en las páginas de las etiquetas para cuando el lector haga click en esa etiqueta pueda tener una introducción sobre lo que encontrará en esa categoría.

Como también soy malo describiendo las cosas mejor mira en este blog de pruebas que enlaza a la etiqueta Juegos. Si das click en otras etiquetas verás que la descripción cambia y ninguna de ellas se ven ni en la portada ni en las entradas individuales.

Para agregar estas descripciones a las páginas de etiquetas haremos uso de los códigos condicionales para que -redundantemente- condicionemos que sólo se muestren en la etiqueta que especifiquemos, por lo tanto puedes hacerlo para todas las etiquetas de tu blog o sólo para las que elijas.

Primero ingresa a Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include data='top' name='status-message'/>

Si no la tienes probablemente la eliminaste para ocultar el mensaje "Mostrando entradas con la etiqueta..."
Si ese es tu caso entonces busca este código:

<!-- posts -->
<div class='blog-posts hfeed'>

Debajo de cualquier de esos códigos agrega esto:

<b:if cond='data:blog.url == &quot;http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta&quot;'>
<div id='IntroEtiquetas'>
<img src='URL de la imagen' style='float: left; border:0; margin: 0 5px 10px 0;'/>
...Aquí va la descripción de la etiqueta...
</div>
</b:if>

Escribe el nombre de tu blog y el de la etiqueta donde se indica. Si lo deseas también puedes agregar una imagen, pero si no, puedes quitar el código de la imagen y no pasa nada.

Ese código es para una sola etiqueta, si deseas más sólo agrega debajo de él otro código igual cambiando obviamente el nombre de la etiqueta y su descripción.

Ya que hayas hecho eso añade antes de ]]></b:skin> los estilos:

#IntroEtiquetas {
background:#6E6E6E; /* Color de fondo */
color:#000; /* Color del texto */
padding:20px;
}

Son estilos muy básicos pero que puedes mejorar agregando más o modificando los existentes para que se adapten a tu gusto.

Como ves es un procedimiento muy simple que puede ayudar a ilustrar las categorías de tu blog haciéndolas más personalizadas.

tomado de ciudad blogger

Leer más...

Desde que en abril se anunció la nueva interfaz de Blogger mucho se ha esperado de ella pero pocos han sido quienes han tenido la oportunidad de usarla. Estos "afortunados" -como dice Blogger-, seguro ya saben que esta nueva interfaz no tiene la opción de editar la plantilla desde la Edición de HTML. Únicamente podemos cambiar de plantilla, o bien, cambiar de lugar o eliminar los gadgets desde lo que usualmente conocemos como Elementos de la Página y que ahora sólo se llama Diseño.

Como todo lo que está en Blogger in Draft es de pruebas, sería muy apresurado decir que es definitivo que la Edición de HTML no la volveremos a ver. Así que bien puede ser que definitivamente no la incluyan o que más adelante lo hagan. Lo cierto es que en estos casos lo mejor es no especular y dejar que de la boca mano de Blogger salga la versión oficial con sus merecidos argumentos, aunque ya sabemos que siempre lo hace más tardado de lo que debería.

Mientras tanto, los "afortunados" que ya disponen de esta nueva interfaz aún pueden editar la plantilla desde la Edición de HTML, ya sea usando la versión normal de Blogger o ingresando a una URL antigua.

Como esta interfaz está disponible sólo desde Blogger in Draft, entonces la primera opción es dejar de usar esta interfaz como escritorio predeterminado. Así que entramos en Blogger, desmarcamos la casilla Establacer Blogger en borrados como predeterminado, cerramos la sesión e ingresamos al Blogger "normal".

Habiendo hecho esto podrás utilizar nuevamente la versión oficial actual que es la que la mayoría conocemos y que sí dispone de la Edición de HTML.

Otra opción es que, si no quieres estar entrando y saliendo de esa interfaz cada vez que vayas a editar la plantilla entonces a través de un link puedas acceder a la antigua interfaz de Blogger in Draft y así puedas utilizar la Edición de HTML.

Para ello necesitas ingresar a tu cuenta de Blogger, y en la barra izquierda localiza el nombre de tu blog y luego haz click en Escritorio.

Al hacer esto verás en la barra de direcciones de tu navegador una dirección que contiene la ID de tu blog, es una serie de números fácil de reconocer.

Copia esa ID y luego usa este enlace:

http://draft.blogger.com/html?blogID=XXXXXXXXXXXXXXXXX

Cambia lo que está en rojo por la ID de tu blog y podrás acceder a la Edición de HTML de la antigua interfaz de Blogger in Draft.

Como también sería muy tedioso tener que estar buscando la ID de tu blog a cada rato puedes agregar esa URL a tus marcadores (favoritos) y así tener un acceso mucho más fácil.

Lo dicho, no hay nada definitivo de manera oficial pero mientras tanto estas son unas opciones para poder editar la plantilla del blog. Y claro, que si ya tienes esta interfaz aprovecha la opción de Enviar comentarios para que puedas quejarte libremente :)

Leer más...