Añadir una sección con pestañas para incluir gadgets

Veremos como incluir en la sidebar o sobre las entradas por ejemplo, una nueva sección que nos permita mostrar mediante pestañas diferentes gadget de Blogger (archivos, etiquetas, perfil, etc.)

Incluiremos además, usando variables, la posibilidad de controlar su diseño desde la pestaña "Fuentes y colores" de nuestro panel de Blogger.

[1] Ingresamos a nuestro panel de Blogger -> Diseño -> Edición HTML.

[2] Localizamos la etiqueta .

[3] Copiamos este script y lo pegamos justo antes de esa etiqueta:
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>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;
}
}

tabberObj.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.tabber = this;
DOM_a.tabberIndex = i;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/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({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>
[4] Algo más arriba de donde hemos colocado el script veremos la etiqueta ]]> y justo sobre ella colocamos el código CSS:
/*-- Inicio sección pestañas --- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*-- Fin sección pestañas---*/
[5] Guardamos los cambios en la plantilla.

[6] Una vez hemos guardado los cambios, localizamos la zona de la plantilla (casi a comienzo de su código) la zona donde están incluidas las variables, será algo así:

Variables

[7] Copiamos el código de las nuevas variables que vamos a añadir y lo pegamos justo después de la última variable de nuestra plantilla (antes del cierre de las mismas: */)
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
[8] Para terminar la instalación, localizamos esta línea en la plantilla:
Colocación sidebar tabs

* Si quisiéramos mostrar la sección de pestañas sobre las entradas, tendríamos que colocar el código (paso [8]) justo después de

* Los cambios como antes os decía del color del borde, las pestañas o el fondo de la "caja", los haremos desde nuestro panel en Fuentes y colores viendo los cambios en Vista previa.

Tabs colores

Fuente:
El Escaparate de Rosa
--> Leer Más...

Aplicar Blockquote en tus entradas publicadas de Blogger

Hoy vamos a ver cómo agregar un blockquote o bloque entrecomillado, que sirve para resaltar alguna cita textual o un párrafo en particular.

En futuros post veremos más estilos para nuestro blockquote; hoy veremos cómo añadirlo a nuestro blog (si es que no lo tiene) o cambiarlo un poco.
  • Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos:
blockquote {
margin:.5em 0;
}
El contenido (margin:.5em 0;) no tiene que ser necesariamente igual, lo importante es que exista el blockquote.

» Si no lo encontramos, entonces puede que en nuestro blog esté con este nombre:
.post blockquote {
margin:.5em 0;
}
Cualquiera de los dos es igualmente válido.
  • Si es que tenemos el código, podemos personalizarlo un poco, sustituyéndolo por:
blockquote {
background: #F3F3F1 url(http://1.bp.blogspot.com/_yVKhLCZjGOI/S0uYAzpgvyI/AAAAAAAABGs/ytzVvt2-HHs/s400/blocknaran.png)repeat-y ;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
font-size: 0.9em;
}
Si es que en nuestro blog no existe el blockquote { o .post blockquote { entonces podemos añadir el código debajo de:

/* Posts
----------------------------------------------- */
  • Damos click a Guardar.
  • Cada vez que queramos usarlo, podemos agregar
Texto-Texto-Texto
o sino usar el botón que está en el editor de entradas:
Esta es la forma a mi entender más sencilla de aplicar comillas, si desean aplicar comillas con otros estilos aqui les dejo el enlace para que hagan las prueba hay 14 diseños.

Nota: no olviden hacer una copia de su blog antes de hacer modificaciones.

--> Leer Más...

Colocando la cabecera (header) al blog

La cabecera es una de las partes más importantes de nuestro blog, en ella colocamos el nombre de nuestro blog y si deseamos, podremos colocar alguna descripción.

Insertar la cabecera no es nada complicado. Si ya tenemos la imagen de fondo, seguiremos los siguientes pasos:
  • Vamos a Diseño- Elementos de la página y debajo de donde dice Barra de navegación, veremos con el nombre de nuestro blog, y en una esquina, dirá Editar.

  • Ingresamos a Editar, y aparecerá un cuadro de diáologo, donde pondremos el título de nuestro blog, la descripción y podremos insertar la imagen, ya sea desde nuestra PC o desde una dirección web. Si la imagen que vamos a insertar ya contiene texto, entonces donde dice Ubicación, pondremos "En lugar del título y la descripción"; si sólo es una imagen de fondo, elegiremos la opción "Detrás del título y la descripción".

  • Damos click a guardar y listo!
Fuente: diyva
--> Leer Más...

Cómo hacer una copia de las entradas publicadas

Hace unos días squirrel me preguntaba cómo descargar una copia de todas las entradas publicadas para que , en el caso que borremos nuestro blog accidentalmente u otro caso, no perdamos todos nuestros post.

Para descargar una copia de los post, donde también se guardarán sus comentarios, haremos lo siguiente:

  • Vamos a Configuración - Básico y Herramientas del blog.

  • Veremos tres opciones Importar blog - Exportar blog - Suprimir blog.

  • Escogemos la opción Exportar blog.

  • Aparecerá un cuadro titulado "Exporta tu blog". Damos click en "Descarga tu blog".
Eso sería todo; muy sencillo y en poquísimo tiempo.

Si deseas, puedes aprovechar también para descargar una copia de tu plantilla.

Fuente: diyva
--> Leer Más...

Como crear Títulos que sean atractivos y aumentar tus visitas

Los titulos de los articulos de nuestro blog o de las noticias son uno de los factores mas importantes a tener en cuenta a la hora de la redaccion. Un puede escribir un gran articulo y quizas no aprovechar el potencial del mismo si no le vendemos de forma correcta. El titulo del Post sera lo que nuestros usuarios vean en los buscadores, Probablemente como nos enlazaran desde otras paginas webs y son la puerta de acceso. Ahora bien, ¿como lograr titulos que realmente vendan el contenido de nuestros post?¿Cuales son los titulos que mas atraen visitantes? bueno de eso se trata este Post…

Hoy en dia, vivimos en un mundo en el que el tiempo se ha vuelto cada vez más valioso. Con este aumento de valor, las personas han reducido el tiempo que pasan explorando blogs y leyendo artículos, y en la actualidad la mayoría solo ve los títulos. Este creo que es uno de los motivos mas fuertes de la importancia de los titulos claros , simples, Intrigantes y descriptivos. Un buen titulo debe atrapar al posible visitante brindandole la solucion a algun problema, generandole una duda o dilema.

Algunas de las formas de hacer mas interesantes los titulos son por ejemplo comenzando los titulos con las frases:
  • Como crear…
  • Mitos sobre…
  • Titulos en forma de pregunta
  • Como lograr…
  • Los mejores 10…
  • Top 10…
Estas son algunos de los mejores titulos que podemos utilizar, podemos por ejemplo si nos referimos a un articulo sobre cosas para mejorar el posicionamiento web decir:
  • Como podemos mejorar el posicionamiento de nuestro Blog
  • 7 Pilares para mejorar el posicionamiento de un Blog
  • ¿Queres conocer como mejorar el posicionamiento de tu blog?
  • ¿Como logramos recibir 2000 visitas a nuestro blog?
Bueno, me tome el atrevimiento de sacar algunos titulos propuestos por Daniel Ulczyk que estan buenos:
  • 10 cosas que no sabías acerca de (…)
  • 10 razones para odiar a (…)
  • 10 blogs increíbles sobre (…)
  • 10 secretos sobre (…)
  • ¿Cómo funciona (…)?
  • Cómo ser grande en (…)
  • 10 Mitos expuestos sobre (…)
  • (…) mitos y hechos
  • 10 Mortales errores sobre (…) que podés estar cometiendo
  • 10 hechos sorprendentes sobre (…)
  • 10 Preguntas sobre (…)
  • Todo lo que sabés sobre la (…) es incorrecto
  • 10 Videos increíbles sobre (…)
  • La verdad sobre (…)
  • La ciencia detrás de (…)
Termina de ver todos los titulos que propone haciendo clic aqui.

Fuente: blogdelaweb
--> Leer Más...

Cambiar el fondo principal de tu Blog

A través de sus preguntas voy detectando que cosas se suponen fáciles, para muchos no lo son tanto, así que seguiremos engrosando el contenido de la etiqueta BPT.

En esta ocasión es el turno de ver cómo cambiar el fondo de un blog, que para todos los casos que se explican, requiere modificar nuestro selector CSS llamado body.

En primer lugar tenemos que escoger qué tipo de fondo queremos. Un fondo puede ser un color plano o cualquier otro tipo de imagen. Con lo primero no hay mayor problema, porque se trata de indicar un color en código hexadecimal y nuestro fondo se verá por completo de ese color.

Como se ha anticipado, esto lo ponemos en el selector body (otros atributos comunes que necesites para todo el blog) mediante la propiedad background. Si ya tenemos definido un background, simplemente cambiamos su contenido. Sin miedo. Podemos ver los resultados con Vista Previa antes de grabar los cambios de manera definitiva.
body {
background:#990000;
}
Con las imágenes tampoco hay demasiado problema, pero existen varios sistemas distintos. Comenzamos con el de colocar una imagen grande que ocupe todo el espacio visual del navegador y que no se mueva al hacer scroll.

Tanto en este caso como en los restantes, necesitaremos escoger la imagen que nos guste y lo que es más importante, un lugar dónde alojarla para luego poderla utilizar. Sobre esto último, para Blogger lo mejor es alojarla en Picasa (Blogger a fin de cuentas), aunque también se puede subir a un post sin publicar (borrador) que bien podríamos usar también para otras imágenes que vayamos necesitando alojar en algún sitio en el futuro. Una vez alojada, lo que copiamos es su URL o dirección.

Para la imagen fija de fondo, el código sería.
body {
background: url("http://dirección_imagen") center no-repeat fixed #ffffff;
}
Si entiendes inglés, los atributos son prácticamente autoexplicativos: center para centrar la imagen, no-repeat para que no se repita y fixed para que se quede fija. El último código hexadecimal es optativo y sólo será visible mientras se carga la imagen o en los espacios dónde esta pudiera ser transparente (formatos .gif y .png).

Un ejemplo de cómo quedan este tipo de fondos, lo puedes ver en Decora tu blog, dónde además hay varios modelos para descargar. Usando este sistema, puede ser necesario eliminar el fondo de las entradas u otros elementos, o incluso cambiar el ancho de vuestra plantilla. En la página del enlace, para ajustar el blog a sus diseños y por facilitarnos la tarea, proponen cambiar la plantilla a una Mínima y así se hacen ambas cosas de una tacada.

Esta forma de montar un fondo es viable y a veces necesaria para montar la cosa a nuestro gusto, pero presenta algunos inconvenientes que tienes que conocer:
la imagen tendrá un peso considerable y demorará la carga de la página
el ancho para cada usuario es imprevisible (dependerá de cómo tenga ajustada cada uno su resolución), por lo que en resoluciones pequeñas se cortarán los laterales de nuestra imagen y en las grandes se podrían quedar huérfanos.
para solucionar esto último el ancho de la imagen tendrá que ser realmente grande (más de 1200px-1500px), incrementando el problema del primer punto.

Una posible mejora sería prescindir de una gran imagen y usar otra igualmente ancha, pero menos alta. Esta imagen la repetiremos verticalmente con un repeat-y. Para que todo vaya bien, es necesario que la parte superior de la imagen case con la parte inferior, al modo en que lo hace una baldosa con otra.

Fondos de este tipo puedes encontrar por doquier en internet, pero si conoces algún editor de imágenes, también puedes crearlo nosotros mismos partiendo de cualquier otra imagen, aunque no estuviera expresamente destinada a fondo.

El código en este caso cambiaría sólo en cuanto al atributo de repetición:
body {
background: url("http://dirección_imagen") center repeat-y fixed #ffffff;
}
Para usar imágenes todavía más pequeñas en cuanto a peso, ya nos conviene reducir sustancialmente el ancho (100, 200, 300px...) y conseguir una imagen que case tanto arriba-abajo como izquierda-derecha, ya que lo que vamos a hacer es teselar por completo el fondo.

Para ello y comparativamente con los casos anteriores, sólo necesitamos quitar el atributo de repetición. Repetir tanto en vertical como en horizontal, es lo que hace la propiedad background por defecto, es decir, cuando no tiene atributo alguno al respecto.
body {
background: url("http://dirección_imagen") center fixed #ffffff;
}
Y por fin, el caso más usual. que el fondo se mueva al tiempo que el resto de la página. Para esto eliminaremos en cualquiera de las dos últimas variantes (repetición vertical, repetición en ambos sentidos) el atributo fixed. En la primera (sin repetición), al utilizar una sola imagen, si esta no estuviera fijada, al hacer scroll pasariamos a ver lo que hay debajo de dicha imagen; es decir, nada. o en el ejemplo, un fondo completamente blanco (#ffffff). Por tanto, en el caso de una sola imagen para todo el fondo, sin repetir, deberemos usar siempre fixed.
body {
background: url("http://dirección_imagen") center repeat-y #ffffff;
}
body {
background: url("http://dirección_imagen") center #ffffff;
}
Fuente: oloblogger
--> Leer Más...

Zopim, un chat diferente para tu blog

Siempre he pensado que no me gustan los chats en los blogs, sin embargo Zopim me ha gustado, me parece un sistema diferente.

Poco intrusivo y que permite la interacción en un blog, es una chat interesante.

Nada mejor que su video de presentación para observar sus características.

Para conseguirlo solo debes darte de alta y seguir las instrucciones que nos dan.




Fuente: PizcosBlog
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika