trucos blogger

Download Trucos Blogger

Post on 11-Jul-2015

291 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

trucos para mejorar

TRANSCRIPT

los 10 trucos de blogger mas buscadosEsta post pretende ser una lista con los 10 trucos ms buscados en Blogger, algunos muy sencillos, otros no tanto, pero todos buscando mejorar algn aspecto de la plataforma para blogs de Google. 1. Eliminar la navbar o barra Blogger.

Aunque esta barra puede tener algunos atajos para manejar nuestro blog, su valor es poco o nulo para el lector, ocupa espacio extra y es poco esttica. Eliminarla es sumamente sencillo, solo hay dirigirse a Diseo/Edicin HTML y buscar el siguiente cdigo: dijo: ]]>

Y justo antes pegar lo siguiente: dijo: #navbar-iframe { height:0px; display:none; visibility:hidden; }

2. Mostrar los ltimos comentarios y los ltimos artculos en la sidebar. Este truco se basa en usar la direccin sindicacin de comentarios y los artculos que todos los blogs de Blogger tienen. Estas direcciones son: Para comentarios: http://tublog.blogspot.com/feeds/comments/default Para artculos: http://tublog.blogspot.com/posts/comments/default Donde tublog.blogspot.com es la direccin de tu blog.

Ahora solo hay que ir a Diseo/Elementos de pgina y dar clic en Aadir un gadget, en la ventana que se abre se selecciona un gadget de Feed y se escribe la direccin de

comentarios para mostrar los ltimos comentarios, se repite el proceso para crear un nuevo gadget de feed pero esta vez usando la direccin de los artculos. 3. Agregar una barra lateral o sidebar adicional a la plantilla. Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas ms comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseo que se trate, as, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarn de una remodelacin total que tal vez hagan ms conveniente cambiar de diseo. A grandes rasgos el proceso es el siguiente: 1. Analizar la estructura y estilos de la plantilla. 2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets. 3. Modificar estilos. Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces: Analizar la estructura y estilos de la plantilla

La mayora de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con ttulo y descripcin, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (pe de pgina) con crditos y otra informacin. Para este caso, es de inters el contenedor, donde se encuentra el contenido y la sidebar, desde el cdigo de Blogger (Diseo / Edicin HTML) este se ve como: dijo:

Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) estn definidos por estilos css que determinan su ancho, fondo y otras caractersticas. As que lo primero ser averiguar estas caractersticas buscando algo como: dijo: #main-wrapper { float:left; width:620px; /*.... otros atributos ... */ } #sidebar-wrapper { float:right; width:300px; /*.... otros atributos ... */ }

Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, ms de una vez. Aqu es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribucin. Al sumar los anchos del cdigo de ejemplo se tiene un total de 920px, el cual ser el espacio disponible para el contenedor principal y las sidebars. Agregar un nueva zona editable. Agregar una nueva zona editable en blogger es muy sencillo, estas estn definidas por elementos section que al incluirlos en el cdigo ya pueden contener gadgets (elementos de pgina). El cdigo de una nueva zona editable es algo como: dijo:

Y para agregar una nueva zona editable, solo hay que agregar este cdigo justo despus de la zona editable existente: dijo:

Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento section, es por eso que en el ejemplo aparece como sidebar2. La clase puede repetirse y en el caso de los sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener cdigo de gadgets, estos se integraran automticamente cuando agreguemos un nuevo gadgets desde Elementos de pgina. Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformara, as que falta hacer algunos cambios. Modificar estilos.

Ya sabemos el ancho total disponible y tenemos la zona editable, as que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue: dijo: #main-wrapper { float:left; width:540px; /*.... otros atributos ... */ } #sidebar-wrapper { float:right; width:380px; /*.... otros atributos ... */ }

De esto modo el espacio disponible para ambas sidebars es de 380px. Lo ms comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicacin (derecha izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos: dijo: #sidebar { width:50%; float:left; /*.... otros atributos que consideres necesarios: padding, margin, etc ... */ } #sidebar2 { width:50%; float:right;

/*.... otros atributos que consideres necesarios: padding, margin, etc ... */ }

Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets. 4. Leer ms o Continuar leyendo en los artculos de Blogger. Para hacer la navegacin ms ligera a nuestros lectores muchas veces conviene mostrar solo un resumen de los artculos. Como Blogger no tiene esta caracterstica por defecto, habr que usar CSS o Javascript para conseguir este propsito. Ventaja: Leer ms se aade slo en las entradas que elegimos. Paso a paso: a) Expandir los artilugios y aadir justo antes de :

b) Buscar la siguiente lnea antes de post-header-line-1: dijo:

Y reemplazarla por: dijo:

c) Justo debajo de , ubicar estas dos lneas: Reemplazarlas por:

#fullpost {display:none;} Leer ms... checkFull("post-" + ""

) Guardar los cambios. e) Para postear una entrada, hacerlo del siguiente modo: dijo:

TEXTO A MOSTRAR TEXTO A OCULTAR

y listo. 5. Mostrar los artculos ms populares o ms comentados. Seguramente debido a las pruebas de Blogger para incluir el "Suscribe" en el formulario de comentarios, el widget de entradas ms populares en espaol, ha dejado de funcionar correctamente.

He corregido la Pipes de Yahoo, y ya podis disponer de nuevo del widget funcionando sin problemas. Solo tenis que copiar el cdigo en un elemento HTML (Gadget) y sustituir donde dice "elescaparatederosa" por el nombre de vuestro blog (tal como aparece en la url del navegador). function pipeCallback(obj) { document.write(''); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items.link + "'"; var item = "" + "" + obj.value.items.title + " "; document.write(item); } document.write(''); }

El nmero de entradas a mostrar en el widget, podis controlarlo en &num=5 cambiando el 5 por el nmero de entradas que queris mostrar en el widget. 6. Paginacin o pginas numeradas en Blogger.

Blogger solo muestra un enlace a la pgina siguiente y anterior, con la pgina es posible mostrar un cantidad ms grande de pginas para navegar indicadas con nmeros. Nuevamente el funcionamiento se basa en un script que es necesario instalar en el blog para que funcione. Paginar es separar las entradas del blog en grupos de cierta cantidad de entradas y permitir navegar entre ellas. En Blogger, la nica posibilidad que tenemos es Avanzar (Newer Post) o Retroceder (Older Post); en otros servicios, tambin existe la posibilidad de crear esa paginacin de tal manera que no slo podemos avanzar o retroceder sino "dividir" nuestro blog de tal manera de poder "saltearnos" cosas y navegar ms rpido:

En Blogger Accesories han creado un script que nos permite hacer esto con algunas limitaciones pero, funciona bien y, como parte del truco se basa en propiedades CSS, nos da la posibilidad de personalizarlo de muchas maneras.

Para empezar, vamos a la plantilla y sin expandir lo artilugios, buscamos lo siguiente: Justo debajo, agregamos el script que pueden descargar de este archivo de texto o copiarlo del blog original. Este es su contenido: //=(thisNum-displayPageNum-1) && p=(thisNum-displayPageNum-1) && p1) { if(!isLablePage) { html = ''+upPageHtml+' '+html +' '; } } html = ''+html; // html = ' Total '+(postNum1)+': '+html; if(thisNum

En el cdigo, hay una serie de valores que podemos modificar: La cantidad de posts que se mostrarn por pgina (por defecto una sola): var pageCount = n; La cantidad de pginas listadas (por defecto dos) var displayPageNum=n; Los textos a mostrar: var upPageWord ='Back'; // pgina anterior var downPageWord ='Next'; // pgina siguiente Para que todo estuviera terminado slo nos faltara agregar el estilo. Eso lo ponemos entre etiquetas o bien antes de . Este son las propiedades originales definidas por Blogger Acccesories: dijo: .showpageArea { background: transparent url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) norepeat left top; color:#003366; font-size: 11px; padding: 10px 15px 10px 30px; text-align: left; width: 470px; } .showpageArea a {

color: #0F0; text-decoration: underline; } .showpageNum a { border: 1px solid #FFF; color:#0F0; margin: 0 10px; padding: 0 5px 0 8px; text-decoration:none; } .showpageNum a:hover { color: #FE8314; background-color: #FFF; border: 1px solid #0071A5; } .showpagePoint { color: #FE8314; margin: 0 8px 0 4px; } .showpage a { color: #FFF;