Según nos muestran en el siguiente video, el 2010 fue un buen año para Blogger por lo que el 2011 quieren que sea mejor.
Qué opináis de este movimiento de Google, yo estoy entusiasmado por probar la nueva interfaz.
Mostrando entradas con la etiqueta Blogs. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blogs. Mostrar todas las entradas
lunes, 14 de marzo de 2011
Blogger pretende renovar su imagen
El blog oficial de Google nos deja ver en unas capturas el próximo cambio de imagen que pretenden realizar en el 2011.
Según nos muestran en el siguiente video, el 2010 fue un buen año para Blogger por lo que el 2011 quieren que sea mejor.
Qué opináis de este movimiento de Google, yo estoy entusiasmado por probar la nueva interfaz.
Según nos muestran en el siguiente video, el 2010 fue un buen año para Blogger por lo que el 2011 quieren que sea mejor.
Qué opináis de este movimiento de Google, yo estoy entusiasmado por probar la nueva interfaz.
compartir:
miércoles, 24 de diciembre de 2008
Script efecto nevada para Blogger
Con motivo de las fiestas navideñas, la gran mayoría de la gente, incluido yo, visten sus hogares con adornos de estas fiestas, unos ponen el arbolito con sus bolas y luces otros arman el nacimiento de Jesús con diferentes muñequitos y figuras y otros hacen las dos cosas.
Pero es obvio, que en este caso los que poseemos un blog o una web, al igual que nuestra casa, también forma parte de nosotros, así pues, que mejor manera de darle un toque pare estas fiestas que poniendo una simpática nevada.
Con este sencillo script cargado de un servidor externo, haremos que en nuestro blog comiencen a caer copos de nieve de color blanco de distintos tamaños de manera aleatoria y en todas direcciones.
Así que para quien le guste aquí va.
Simplemente debemos dirigirnos a la pestaña Diseño en la sección Edicion de HTML y pegar las siguientes lineas después de la etiqueta <body>:
Ojo que si no os funciona es posible que se deba a que el archivo del script en cuestión haya sido eliminado del servidor por lo que tendréis que recurrir obligatoriamente a descargarlo en el enlace de abajo y alojarlo en algún servidor gratuito comoYahoo! Geocities*.
Por otra parte, e indagando mas en este script, que podéis descargaroslo en este enlace y abrirlo con cualquier editor de texto, encontrareis al principio una sección de código configurable que corresponde a 3 variables, num, timer y enableinNS6, estas van a determinar en orden de aparición, el numero de copos que se mostraran por pantalla, el tiempo que diferirá en aparecer un copo y el siguiente y por ultimo la compatibilidad con los navegadores Mozilla y Netscape 6.
Ya veis que pueden experimentar un rato con dichos datos modificando la cantidad de copos o la velocidad de los mismos, sin embargo el tercer parámetro es recomendable dejarlo como esta.
Eso si para que vuestros cambios surjan efecto debéis guardarlo y subirlo algún servidor, de tal manera que en las lineas de código anteriormente expuestas, donde esta la ruta del enlace del script original deberéis sustituirlo por el vuestro.
Espero que lo disfrutéis, Feliz Navidad a todos¡¡
#Actualización: Encontré un nuevo servidor donde está alojado el archivo: http://www.dynamicdrive.com/dynamicindex3/snow.js
Pero es obvio, que en este caso los que poseemos un blog o una web, al igual que nuestra casa, también forma parte de nosotros, así pues, que mejor manera de darle un toque pare estas fiestas que poniendo una simpática nevada.
Con este sencillo script cargado de un servidor externo, haremos que en nuestro blog comiencen a caer copos de nieve de color blanco de distintos tamaños de manera aleatoria y en todas direcciones.
Así que para quien le guste aquí va.
Simplemente debemos dirigirnos a la pestaña Diseño en la sección Edicion de HTML y pegar las siguientes lineas después de la etiqueta <body>:
<script type="text/javascript"También si lo preferiis podéis añadir un nuevo elemento de tipo HTML/JavaScript y pegarlo allí sin ningún problema, viendo los resultados tras guardar los cambios.
src="http://inacho07.googlepages.com/snow.js"> </script>
Ojo que si no os funciona es posible que se deba a que el archivo del script en cuestión haya sido eliminado del servidor por lo que tendréis que recurrir obligatoriamente a descargarlo en el enlace de abajo y alojarlo en algún servidor gratuito como
Por otra parte, e indagando mas en este script, que podéis descargaroslo en este enlace y abrirlo con cualquier editor de texto, encontrareis al principio una sección de código configurable que corresponde a 3 variables, num, timer y enableinNS6, estas van a determinar en orden de aparición, el numero de copos que se mostraran por pantalla, el tiempo que diferirá en aparecer un copo y el siguiente y por ultimo la compatibilidad con los navegadores Mozilla y Netscape 6.
Ya veis que pueden experimentar un rato con dichos datos modificando la cantidad de copos o la velocidad de los mismos, sin embargo el tercer parámetro es recomendable dejarlo como esta.
Eso si para que vuestros cambios surjan efecto debéis guardarlo y subirlo algún servidor, de tal manera que en las lineas de código anteriormente expuestas, donde esta la ruta del enlace del script original deberéis sustituirlo por el vuestro.
Espero que lo disfrutéis, Feliz Navidad a todos¡¡
#Actualización: Encontré un nuevo servidor donde está alojado el archivo: http://www.dynamicdrive.com/dynamicindex3/snow.js
compartir:
lunes, 24 de noviembre de 2008
Animación al abrir la ventana de un enlace
Navegando por la red me encontré un curioso script que al hacer clic en un determinado enlace se nos abre en una ventana de manera animada, podéis ver el ejemplo en el siguiente link.
Bueno no es gran cosa, pero como me resulto simpático lo comparto con vosotros. La forma de implementarlo es muy sencilla, pero antes haced una copia de seguridad de vuestra plantilla, como siempre digo nunca se sabe lo que puede pasar.
Nos dirigimos al panel de control del blog, en la pestaña Diseño en Edición de HTML, apretamos la combinación Ctrl + F y buscamos la etiqueta <body>, después de esta añadimos el siguiente código:
Bueno no es gran cosa, pero como me resulto simpático lo comparto con vosotros. La forma de implementarlo es muy sencilla, pero antes haced una copia de seguridad de vuestra plantilla, como siempre digo nunca se sabe lo que puede pasar.
Nos dirigimos al panel de control del blog, en la pestaña Diseño en Edición de HTML, apretamos la combinación Ctrl + F y buscamos la etiqueta <body>, después de esta añadimos el siguiente código:
<script>Luego para configurar los enlaces simplemente debéis hacerlo de la siguiente manera:
<!--
var winheight=100
var winsize=100
var x=5
function openwindow(thelocation){
temploc=thelocation
if (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById)){
window.open(thelocation)
return
}
win2=window.open("","","scrollbars")
win2.moveTo(0,0)
win2.resizeTo(100,100)
go2()
}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=temploc
winheight=100
winsize=100
x=5
return
}
setTimeout("go2()",50)
}
//-->
</script>
<a href="javascript:openwindow('URL DEL ENLACE')">TITULO DEL ENLACE</a>Y sin mas tenéis un simpático efecto para vuestros enlaces, espero que les haya gustado.
compartir:
lunes, 10 de noviembre de 2008
60 paquetes de graficos vectoriales
Vía Digg me he encontrado con una entrada genial en el blog Vectortuts en donde recopilan 60 paquetes de gráficos vectoriales con distintas temáticas, todos están geniales así que aquellos diseñadores aquí tenéis suficiente material y encima gratuito para elaborar vuestros proyectos y como no para esos blogueros que quieran darle un nuevo look a su blog aquí podréis encontrar recursos para llevar a cabo muy buenas ideas.
compartir:
miércoles, 5 de noviembre de 2008
Menús deplegables estilo Google Chrome
Un sencillo script que genera unos bonitos menús con el estilo del famoso navegador Google Chrome, en donde podrás configurarlo para añadir distintas secciones con sus respectivos sub-menus.
Pero antes de meternos en el lio, haced una copia de seguridad de la plantilla, nunca se sabe lo que puede pasar.
Lo primero que deberéis hacer es descargaros el siguiente archivo (chromemenu.zip) que necesitareis durante todo el proceso.
En este zip encontraremos, chrome.js, chromestyleX.css, chromebg-overX.gif, chromebgX.gif, mientras que de los tres últimos encontraremos para cuatro estilos diferentes los cuales los podéis ver aquí (DynamicDrive), y en donde esta explicado en inglés como configurar el script.
Seguiremos por aquí paso a paso; tendréis que subir los archivos anteriores a algún servidor para poder usarlos en el blog, posteriormente deberéis incluirlos en la plantilla después de la etiqueta <head>:
En primer lugar, entre las etiquetas <ul> y </ul> se encuentran declaradas las secciones en las que dos de ellas son sub-menús (dropmenu1 y dropmenu2), si deseáis añadir mas secciones tanto de un tipo como de otra deberéis duplicar las que correspondan entre esas etiquetas.
En segundo lugar se encuentra definido los sub-menús, obviamente la otra sección no es necesaria dado que no es de este tipo sino que es un sección con enlace directo. Podéis ver el ejemplo en el enlace anterior para que os hagáis una idea a lo que me refiero.
Los sub-menús están estructurados de la siguiente forma, son etiquetas <div> con sus respectivos id (identificadores), que ya los vimos antes declarados en la primer parte, y el resto son simplemente enlaces. Con esto imagino que os sera sencillo identificar donde debéis poner la url de vuestra sección y su titulo respectivo. Lo único que si quieres añadir o reducir el numero de sub-secciones, solo debéis cambiar el numero de enlaces según que fin.
Una ultima cosa a destacar es que a partir del segundo sub-menú incluido este, deberéis agregar la propiedad style="width: 150px;" en el estilo que regulara el ancho del mismo, para así no crear solapamientos en las distintas secciones. Podéis verlo en el código en el segundo sub-menú como esta implementado.
Y si queréis añadir mas de una barrita de estas, para ello, fijaros que al final encontrareis una función en JavaScript llamada cssdropdown.startchrome(), bien pues lo único que hay que hacer para añadir mas barritas es duplicar las variables para cada una de las barras con un numero distinto, algo como lo siguiente:
Bueno espero que les guste y os sea de utilidad, para cualquier duda comentarla que os ayudaremos encantados.
Pero antes de meternos en el lio, haced una copia de seguridad de la plantilla, nunca se sabe lo que puede pasar.
Lo primero que deberéis hacer es descargaros el siguiente archivo (chromemenu.zip) que necesitareis durante todo el proceso.
En este zip encontraremos, chrome.js, chromestyleX.css, chromebg-overX.gif, chromebgX.gif, mientras que de los tres últimos encontraremos para cuatro estilos diferentes los cuales los podéis ver aquí (DynamicDrive), y en donde esta explicado en inglés como configurar el script.
Seguiremos por aquí paso a paso; tendréis que subir los archivos anteriores a algún servidor para poder usarlos en el blog, posteriormente deberéis incluirlos en la plantilla después de la etiqueta <head>:
<link rel="stylesheet" type="text/css" href="DIRECCION DEL ARCHIVO chromestyleX.css" />Ya con el script cargado junto con la hoja de estilos (css), la forma de implementarlo en el blog es mediante el siguiente código:
<script type="text/javascript" src="DIRECCION DEL ARCHIVO chrome.js"></script>
<div class="chromestyle" id="chromemenu">Ahora nos dedicaremos a analizar el código anterior por si vosotros queréis darle una organización diferente y obviamente para que cambiéis las direcciones que os interesen.
<ul>
<li><a href="http://mundilima.blogspot.com">Inicio</a></li>
<li><a href="#" rel="dropmenu1">Categorias</a></li>
<li><a href="#" rel="dropmenu2">Noticias</a></li>
</ul>
</div>
<!--1º menú desplegable -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://mundilima.blogspot.com/search/label/Juegos%20Flash?max-results=8">Juegos</a>
<a href="http://mundilima.blogspot.com/search/label/WTF?max-results=8">WTF!</a>
<a href="http://mundilima.blogspot.com/search/label/Wallpapers?max-results=8">Wallpapers</a>
</div>
<!--2º menú desplegable -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://mundilima.blogspot.com/search/label/Curiosidades?max-results=8">Curiosidades</a>
<a href="http://mundilima.blogspot.com/search/label/HTML?max-results=8">HTML</a>
<a href="http://mundilima.blogspot.com/search/label/Humor?max-results=8">Humor</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
En primer lugar, entre las etiquetas <ul> y </ul> se encuentran declaradas las secciones en las que dos de ellas son sub-menús (dropmenu1 y dropmenu2), si deseáis añadir mas secciones tanto de un tipo como de otra deberéis duplicar las que correspondan entre esas etiquetas.
En segundo lugar se encuentra definido los sub-menús, obviamente la otra sección no es necesaria dado que no es de este tipo sino que es un sección con enlace directo. Podéis ver el ejemplo en el enlace anterior para que os hagáis una idea a lo que me refiero.
Los sub-menús están estructurados de la siguiente forma, son etiquetas <div> con sus respectivos id (identificadores), que ya los vimos antes declarados en la primer parte, y el resto son simplemente enlaces. Con esto imagino que os sera sencillo identificar donde debéis poner la url de vuestra sección y su titulo respectivo. Lo único que si quieres añadir o reducir el numero de sub-secciones, solo debéis cambiar el numero de enlaces según que fin.
Una ultima cosa a destacar es que a partir del segundo sub-menú incluido este, deberéis agregar la propiedad style="width: 150px;" en el estilo que regulara el ancho del mismo, para así no crear solapamientos en las distintas secciones. Podéis verlo en el código en el segundo sub-menú como esta implementado.
Y si queréis añadir mas de una barrita de estas, para ello, fijaros que al final encontrareis una función en JavaScript llamada cssdropdown.startchrome(), bien pues lo único que hay que hacer para añadir mas barritas es duplicar las variables para cada una de las barras con un numero distinto, algo como lo siguiente:
<script type="text/javascript">Para terminar deciros que las barras pueden estar justificadas a la izquierda, al centro o a la derecha, solamente hay que configurarlo abriendo el archivo chromestyleX.css con el editor de texto y buscar el siguiente atributo:
cssdropdown.startchrome("chromemenu", "chromemenu2")
</script>
text-align: center;Por defecto se mostrara en el centro, pero podemos asignarle diferentes valores, left para la izquierda y right para la derecha.
Bueno espero que les guste y os sea de utilidad, para cualquier duda comentarla que os ayudaremos encantados.
compartir:
miércoles, 29 de octubre de 2008
Mostrar una cabecera distinta aleatoriamente
Hoy, os voy a enseñar un script que yo uso para mostrar las animaciones de los marcianitos aleatoriamente, pero esta vez lo veremos aplicado a la cabecera del blog para que esta cambie cada vez que se cargue la pagina nuevamente.
Lo primero es hacer una copia de seguridad de la plantilla, nunca se sabe lo que puede llegar a pasar.
Todos conocemos o por lo menos intuimos que debe haber una zona en la sección de estilos CSS, en la que este declarada la cabecera del blog. Esta se le denomina #header o también podemos encontrarla como #cabecera o #header-wrapper. Pues bien, estas declaraciones serian mas o menos así:
Para aumentar el numero de imágenes aleatorias a mostrar, solo deberéis duplicar enteramente la linea banner[X]="URL DE LA IMAGEN" en donde X sera el valor posterior al ultimo que tenéis agregado en el script, para el ejemplo anterior seria banner[4]="URL DE LA IMAGEN", y si aumentáis la lista también deberéis aumentar la variable de la ecuación de aleatoriedad: var random=Math.round(X*Math.random());, que aplicado al ejemplo anterior sería var random=Math.round(4*Math.random());.
Y para reducir imágenes igual, pero en orden inverso, es decir, quitar tantos banner[X] como queráis y reducir la variable tanto como "banner's" hayais quitado.
Espero haberlo hecho lo mas entendible posible, si tenéis alguna duda comentadlo que para eso estamos, para ayudar ;).
Lo primero es hacer una copia de seguridad de la plantilla, nunca se sabe lo que puede llegar a pasar.
Todos conocemos o por lo menos intuimos que debe haber una zona en la sección de estilos CSS, en la que este declarada la cabecera del blog. Esta se le denomina #header o también podemos encontrarla como #cabecera o #header-wrapper. Pues bien, estas declaraciones serian mas o menos así:
#header {
background:#476 url("URL DE LA IMAGEN") no-repeat left top;
margin:0 0 0;
color:#fff;
position: relative;
padding: 30px 0px 0px 40px;
height: 60px;
}Pues el script es muy sencillo, su única función es reemplazar la URL DE LA IMAGEN por aquellas que nosotros elijamos:El script anterior deberéis situarlo después de la etiqueta <body>, o antes de </body>.Para aumentar el numero de imágenes aleatorias a mostrar, solo deberéis duplicar enteramente la linea banner[X]="URL DE LA IMAGEN" en donde X sera el valor posterior al ultimo que tenéis agregado en el script, para el ejemplo anterior seria banner[4]="URL DE LA IMAGEN", y si aumentáis la lista también deberéis aumentar la variable de la ecuación de aleatoriedad: var random=Math.round(X*Math.random());, que aplicado al ejemplo anterior sería var random=Math.round(4*Math.random());.
Y para reducir imágenes igual, pero en orden inverso, es decir, quitar tantos banner[X] como queráis y reducir la variable tanto como "banner's" hayais quitado.
Espero haberlo hecho lo mas entendible posible, si tenéis alguna duda comentadlo que para eso estamos, para ayudar ;).
compartir:
martes, 28 de octubre de 2008
Sube archivos masivamente con FireUploader
Si estas cansado de subir imágenes a Blogger de 5 en 5, o por otra parte no puedes esperar a que se suban tus vídeos en YouTube, he encontrado una herramienta extremadamente útil que facilitará mucho esta labor.
Posiblemente muchos de vosotros ya la conozcáis, pero yo como buen novato la descubrí cuando hice el post sobre publicidad creativa. En un primer momento subí las fotos de ese post mediante el formulario de blogger, que usa los servicios de Picasa, pero después de que nos copiaran el post resubimos otra vez las imágenes con una pequeña marca de agua. Como no iba a pegarme otra vez el queme de subir 398 imágenes de 5 en 5 (sí, fui un poco masoquista no la cojáis conmigo :( ), me puse a indagar métodos para subir fotos masivamente a Picasa, y encontré esto, FireUploader.
Este pequeña aplicación no es mas que una extensión para el excelente navegador Firefox, el cual con una interfaz muy intuitiva nos permite seleccionar las carpetas en donde se encuentran los archivos que deseamos subir y hacerlo masivamente, o como prefiráis. También nos permite gestionar de manera local todos nuestros archivos alojados en los distintos servicios que soporte el programa. Estos son Box.net, Flickr, Picasa, YouTube, Facebook, Webshots, Omnidrive, Smugmug, SMEStorage, Snaphappi, Google Docs y SlideShare.
Es una pequeña herramienta muy potente que en alguna ocasión nos ahorrara algún que otro quebradero de cabeza (como cuando necesites subir 398 fotos....ejem ¬¬), bueno espero que os sea de utilidad tanto como a mi.
Descargar: Complementos Mozilla
Mas info: FireUploader | Difunde Firefox
Posiblemente muchos de vosotros ya la conozcáis, pero yo como buen novato la descubrí cuando hice el post sobre publicidad creativa. En un primer momento subí las fotos de ese post mediante el formulario de blogger, que usa los servicios de Picasa, pero después de que nos copiaran el post resubimos otra vez las imágenes con una pequeña marca de agua. Como no iba a pegarme otra vez el queme de subir 398 imágenes de 5 en 5 (sí, fui un poco masoquista no la cojáis conmigo :( ), me puse a indagar métodos para subir fotos masivamente a Picasa, y encontré esto, FireUploader.
Es una pequeña herramienta muy potente que en alguna ocasión nos ahorrara algún que otro quebradero de cabeza (como cuando necesites subir 398 fotos....ejem ¬¬), bueno espero que os sea de utilidad tanto como a mi.
Descargar: Complementos Mozilla
Mas info: FireUploader | Difunde Firefox
compartir:
lunes, 13 de octubre de 2008
Visor de códigos en Blogger con SyntaxHighlighter
Me he dado cuenta de que a la hora de publicar algún post que contenga código HTML, CSS o JavaScript, resulta muy difícil de interpretar al estar entrecomillado.
Me he propuesto cambiar este estilo y dejarlo en algo mas decente y mas realista, algo que destaque las etiquetas y las propiedades como si de un editor se tratase. Pues después de bastante tiempo buscando he encontrado el siguiente script llamado SyntaxHighlighter, he conseguido implementarlo y los resultado son mas que satisfactorios. Aun así me gustaría conocer vuestra opinión sobre cual método os parece mejor si este o el anterior. Creo que no habrá duda.
Por otra parte quería compartir mi experiencia con este script por lo que a continuación explico las características que tiene y como podéis usarlo en vuestros blogs.
Las librerías SyntaxHighlighter soporta los siguientes lenguajes de programación resaltandolos como si de un editor se tratase:
Lo primero que debéis hacer es bajaros el paquete con todos los archivos que se necesitan, lo podréis hacer desde la pagina oficial, o desde este enlace directo. Lo siguiente sera alojar los archivos esenciales en algún servidor que serian SyntaxHighlighter.css, shCore.js y clipboard.swf. Los demás archivos son los llamados "brushes" y sirven para preformatear los distintos lenguajes soportados. Solo son necesarios los que vayáis a usar, en mi caso solo he implementado shBrushCss.js para el código CSS, shBrushJava.js y shBrushJScript.js para el código Java y JavaScript respectivamente y shBrushXml.js para el HTML. Los demás, por ejemplo como, shBrushCpp.js se usa para C++, shBrushDelphi.js para Delphy, shBrushPhp.js para PHP, shBrushPython.js para Ruby, shBrushSql.js para SQL, shBrushVb.js para VisualBasic y por ultimo shBrushCSharp.js para C#. Te recuerdo que en la anterior lista podréis ver todos los lenguajes y su abreviatura para utilizarlos en el blog.
Una vez alojados los archivos nos dirigimos al panel de control de nuestro blog y en la pestaña Diseño nos vamos a la sección Edición de HTML, y sin necesidad de expandir los artilugios nos situamos después de la etiqueta <head>, no es necesario que sea inmediatamente después sino entre estas etiquetas. Recomiendo que sea al principio o al final. Y ahí, pegamos lo siguiente:
Haced una copia de seguridad antes de realizar ningún cambio, nunca se sabe lo que puede pasar.
Me he propuesto cambiar este estilo y dejarlo en algo mas decente y mas realista, algo que destaque las etiquetas y las propiedades como si de un editor se tratase. Pues después de bastante tiempo buscando he encontrado el siguiente script llamado SyntaxHighlighter, he conseguido implementarlo y los resultado son mas que satisfactorios. Aun así me gustaría conocer vuestra opinión sobre cual método os parece mejor si este o el anterior. Creo que no habrá duda.
Por otra parte quería compartir mi experiencia con este script por lo que a continuación explico las características que tiene y como podéis usarlo en vuestros blogs.
Las librerías SyntaxHighlighter soporta los siguientes lenguajes de programación resaltandolos como si de un editor se tratase:
- C++: cpp, c, c++
- C#: c#, c-sharp, csharp
- CSS: css
- Delphi: delphi, pascal
- Java: java
- JavaScript: js, jscript, javascript
- PHP: php
- Python: py, python
- Ruby: rb, ruby, rails, ror
- SQL: sql
- VB: vb, vb.net
- XML/HTML: xml, html, xhtml, xslt
Lo primero que debéis hacer es bajaros el paquete con todos los archivos que se necesitan, lo podréis hacer desde la pagina oficial, o desde este enlace directo. Lo siguiente sera alojar los archivos esenciales en algún servidor que serian SyntaxHighlighter.css, shCore.js y clipboard.swf. Los demás archivos son los llamados "brushes" y sirven para preformatear los distintos lenguajes soportados. Solo son necesarios los que vayáis a usar, en mi caso solo he implementado shBrushCss.js para el código CSS, shBrushJava.js y shBrushJScript.js para el código Java y JavaScript respectivamente y shBrushXml.js para el HTML. Los demás, por ejemplo como, shBrushCpp.js se usa para C++, shBrushDelphi.js para Delphy, shBrushPhp.js para PHP, shBrushPython.js para Ruby, shBrushSql.js para SQL, shBrushVb.js para VisualBasic y por ultimo shBrushCSharp.js para C#. Te recuerdo que en la anterior lista podréis ver todos los lenguajes y su abreviatura para utilizarlos en el blog.
Una vez alojados los archivos nos dirigimos al panel de control de nuestro blog y en la pestaña Diseño nos vamos a la sección Edición de HTML, y sin necesidad de expandir los artilugios nos situamos después de la etiqueta <head>, no es necesario que sea inmediatamente después sino entre estas etiquetas. Recomiendo que sea al principio o al final. Y ahí, pegamos lo siguiente:
Haced una copia de seguridad antes de realizar ningún cambio, nunca se sabe lo que puede pasar.
<link href="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO SyntaxHighlighter.css)" rel="stylesheet" type="text/css">Guardar los cambios y ya esta todo listo, lo único que nos queda es ponerlo en practica de la siguiente manera en vuestros posts.
<script src="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO shCore.js)" type="text/javascript">
<!-- carga los brushes -->
<script src="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO LOS DISTINTOS BRUSHES, REPETIR TODA LA LINEA SI SE INCLUYE MAS DE UNO)" type="text/javascript">
<script language="javascript">
window.onload = function ()
{
/* permite copiar al portapapeles*/
dp.SyntaxHighlighter.ClipboardSwf = "(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO <br />clipboard.swf)";
/* activa el modo blogger*/
dp.SyntaxHighlighter.BloggerMode();
/* activa Highlight */
dp.SyntaxHighlighter.HighlightAll('code');
}</script>
Con esto es todo, si tenéis algún problema no dudéis en comentarlo, nosotros estaremos encantados en ayudarles. A partir de ahora iremos modificando poco a poco los post antiguos para implementar este nuevo método de visualización. Aunque queremos saber que os parece el nuevo cambio.
<pre name="code" class="(AQUÍ DEBERÉIS INDICAR EL SEUDÓNIMO DEL LENGUAJE QUE IRÉIS A MOSTRAR "Ver lista anterior")">
Código a mostrar....
</pre>
compartir:
lunes, 22 de septiembre de 2008
Metatags, ¿Qué son y como usarlos?
Las etiquetas "meta" o metatags son unas lineas en formato HTML que se sitúan en la cabecera de la pagina, entre las etiquetas <head> y </head> proporcionando a los motores de búsqueda información variada sobre el sitio en cuestión.Aparentemente estas etiquetas permanecen ocultas al usuario sin embargo su labor se ejecuta en segundo plano disponiendo de aquella información relevante de la web o blog como por ejemplo del titulo del blog, el nombre del autor, la temática de la misma, una breve descripción, palabras claves que identifiquen al sitio, codificación, lenguaje, entre muchas otras. De este modo los robots que se encarga de recopilar todas las paginas de la red con su respectiva información les sera mas fácil indexar la tuya y con información relevante, traduciendoce esto directamente en un mejor posicionamiento por lo tanto en un mayor numero de visitas y de mejor calidad.
Aunque se dice que los actuales motores de búsquedas ya no hacen uso de estas etiquetas debido a su antigüedad y por que han caído en desuso, eso no es del todo cierto, es verdad que los buscadores se encargan de recopilar esa información con técnicas propias, sin embargo si un robot se encuentra con estos meta-datos los considerara de mayor prioridad, por lo que seria un error descartarlos como método de posicionamiento. Añado también que no todos los buscadores tienen algoritmos de búsqueda tan avanzados que sean capaces de diferenciar y/o clasificar paginas en base a su contenido por lo que obligatoriamente tienen que recurrir a las etiquetas "meta" para su correcta indexación.
Con todo os mostramos los distintos tipos de metatags que hay y la manera de implementarlos en su página:
Tipos de indexacion:
- all: Para indizar la página completamente (incluidos archivos).
- none: Para indizar la página pero no los archivos.
- index: La página puede ser indizada por los robots.
- noindex: No se permite la indización por parte de los robots.
- follow: Permite a los robots seguir los vínculos de una página a otras.
- nofollow: No permite a los robots seguir los vínculos de una página a otras.
Bueno si tenéis alguna duda no seáis tímidos y comentadla ;).
compartir:
viernes, 19 de septiembre de 2008
Incrustar el formulario de los comentarios en Blogger
Como podréis ver, hemos habilitado la opción que permite incrustar el formulario de comentarios al final de cada entrada del blog. Esto la verdad que ayuda mucho a la hora de acercar al lector esa interactividad tan característica de la red 2.0 y que tanto se fomenta en los blogs, haciendo mucho mas facil escribir un comentario sin necesidad de cargar el formulario en terceras paginas.
Espero que esto incite a los usuarios a comentar mas, que siempre nos gusta leer sus opiniones y abrir debate en torno a ellos.
El trasfondo de esta articulo es enseñaros como poder hacer lo mismo en vuestros blogs en sencillos pasos y con la posibilidad de modificar si se quieres este formulario.
Lo primero es lo primero, haced una copia de seguridad de vuestra plantilla antes de llevar a cabo cualquier cambio.
Posterior a esto no dirigimos a la pagina de Blogger in draft, el cual es la pagina de Blogger donde se realizan todas las pruebas antes de implementarlas oficialmente. Se accede igual que en el Blogger normal, simplemente lo que veremos es una interfaz distinta en donde los desarrolladores prueban las betas antes de hacerlas públicas.
Por tanto, vamos a la pestaña Configuración allí accedemos a la opción Comentarios y buscamos Ubicación del formulario de comentarios, donde seleccionaremos Entrada incrustada a continuación. Esto es todo lo que tenemos que hacer en "Blogger in draft", al resto del proceso es indiferente donde lo hagáis, se puede hacer en el primero o en el Blogger normal.
Por tanto, vamos a la pestaña Configuración allí accedemos a la opción Comentarios y buscamos Ubicación del formulario de comentarios, donde seleccionaremos Entrada incrustada a continuación. Esto es todo lo que tenemos que hacer en "Blogger in draft", al resto del proceso es indiferente donde lo hagáis, se puede hacer en el primero o en el Blogger normal.
Lo siguiente seria comprobar en vuestro blog, después de haber guardado los cambios, si ya se os ve el formulario en las entradas individuales. Digo esto dado que he comprobado que en algunas plantillas con hacer esto es lo único que se necesita para habilitarlo. En cambio si aun no lo veis seguiremos con lo siguiente:
Nos dirigimos a la pestaña Diseño y dentro de allí entramos en Edición de HTML. Activamos la casilla de la opción Expandir plantillas de artilugios. Con el acceso directo Ctrl + F buscaremos la siguiente linea: <b:includable id='backlinkDeleteIcon' var='backlink'>. Donde justo detrás haremos hueco para añadir el siguiente trozo:
Cuidado, que este puede estar duplicado, ya que al marcar la opción en la configuración, esta añade el código automáticamente sin embargo por diversos motivo no funciona y hay que hacerlo manualmente. Por ello cercioraros de que el código anterior o similar es decir cualquiera que se encuentre dentro de <b:includable id='comment-form' var='post'> ... y ...</b:includable> no se repita y de ser así eliminarlo completamente y usad el expuesto aquí.Por ultimo, debemos ubicarnos en la siguiente etiqueta <b:includable id='comments' var='post'> debemos buscar algo como esto:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
Y sustituirlo por lo siguiente:
Con todo ya estamos listo para guardar, y ver los resultados. Aparte queda la posibilidad de modificar ciertos parámetros del estilo de este formulario en la parte CSS de nuestra plantilla, solo basta con agregar los siguientes atributos antes de ]]></b:skin>.
Espero que les sea de utilidad para poder habilitar el cuadro de comentarios. Ya sabéis que si tenéis alguna duda o problema comentadlo y ahora con mas razón que es mucho mas fácil.
compartir:
jueves, 4 de septiembre de 2008
Script para posts aleatorios
Tal y como muestra el titulo, el siguiente script una vez implementado en vuestro blog, permitirá navegar a los usuarios de manera aleatoria solo con pulsar cualquier tipo de enlace que configuremos: Una imagen, un gif o simplemente texto.
El método a seguir es el siguiente. Lo primero es irnos a nuestro panel de control del blog e irnos a la pestaña Diseño, seguidamente nos vamos a la sección Edición de HTML. Sin necesidad de marcar la opción Expandir plantillas de artilugios, apretamos la combinación de te teclas Ctrl + F abriéndose así el cuadro de búsqueda.
Buscamos el cierre de la etiqueta <head> que sería </head> respectivamente. Una vez localizada, podemos añadir el siguiente trozo de código antes de la etiqueta.
Un enlace con texto:
El método a seguir es el siguiente. Lo primero es irnos a nuestro panel de control del blog e irnos a la pestaña Diseño, seguidamente nos vamos a la sección Edición de HTML. Sin necesidad de marcar la opción Expandir plantillas de artilugios, apretamos la combinación de te teclas Ctrl + F abriéndose así el cuadro de búsqueda.
Buscamos el cierre de la etiqueta <head> que sería </head> respectivamente. Una vez localizada, podemos añadir el siguiente trozo de código antes de la etiqueta.
<script type='text/javascript'>
//<![CDATA[
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
window.location = entry.link[0].href;
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
//]]>
</script>
Lo último que nos queda es agregar el enlace donde nosotros queramos con el siguiente código.Un enlace con texto:
<a href="#random" onclick="feelingLucky()" title="Posts Aleatorios">"Posts aleatorios"</a>O un enlace con una imagen o gif, solo tenéis que cambiar la dirección en rojo para poner la vuestra propia:
<a href="#random" onclick="feelingLucky()" title="Posts Aleatorios"><img src="http://img521.imageshack.us/img521/3936/interrogacionae7.gif"></a>Si tenéis alguna duda preguntadlo y os ayudaremos ;D.
compartir:
sábado, 30 de agosto de 2008
Menú desplegable o menú de navegación por selección
Hoy tenemos un pequeña utilidad que consiste en un menú desplegable con diferentes opciones a elegir pudiendo albergar una gran cantidad de enlaces en un espacio pequeño. Probablemente la mayoría lo use como un selector de diferentes enlaces pero también es posible usarlo para activar determinadas funciones incluidas en algún "script" o similar.
El código base es el siguiente, solamente con una opción a elegir:
De esta manera, para agregar mas opciones con sus respectivos enlaces solo debemos duplicar tantas veces como enlaces deseemos poner, toda la sentencia que engloba la etiqueta <option>.
Por ejemplo:El resultado es el siguiente:
Esto es todo lo que necesitamos para crear nuestro menú por selección, espero les sea de utilidad.
El código base es el siguiente, solamente con una opción a elegir:
De esta manera, para agregar mas opciones con sus respectivos enlaces solo debemos duplicar tantas veces como enlaces deseemos poner, toda la sentencia que engloba la etiqueta <option>.
Por ejemplo:El resultado es el siguiente:
Esto es todo lo que necesitamos para crear nuestro menú por selección, espero les sea de utilidad.
compartir:
viernes, 22 de agosto de 2008
¿Qué es una licencia Creative Commons?
Según la definición de la Wikipedia:Creative Commons es una organización no gubernamental sin ánimo de lucro que desarrolla planes para ayudar a reducir las barreras legales de la creatividad, por medio de nueva legislación y nuevas tecnologías. Fue fundada por Lawrence Lessig, profesor de derecho en la Universidad de Stanford y especialista en ciberderecho, quien la presidió hasta marzo de 2008.
Como bien dice, es una organización que se dedica a distribuir este tipo de licencias intentando de alguna manera salvaguardar los derechos de autoría de aquellos autores creadores de diversos formatos de información. Inspiradas en cierto modo en las licencias GPL (General Public License) sin tener nada que ver con el licenciamiento de software. Sino que el modelo empleado es muy similar dado que lo que se pretende es la distribución y el uso de diversos contenidos para el dominio público.
Esta cuestión viene a solucionar un problema que se arrastra desde la invención de la WWW (World Wide Web), y es que en ese mundo donde es el contenedor de toda la información que puedas imaginar, tiene un inconveniente, y es que están insuficientemente protegidas los derechos de autor.
Aquí es donde entra Lawrence Lessig, presidente de Creative Commons destacando una serie de principios de los cuales destacamos algunos como, el fomento de la colaboración, la participación en equipo y la libre distribución, siembre bajo propia y libre decisión. Salvaguardando así el esfuerzo de los creadores y a su vez su trabajo bajo algunos derechos que al fin y al cabo son de dominio público, siempre y cuando cumpla los atributos de la licencia adquirida.
Estas licencias están dirigidas a obras educativas, películas, literatura, música, fotografía, diseños webs, documentos de diversa índole y otras clases de trabajos creativos atribuyéndoles una serie de derechos empezando por el autor de los mismos:
Reconocimiento (Attribution): El material creado por un artista puede ser distribuido, copiado y exhibido por terceras personas si se muestra en los créditos.
No Comercial (Non commercial): El material original y los trabajos derivados pueden ser distribuidos, copiados y exhibidos mientras su uso no sea comercial.
Sin Obra Derivada (No Derivate Works): El material creado por un artista puede ser distribuido, copiado y exhibido pero no se puede utilizar para crear un trabajo derivado del original.
Compartir Igual (Share alike): El material creado por un artista puede ser modificado y distribuido pero bajo la misma licencia que el material original.Con estas cuatro licencias se pueden combinar hasta formar un total de 6 licencias reconocidas por la organización las cuales las podemos ver detalladamente en su página oficial. A su vez también podemos adquirirlas y añadirlas en nuestro sitio, donde se encuentre la obra a licenciar. Lo bueno de estas licencias es que a partir de ese momento la distribución de la obra queda condicionada a las reglas impuestas por la licencia que se adquirió de manera que aquel que desee usar su trabajo en beneficio propio deberá cumplir con los requisitos impuestos por la misma.
En conclusión, entramos en un juego por así decirlo en el que las cosas se comparten libremente o se elaboran de manera colaborativa, generando una comunidad basada en el librepensamiento que a su vez es consciente de la autoría de las obras con su respectivo reconocimiento, fomentando así el respeto entre creadores y consumidores.
Enlace: Creative Commons España
compartir:
miércoles, 13 de agosto de 2008
Cambiar el número de entradas a mostrar en las etiquetas
Es sabido que para cambiar el número de entradas que deseas visualizar en la página principal del blog debemos ir a la pestaña Diseño y en la sección Elementos de la página picamos en Editar del elemento Entradas del blog. Posterior a esto se nos abre una ventana donde podemos configurar distintas opciones de los artículos y de la página principal.
Pero por otro lado, si deseamos cambiar el número de artículos que aparecen al acceder a una etiqueta o categoría no tenemos un método sencillo como el anterior sino que hay que hacer uso del HTML, pero no es nada complicado. Para ello, dentro de la misma pestaña, Diseño, nos vamos a la sección Edición de HTML y marcamos la opción Expandir plantillas de artilugios. Abrimos el buscador de palabras con el acceso directo Ctrl-F y buscamos lo siguiente: <div id='sidebar-wrapper2'>. Una vez situados debemos buscar el siguiente trozo y añadirle la expresión que se expone a continuación:Por defecto el número de entradas que se muestran en cada categoría es de 20, de modo que con esta variable podemos reducirlas al número que deseemos. Solo debéis añadir lo que está resaltado en rojo y sustituir la X por el número de entradas que queráis mostrar, lo demás es solo para ejemplificar donde está situado y donde debéis añadirlo.
Si tenéis alguna duda comentadlo para ponerle solución ;D.
Si tenéis alguna duda comentadlo para ponerle solución ;D.
compartir:
viernes, 8 de agosto de 2008
Ocultar caja de texto "Mostrar entradas con la etiqueta..."
Muchos de los que tenéis un blog habréis notado que cuando entráis en alguna etiqueta, al comienzo de los post os aparece un cuadro de texto con el siguiente mensaje:
Hay plantillas que ya vienen configuradas para que tal mensaje no aparezca, en cambio en otras es necesario implementar el siguiente estilo para ocultarlo. Para ello buscar este trozo de codigo, ]]></b:skin> y justo antes añadimos esto:De tal manera que cada vez que alguien acceda a cualquier categoría el mensaje de estado ya no estará visible.
Hay plantillas que ya vienen configuradas para que tal mensaje no aparezca, en cambio en otras es necesario implementar el siguiente estilo para ocultarlo. Para ello buscar este trozo de codigo, ]]></b:skin> y justo antes añadimos esto:De tal manera que cada vez que alguien acceda a cualquier categoría el mensaje de estado ya no estará visible.
compartir:
jueves, 7 de agosto de 2008
5 cosas que hago cuando no se qué escribir
- Lo primero que hago cuando estoy falto de inspiración o he gastado todas mis fuentes de información es ver lo que se cuece en la red, para ello acudo a las principales redes sociales o los sistemas de microblogging buscando nuevas fuentes de información en sitios extranjeros.
- Si después de haber buscado con las herramientas anteriores no encuentro nada relevante lo próximo que suelo hacer es mantener una conversación con las personas que tengo alrededor, familia y pareja, seguido de amigos y demás.
De esta manera puedes elaborar un buen tema del que puedas hablar en tu próximo post valiéndote de los distintos intereses que suelen tener las distintas personas con las que hayas charlado. - Si aun sigues sin material que moldear para poder publicar en tu blog, otra alternativa que suelo usar cando las dos anteriores no me valen es la de leer algo. Especialmente algún libro o en cambio alguna revista temática informativa (MuyInteresante, National Geographic, PC Actual…).
- También algo que inspira muchas ideas es escuchar música, dibujar o jugar a algo, siendo estos mis hobbies favoritos, hacen que me relaje y tenga más capacidad de pensar y desarrollar alguna idea.
- Por último si todo lo anterior no me funciona, acabo optando por salir a la calle a dar un paseo e intentar desconectar de todo aquello que me bloquee. Sin duda los paseos por la playa o por el campo al aire libre son de lo mejor que hay para la despejar la mente, y a mí me dan resultado ya que cuando regreso a casa tengo unas cuantas ideas para emplear.
- a.Redes Sociales
- b.Sistemas de microblogging
La conclusión que siempre saco es que realmente la idea no la debemos buscar sino todo lo contrario de alguna manera y dicho metafóricamente, ella nos tiene que llegar a nosotros.
Espero que esto os resulte de tanta utilidad como a mí para esos momentos de poca inspiración en la que nos quedamos en blanco a la hora de crear nuestro articulo diario.
compartir:
martes, 5 de agosto de 2008
SkyDrive un servidor de alojamiento gratuito hasta 5GB
Desde Vagabundia de la mano de Jmiur, nos trae un servidor alternativo para alojar nuestros scripts u otros archivos que usemos en nuestra web o blog. Se trata de un servicio de Microsoft, precisamente de Live SkyDrive, donde disponemos de 5 GB de capacidad para albergar nuestros archivos. Sin duda ya es una clara mejora al servicio tan extendido que es Google Pages el cual nos obliga a buscarle un sustito por el motivo que anunciaron hace unos días resaltando que no aceptarán nuevos registros para nuevos usuarios, de modo que a finales del año aquellos usuarios que ya tuvieran una cuenta en Google Pages, esta será migrada automáticamente a Google Sites. Para colmo este último servicio no es compatible con archivos ".js", el cual era el motivo principal por el que usaba Google Pages.
Aquí es donde Live SkyDrive juega su papel ofreciéndonos su alojamiento de archivos, para poder disfrutar de este servicio, simplemente con una cuenta Hotmail es suficiente para acceder. Si no disponéis de ninguna podéis crearos vuestro propio ID que puede ser usado para los servicios de Windows Live tales como Hotmail, Messenger, Spaces o SkyDrive en cuestión.
http://XXXX.bay.livefilestore.com/XXXXXXX/showrecentposts2.js?download
El ultimo trozo de la dirección (?download) tiene que ser eliminado si no, no funcionará. Con todo no necesitamos más para usar este servidor , espero que les sea de utilidad.
Fuente: Vagabundia
compartir:
miércoles, 23 de julio de 2008
Mostrar u ocultar etiquetas "div", onLoad
Una opción que me ha resultado útil después de averiguar su funcionamiento es la manera de mostrar algún contenido que se encuentre entre etiquetas <div> al terminar de cargarse la pagina o por contra, hacer que cuando termine de cargarse la pagina se oculte algo, como un "preload" (precarga).
La implementación es muy sencilla, lo primero es tener el contenido en cuestión entre las etiquetas de tal manera que:Lo siguiente es crear un estilo para este divisor en el que el atributo "display" va a marcar el estado de visualización al empezar a cargarse la página:Según lo que prefiramos elegimos un valor u otro. Lo último a agregar es la función que hará el cambio del valor "display" al terminar de cargarse la página.Con esto, es todo lo que necesitáis para mostrar u ocultar cualquier <div> que se os antoje, recordad que en el script debes dejar el valor contrario al que pusiste en el estilo, ya que si no, no veras ningún efecto.
De esta manera puedes crear divertidos efectos de precarga de una página por ejemplo con este script:Si quieres crear gifs de precarga personalizados, hace tiempo elaboramos un post con distintas herramientas online para crear gifs animados con tal efecto, echadles un vistazo que os pueden resultar interesantes.
La implementación es muy sencilla, lo primero es tener el contenido en cuestión entre las etiquetas de tal manera que:Lo siguiente es crear un estilo para este divisor en el que el atributo "display" va a marcar el estado de visualización al empezar a cargarse la página:Según lo que prefiramos elegimos un valor u otro. Lo último a agregar es la función que hará el cambio del valor "display" al terminar de cargarse la página.Con esto, es todo lo que necesitáis para mostrar u ocultar cualquier <div> que se os antoje, recordad que en el script debes dejar el valor contrario al que pusiste en el estilo, ya que si no, no veras ningún efecto.
De esta manera puedes crear divertidos efectos de precarga de una página por ejemplo con este script:Si quieres crear gifs de precarga personalizados, hace tiempo elaboramos un post con distintas herramientas online para crear gifs animados con tal efecto, echadles un vistazo que os pueden resultar interesantes.
compartir:
viernes, 11 de julio de 2008
Añadir iconos para las redes sociales en blogger
Algo muy demandado entre los nuevos bloggers es la manera de poner los iconos para las redes sociales debajo de cada post. De forma que puedan ser enviados a estos servicios para quien le interese, cosa que nos beneficia dado que nos fomenta el tráfico hacía nuestro blog dando publicidad de los artículos en estas redes sociales donde acuden diariamente miles de visitas.
Por tanto, a continuación detallaremos los pasos para colocar los susodichos iconos.
Nos vamos a la página de modificación de la plantilla. Es decir, en la pestaña Diseño a la sección Edición de HTML y activamos la opción Expandir plantillas de artilugios.
A continuación mediante el acceso directo Ctrl + F, buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-3'/>
Y lo sustituiremos por lo siguiente:
Donde cada etiqueta <li> es un icono con su respectivo enlace al formulario de la red social en cuestión.
El último paso se trata de darle estilo a las anteriores listas por lo que añadiremos unos parámetros en CSS. Para ello buscamos la siguiente línea, ]]></b:skin>, y justo antes incluimos el siguiente código:Ya hemos terminado, por ultimo decir que los anteriores parámetro pueden ser modificados a vuestro gusto para adaptarlos a vuestro blog como más os guste.
Otra cosa a decir es que en el primer código están incluidos las redes sociales más conocidas, pero si queréis añadir más, solo tenéis que duplicar toda la sentencia que hay entre <li> y </li> ambos incluidos y situarla antes del "tag" </ul>, y a su vez cambiar la dirección de la red social y la dirección del gif que lo va a representar. El ejemplo:A continuación os listo otras redes sociales con su icono respectivo por si quereis agregar alguna mas.
Debido a la gran cantidad de código espero no haberme equivocado en nada, pero por si acaso si alguna no funciona, por favor comunicádmelo para su corrección. En principio todos están probados así que no tendréis problemas ni con los enlaces ni con las imágenes. Espero que les sirva para vuestro propósito, y os recuerdo que no tenéis que incluirlas todas obligatoriamente.
Para otra cosa o cualquier duda ya sebeis donde estamos :D.
#Actualización: Agragado StumbleUpon a la lista de redes sociales.
Por tanto, a continuación detallaremos los pasos para colocar los susodichos iconos.
Nos vamos a la página de modificación de la plantilla. Es decir, en la pestaña Diseño a la sección Edición de HTML y activamos la opción Expandir plantillas de artilugios.
A continuación mediante el acceso directo Ctrl + F, buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-3'/>
Y lo sustituiremos por lo siguiente:
Donde cada etiqueta <li> es un icono con su respectivo enlace al formulario de la red social en cuestión.
El último paso se trata de darle estilo a las anteriores listas por lo que añadiremos unos parámetros en CSS. Para ello buscamos la siguiente línea, ]]></b:skin>, y justo antes incluimos el siguiente código:Ya hemos terminado, por ultimo decir que los anteriores parámetro pueden ser modificados a vuestro gusto para adaptarlos a vuestro blog como más os guste.
Otra cosa a decir es que en el primer código están incluidos las redes sociales más conocidas, pero si queréis añadir más, solo tenéis que duplicar toda la sentencia que hay entre <li> y </li> ambos incluidos y situarla antes del "tag" </ul>, y a su vez cambiar la dirección de la red social y la dirección del gif que lo va a representar. El ejemplo:A continuación os listo otras redes sociales con su icono respectivo por si quereis agregar alguna mas.
Código de Hazmereir:
<li><a expr:href='"http://www.hazmereir.net/login.php?return= /submit.php" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2108626471_c28070a4c7_t.jpg'/></a></li>
Código de Webeame:
<a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Agregar a Webeame' src='http://club.telepolis.com/S98GYVNSG/webeame.gif'/></a>
Código de Mascame:
<li><a expr:href='"http://www.mascame.com/submit.php?url=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Mascame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2301/2110794361_2c64942f60_t.jpg'/></a></li>
Código de Seoclon:
<li><a expr:href='"http://www.seoclon.com/submit?url=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Seoclon' class='rsociales-sobre' src='http://farm3.static.flickr.com/2041/2111573886_8f8b285d35_t.jpg'/></a></li>
Código de Blub:
<li><a expr:href='"http://noticias.sinmiedo.es/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blub#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2111573792_c4d2697cc9_t.jpg'/></a></li>
Código de Universo TV:
<li><a expr:href='"http://www.universotv.org/login.php?return=/submit=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Universo TV#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2222/2111573860_7244885759_t.jpg'/></a></li>
Código de Enchilame:
<li><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + &title=" + data:post.title' target='_blank'><img alt='Agregar a Enchilame#039; class='rsociales-sobre' src=' http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/enchilame.gif'/></a></li>
Código de Viajame:
<li><a expr:href='"http://www.viajame.net/login.php?return=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Viajame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2396/2111552084_95eb91769c_t.jpg'/></a></li>
Código de MisterWong:
<li><a expr:href='" http://www.mister-wong.es/index.php?action=addurl&bm_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/wong.gif'/></a></li>
Código de Wikio:
<a expr:href='"http://www.wikio.es/vote?url=" + data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Agregar a wikio' src='http://club.telepolis.com/S98GYVNSG/wikio.gif'/></a>
Código de la Claqueta:
<li><a expr:href='"http://www.claqueta.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a la Claqueta#039; class='rsociales-sobre' src='http://imagenes.claqueta.net/Gravatar_15.gif'/></a></li>
Código de Autobombo:
<li><a expr:href='"http://autobombo.es/submit.php?url=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Autobombo#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2113/2110794305_ae78e3b0ca_t.jpg'/></a></li>
Código de StumbleUpon:
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a StumbleUpon'><img alt='Agregar a StumbleUpon' class='rsociales-sobre' src='http://img396.imageshack.us/img396/1984/stumbleuponxr5.png'/></a></li>
<li><a expr:href='"http://www.hazmereir.net/login.php?return= /submit.php" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2108626471_c28070a4c7_t.jpg'/></a></li>
Código de Webeame:
<a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Agregar a Webeame' src='http://club.telepolis.com/S98GYVNSG/webeame.gif'/></a>
Código de Mascame:
<li><a expr:href='"http://www.mascame.com/submit.php?url=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Mascame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2301/2110794361_2c64942f60_t.jpg'/></a></li>
Código de Seoclon:
<li><a expr:href='"http://www.seoclon.com/submit?url=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Seoclon' class='rsociales-sobre' src='http://farm3.static.flickr.com/2041/2111573886_8f8b285d35_t.jpg'/></a></li>
Código de Blub:
<li><a expr:href='"http://noticias.sinmiedo.es/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blub#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2111573792_c4d2697cc9_t.jpg'/></a></li>
Código de Universo TV:
<li><a expr:href='"http://www.universotv.org/login.php?return=/submit=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Universo TV#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2222/2111573860_7244885759_t.jpg'/></a></li>
Código de Enchilame:
<li><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + &title=" + data:post.title' target='_blank'><img alt='Agregar a Enchilame#039; class='rsociales-sobre' src=' http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/enchilame.gif'/></a></li>
Código de Viajame:
<li><a expr:href='"http://www.viajame.net/login.php?return=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Viajame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2396/2111552084_95eb91769c_t.jpg'/></a></li>
Código de MisterWong:
<li><a expr:href='" http://www.mister-wong.es/index.php?action=addurl&bm_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/wong.gif'/></a></li>
Código de Wikio:
<a expr:href='"http://www.wikio.es/vote?url=" + data:post.url + "&title="+ data:post.title' target='_blank'><img alt='Agregar a wikio' src='http://club.telepolis.com/S98GYVNSG/wikio.gif'/></a>
Código de la Claqueta:
<li><a expr:href='"http://www.claqueta.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a la Claqueta#039; class='rsociales-sobre' src='http://imagenes.claqueta.net/Gravatar_15.gif'/></a></li>
Código de Autobombo:
<li><a expr:href='"http://autobombo.es/submit.php?url=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Autobombo#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2113/2110794305_ae78e3b0ca_t.jpg'/></a></li>
Código de StumbleUpon:
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a StumbleUpon'><img alt='Agregar a StumbleUpon' class='rsociales-sobre' src='http://img396.imageshack.us/img396/1984/stumbleuponxr5.png'/></a></li>
Desplegar/Ocultar lista
Debido a la gran cantidad de código espero no haberme equivocado en nada, pero por si acaso si alguna no funciona, por favor comunicádmelo para su corrección. En principio todos están probados así que no tendréis problemas ni con los enlaces ni con las imágenes. Espero que les sirva para vuestro propósito, y os recuerdo que no tenéis que incluirlas todas obligatoriamente.
Para otra cosa o cualquier duda ya sebeis donde estamos :D.
#Actualización: Agragado StumbleUpon a la lista de redes sociales.
compartir:
miércoles, 9 de julio de 2008
Script para mostrar los ultimos comentarios en tu blog
Hacía tiempo que quería estrenar la pestaña del blog donde albergaría los últimos comentarios, pero claro sin comentarios me iba ser imposible comprobarlo a menos que me dejara yo mismo alguna tontería, así que decidí esperar.
Pero a día de hoy ya disponemos de algunos comentarios que han ido dejando los internautas a los cuales les agradezco mucho su aportación, y animo a la gente a que lo sigua haciendo dado que eso nos ayudará a seguir mejorando este pequeño blog donde puedan encontrar aquello que andáis buscando o aquello que os pueda llegar a entretener en un momento de aburrimiento.
A lo que iba, gracias a esos comentarios he podido implementar el script para mostrarlos en la pestaña, pudiendo realizarlo de dos maneras.
La primera fue usando el mismo script que utiliza para los artículos recientes, en el enlace os dirigiréis al artículo que realizamos en su momento, solo tenéis que cambiar la dirección del feed de los artículos por la de los comentarios que sería algo parecido a esto:
Lo demás esta explicado en el artículo en cuestión.
La segunda opción y nueva, la encontré navegando por internet y parece ser muy interesante porque nos brinda el mismo resultado que el script anterior con la comodidad de que es una utilidad online, la cual con pequeñas instrucciones en ingles podemos modificar sus características. Es decir controlar el numero de comentarios a mostrar, si deseas que aparezca la fecha y la hora y muchas opciones mas.
Una vez lo tengamos a nuestro gusto, puedes darle al botón Previw Feed para mirar el resultado, (el cuadrado de fondo junto con el borde no se incluye en el script), si os convence, lo siguiente seria darle al botón Genereta JavaScript, lo que hará que se muestre un recuadro en la parte superior de la página con el código del script ya configurado a nuestro gusto.
Antes de terminar, recordar que hay una tercera manera de realizar esto la cual ya comente en el articulo al que hago referencia anteriormente y es mediante el "widget" de Blogger, pero este no se podría incluir dentro de la pestaña donde me interesa, en cambio podría establecerse en cualquier otro lugar de la plantilla.
Espero que les sea de utilidad, y si tenéis alguna duda comentadlo y la intentaremos solventar.
Enlace: Feed2JS
Pero a día de hoy ya disponemos de algunos comentarios que han ido dejando los internautas a los cuales les agradezco mucho su aportación, y animo a la gente a que lo sigua haciendo dado que eso nos ayudará a seguir mejorando este pequeño blog donde puedan encontrar aquello que andáis buscando o aquello que os pueda llegar a entretener en un momento de aburrimiento.
A lo que iba, gracias a esos comentarios he podido implementar el script para mostrarlos en la pestaña, pudiendo realizarlo de dos maneras.
La primera fue usando el mismo script que utiliza para los artículos recientes, en el enlace os dirigiréis al artículo que realizamos en su momento, solo tenéis que cambiar la dirección del feed de los artículos por la de los comentarios que sería algo parecido a esto:
Lo demás esta explicado en el artículo en cuestión.
La segunda opción y nueva, la encontré navegando por internet y parece ser muy interesante porque nos brinda el mismo resultado que el script anterior con la comodidad de que es una utilidad online, la cual con pequeñas instrucciones en ingles podemos modificar sus características. Es decir controlar el numero de comentarios a mostrar, si deseas que aparezca la fecha y la hora y muchas opciones mas.
Una vez lo tengamos a nuestro gusto, puedes darle al botón Previw Feed para mirar el resultado, (el cuadrado de fondo junto con el borde no se incluye en el script), si os convence, lo siguiente seria darle al botón Genereta JavaScript, lo que hará que se muestre un recuadro en la parte superior de la página con el código del script ya configurado a nuestro gusto.
Antes de terminar, recordar que hay una tercera manera de realizar esto la cual ya comente en el articulo al que hago referencia anteriormente y es mediante el "widget" de Blogger, pero este no se podría incluir dentro de la pestaña donde me interesa, en cambio podría establecerse en cualquier otro lugar de la plantilla.
Espero que les sea de utilidad, y si tenéis alguna duda comentadlo y la intentaremos solventar.
Enlace: Feed2JS
compartir:
