En Blogger y en cualquier web, pero vamos a ver cómo incluir uno de estos menús desplegables en este sistema de bitácoras. El menú es justamente como el que tenemos arriba en este blog. Hay cientos de script por la red. Tan sólo tienes que buscar en Google "drop down menu" y aparecerán cientos de sitios ofreciéndote su menú desplegable. Unos de pago, otros gratuitos, unos accesibles, otros no tanto, de todo.
Concretamente el que tenemos en este blog es el "Chrome CSS Drop Down Menu". Escogimos este por ser bastante bonito, accesible y fácil de modificar. Si ya te has bajado el chromemenu.zip, descomprímelo en un directorio cualquiera de tu PC y empecemos a retocarlo.
El fichero demo.htm nos servirá para ver cómo quedará el menú antes de ponerlo en nuestro blog. Lo abrimos con nuestro editor de código preferido (bloc de notas, dreamweaver, homesite, etc) y echamos un vistazo. Veremos varias etiquetas div, la primera es donde indicamos el primer nivel, es decir, las secciones que aparecerán nada más cargar el menú, sin que el usuario haga nada. Actuamente vemos Home, Resources, News y Search. Podemos cambiarlas por nuestras secciones principales, teniendo en cuenta que la primera, 'Home', no es una sección, es un link que va a la página principal de nuestra web y por lo tanto no se desplegará.
A continuación del div que contiene las secciones principales, vemos 3 divs más, uno por cada sección principal. Eso significa que si en el primer div de estos cuatro ponemos los textos que queramos, éstos aparecerán al pasar el ratón por encima de la primera sección que habremos definido en el primer div, la primera sección que hayamos definido aparte de 'Home'.
Por si no queda del todo claro, vamos a hacer un ejemplo. Supongamos que queremos hacer un menú con las siguientes secciones:
- Inicio
- Manga
-- Shojo
-- Shonen
-- Yaoi
- Anime
-- Japonés
-- Japonés (Subs en Inglés)
-- Japonés (Subs en Castellano)
-- Inglés (Subs en Castellano)
-- Castellano
- Música
-- OST Animes
-- JPop
Inicio, Comics, Anime, Música los pondríamos en en el primer div, ya que son las secciones principales. El resto de subsecciones habría que distribuirlas en los tres divs siguientes. Puedes ver el código del ejemplo completo aquí.
Una vez tienes la estructura de menú que quieres puedes intentar cambiar el archivo de tema. Por el principio del código verás algo como:
"chrometheme/chromestyle.css"
Puedes cambiarlo por "chrometheme/chromestyle2.css", "chrometheme/chromestyle3.css" o "chrometheme/chromestyle4.css" y dejar el que más te guste.
Ahora llega la hora de poner el código en tu página. Necesitarás algún lugar donde subir las imágenes y el css, es decir, necesitas un lugar donde poder subir las carpetas "chrometheme" y "chromejs". Cualquier hosting gratuito como iespana o mi@ te pueden servir.
Una vez subidos los archivos tienes que incluir el código en tu blog tal como se indica aquí.
Eso es todo.
¡Cualquier problema podéis indicarlo en los comentarios!
viernes, 21 de diciembre de 2007
Menú desplegable en Blogger
sábado, 17 de noviembre de 2007
Mas elementos widgets en tus Blogs
Hace días que la pestaña para añadir widgets en la sidebar ha desaparecido, esperaba aque "apareciera" por si sola pero al parecer ser que se ha tomado unas vacaciones, y he decidido investigar la forma de añadir un nuevo widget
Ya puesta y metida en el tema decidí añadir más widgets por si en un futuro decido añadir algo nuevo a la plantilla, así que los añadí en los lugares que por defecto deberían venir en la plantilla, es decir en
header, sidebar, main, footer.
Para hacerlo hay que situarse en Panel/Diseño/Edicción HTML y "Expandir plantillas de artilugios"
Para añadir un nuevo "widget en la sidebar" buscaremos lo siguiente:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Y lo sustituimos por:
<b:section class='sidebar' id='sidebar' maxwidgets='10' showaddelement='yes'>
*maxwidgets indica el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe y podremos añadir todos los widgets que deseemos, por el contrario si tenemos en nuestra sidebar 3 o 4 widgets y queremos aumentar el número deberemos poner un número mayor al que ya tenemos.
*showaddelement puede ser "yes" o "no", donde "yes" es la opción predeterminada pero si encontramos "no" es obvio que por eso no aparece en nuestra sidebar la opción de añadir elementos de página.
Ahora vamos a añadir un nuevo "widget en el header" buscaremos:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Y lo sustituimos por:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Le toca el turno a "main" buscaremos:
<b:section class='main' id='main' showaddelement='no'>
Lo sustituimos por:
<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>
Y por último vamos a añadir la opción de nuevos "widgets en footer" para ello buscaremos:
<b:section class='footer' id='footer'/>
En su lugar añadiremos:
<b:section class='footer' id='footer' maxwidgets='2' showaddelement='yes'>
Recordad que la cantidad de maxwidgets es la que yo he añadido como referencia, pero en realidad cada uno debe añadir la que vea oportuna de acuerdo con los widgets que tenga o piensa añadir en su blog.
viernes, 16 de noviembre de 2007
Menú despegable personalizado gracias a gema blog
Este menú despegable que traigo es muy vistoso para el blog, tiene una particularidad y es que podemos añadir nosotros mismos los botones de acuerdo a nuestros gustos o el color acorde con nuestro blog.
En El blog de Cesar he encontrado uno igual que a su vez lo hizo con Aire como referencia.
La imagen que ilustra esta entrada es solo para que veáis el diseño. En la sidebar encontraréis el menú, os invito a probar para que veáis el efecto al clicar en él.
Podemos aplicarlo en unos sencillos pasos:
Lo primero que haremos será situarnos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
Después nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos el código.
Os lo dejo tal y como lo tengo en mi sidebar omitiendo algunos enlaces para ahorraros el trabajo de eliminarlos.
Vamos a conocer un poco el código.
Color rojo: El texto que habremos añadido al botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)
Y eso es todo, si tienes dudas házmelo saber
lunes, 29 de octubre de 2007
Escucha tus posts con SONO WEBS
Instalación en Blogger
Instalación:
1. Entrar en el panel Blogger de vuestro Blog.
2. Pulsa en "Configuración"
6. Despues de la cadena: 7. Introducir el siguiente código: _____________________________________________________________________________________________ 8.Por ultimo pulsa en el botón de "Guardar Plantilla":
|
gRACIAS A SONO WEBS, VIA LOOGIC
CSS MENU MAKER (Generador de menús) para blogger
He recibido varias peticiones sobre menús horizontales, ya hablamos sobre el clásico menú horizontal y sobre el menú despegable
Esta vez es algo diferente, un generador de menús, la forma de crearlo es muy sencilla para ello accederemos a CSS MENU MAKER encontraremos a la izquierda menús horizontales y a la derecha verticales.
Escogemos el que mejor se adapte nuestro blog.
Clicamos en Customize
Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit
Llenamos los campos requeridos para el título y agregamos a la derecha la url del lugar que vamos a enlazar. Clicamos de nuevo en SubmitCSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.
Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>
Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.
Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como: background:transparent url("images/nombre-de-la-imagen.gif") .......
Gracias JmpaSrgc por el detalle, hacía tiempo que un generador no me hacia tanta ilusión.
Sacado de Gema Blogs
Menú horizontal despegable PARA BLOGGER
Antes de nada quiero aclarar que este menú no sustituye las categorías de Blogger, su finalidad es crear enlaces de forma dinámica a modo de despegable.
1º- Para añadirlo a nuestro blog debemos situarnos en Plantilla/Edicción de HTML y justo después de <head> añadir lo siguiente:
<link href='http://webjcp.googlepages.com/css.css' rel='stylesheet'/>
<!--[if IE]>
<link rel="stylesheet" href="http://webjcp.googlepages.com/hack.css" />
<script type="text/javascript">
window.mlrunShim = true;
</script>
<![endif]-->
<script src='http://webjcp.googlepages.com/js.js' type='text/javascript'>
</script>
2º- Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>
</ul>
</div>
</center>
La forma de modificarlo es muy sencilla:
Título o tema será el tema para la categoría de enlaces.
url: debemos pegar la url del lugar que deseamos enlazar.
En Link1, Link2, Link3, y Link4 irá el texto asignado al correspondiente enlace.
Este Menú es una gentileza de César que amablemente pone a disposición de todos.
Yo me he permitido variar un poco las explicaciones para adecuar los colores a nuestro gusto.
El primer código que añadimos a la plantilla contiene tres archivos, un archivo js. y dos CSS.
Uno de los archivos CSS es el que podemos configurar para cambiar el aspecto referente a color.
Lo hice de la siguiente forma:
1º- En el primer paso añadí justo antes de </head> el archivo js. que previamente subí a mi servidor.
<script src='http://forevergema.googlepages.com/menu.js.js' type='text/javascript'>
2º-Después el archivo que contiene la configuración para modificar el aspecto del menú lo abrí con el bloc de notas y copié su contenido para seguidamente pegarlo justo antes de ]]></b:skin>
El contenido es el siguiente:
http://forevergema.googlepages.com/
Es ahí donde podéis modificar los colores del menú donde dice /*colors for menu*/
3º-Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el mismo código que el primer paso:
<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>
</ul>
</div>
</center>
Añadimos los enlaces y listo.
Como podéis comprobar la única diferencia es que añadimos en nuestra plantilla un archivo que siendo alojado en un servidor ocuparía mucho menos espacio pero que podremos modificar cada vez que lo deseemos sin necesidad de abrir el archivo y volverlo a alojar.
Si una vez modificado no necesitamos modificarlo más también podemos subir el archivo a nuestro servidor y en el código de César que añadimos después de <head> sustituimos:
http://webjcp.googlepages.com/css.css por la url de vuestro archivo css.
mENU hORIZONTAL dESPLEGABLE
Menú horizontal blogger beta
Este menú horizontal es muy vistoso, lo he tomado prestado del blog de nuestro buen amigo César.
Para añadirlo a nuestro blog nos situaremos en Plantilla/Edición HTML.
Después de <head> /añadiremos lo siguiente:
<style type='text/css'>
#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}
#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}
#chromemenu ul{
border: 5px double #660000;
width: 99%;
background-color: #000000; center
center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #cccc66 ;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #660000;
}
#chromemenu ul li a:hover{
background-color: #660000; center
center repeat-x;
}
</style>
(en esta parte de código es donde podemos cambiar el color del menú)
Una vez guardados los cambios nos dirigimos a; Añadir un elemento de página/HTML Javascript donde añadiremos lo siguiente:
<div id="chromemenu">
<ul>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
</ul>
</div>
(En esta parte es donde podemos añadir los enlaces y el texto que será visible)
jueves, 25 de octubre de 2007
Posts relacionados en Blogger, otra forma mas facil
This is a Related Posts step-by-step Manual Instructions. Before applying this blogger hacks (may i call it a blogger hack? : ) I recommend you to create a dummy / test blog, so everything will still be under control if you are having trouble with it.
Note: If you have problem on installing this trick, please scroll down and read the update below. you can also the demo here. so if you have problem copying this code, you may download that template and copy the code inside it. thanks
update: to make you easier, you can download the related posts / articles on .txt file here.
Actually Related Article by Label has already created by Hoctro, and i must admit that he had done a really great job. that’s why I didn’t create this hack widget (oh I will mention it as Widget from now) from scratch. I use his widget and modifying it as a better and fit to my need.
First, you may want to read the original article on hoctro blogs here. There are couple thing I don’t like from the original widget. there are;
1. On Previous version, It uses 2 blog’s widget. Now I cut the code, so we can put it anywhere on the same blog widget. Why I don’t like to use 2 different widgets? Because your code would be too long, and you can not have your Related Post List right under your post area and Above the comment section. It is because it uses 2 different widgets.
Sure you can use 2 widgets and place the Related Posts Lists under post area and above the comment section, but that would make your code so not tidy. you with me?
2. On previous version, Users have to modify the code them self so they can use it. They have to fill a Parameter with their Blog Url. Now they need no more! I have modified the code so users will be able to use it just as simply as copy and paste.
3. On Previous Version, and this is important. The Current Article / Post will also be listed inside the Related Post/ Article Lists. that is not right isn’t? Related Posts / Articles means Other Articles / Posts which have relation with the current Article. Not the current Article it self.
I believe Hoctro knows all that points I mentioned above. And I’m sure it is easy for him to update and upgrade the code. It just i don’t know how to contact him, because he hide his comment section on his site. So..
Hope he will permit me to do this, I will modify the code by my self for your use. So here it is.
*Again, if you want to have the old version, you can go to that hoctro’s link above.
and here it is,
Step by step to install the
RELATED POST WIDGET FOR BLOGGER / BLOGSPOT
1. GO to your Template Editor, Under your blogger / blogspot Dashboard.
Click on the DOwnload Full Template Link. save your downloaded template as a back up, just to prevent in case you failed on applying this hack.
Then, tick the Expand Widget Templates.
2. Find this code below
<data:post.body/>
3. Copy this code below
update: to make you easier, you can download the related posts / articles on .txt file here.
<div class='clear-block;'/><b:if cond='data:blog.pageType == "item"'>
<div class="similiar">
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** –>
<!–
Modified by JackBook.Com to make it easier to use.
1. Now, users don’t need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it’s no more.
–>
<div class=’widget-content’>
<h3>Related Posts by Categories</h3>
<div id=’data2007′/><br/><br/>
<div id=’hoctro’>
Widget by <u><a href=’http://hoctro.blogspot.com’>Hoctro</a></u> | <u><a href=’http://www.jackbook.com/’ title=’Related Posts on Blogger Modified by JackBook.Com. Read More?’>Jack Book</a>
</u></div>
<script type=”text/javascript”>
var homeUrl3 = “<data:blog.homepageUrl/>”;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
<b:if cond=’data:blog.pageType == “item”‘>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond=’data:blog.pageType == “item”‘>
maxNumberOfLabels = 3;
</b:if>
function listEntries10(json) {
var ul = document.createElement(’ul’);
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(’li’);
var a = document.createElement(’a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == ‘alternate’) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace(”%20″, ” “);
var txt = document.createTextNode(label);
var h = document.createElement(’b');
h.appendChild(txt);
var div1 = document.createElement(’div’);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(’data2007′).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(’script’);
script.setAttribute(’src’, query + ‘feeds/posts/default/-/’
+ label +
‘?alt=json-in-script&callback=listEntries10′);
script.setAttribute(’type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values=’data:posts‘ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
textLabel = “<data:label.name/>”;
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
3. Paste right after the code #2 (<data:post.body/>)
Please be flexible. You can do experiment by put the <data:post.body/> inside a <p></p> tag like this.
<p><data:post.body/></p> Then_the_related_posts_script_here
4. Save your template. refresh your blog, and Done.
That’s all. Enjoy!
Note; Related Posts is a list of all posts related to some article based on the labels. And because this uses Javascript, if you want to create a list of posts related by content, it might be pretty hard to do currently.
For some people who always failed and/or getting error on installing this related posts trick. Kirk Warren from weeklycrisis.com has founded the solution for you. here is his comment
The reason you are getting the errors is because whatever he did with the formatting in this script boxes has ” and ‘ wrong. If you look at them in the Blogger template when you paste the code, they come off as ’ (notice it is slanted to the left, not straight down like a normal single quote [ ‘ vs ’ ]. Same thing happens with the ” and “. Notice how one is straight down and the other is to the right [” vs “]. This is what is causing all the hassles for people.
Most likely, when he recovered the post from Google cache, it had reformated the quotation marks on him and this is why you get that error. Manually replace all the ‘ and ” in that section of code and you should be fine.
update: to make you easier, you can download the related posts / articles on .txt file here.
Thanks
tambien puedes descargar desde aca
Posts relacionados en Blogger, interesante y funciona
Una pregunta frecuente es como conseguir mostrar una lista con artículos relacionados al post que estamos leyendo, de la misma manera que hacen varios plugins para Wordpress, en Blogger.
Buscando un poco he encontrado una solución, la cual voy a explicar y que funciona bien. Este sistema se basa en las etiquetas del blog para mostrar artículos cuyas etiquetas coinciden, por lo que es necesario que las utilices en tus posts, sino, no se mostrará nada. Por otro lado aunque sólo hay que copiar y pegar conviene ser cuidadoso para que todo salga perfecto.
En primer lugar, como siempre, realiza una copia de seguridad de tu plantilla.
¿Ya?, muy bien. Pues empezamos añadiendo el código que hace el 80% de la magia. Para ello tienes que ir en el panel de control de tu blog a Plantilla -> Edición HTML.
Entre las etiquetas head, o más sencillo, justo antes de la etiqueta </head>, copias y pegas lo siguiente:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Puedes guardar la plantilla para no perder ese cambio y ahora marcas “Expandir plantillas de artilugios”. Busca el siguiente trozo de código:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
y sustitúyelo por el siguiente:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Bueno, ya queda menos. Guarda la plantilla y vete a Plantilla -> Elementos de página
Tienes que añadir un nuevo widget que será el bloque que muestre los artículos. Para ello pinchas en “Añadir un elemento de página” y seleccionas HTML/Javascript.
Como título puedes poner relacionados y en el contenido añades lo siguiente:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
El nuevo artilugio lo puedes colocar donde quieras, yo a modo de ejemplo lo he situado en la barra lateral. Cuando accedes a una entrada invidual se muestran los artículos relacionados y cuando estás en la página inicial el bloque desaparece.
Queda un pequeño punto todavía. Debes ir de nuevo a Plantilla -> Edición HTML y buscar el siguiente bloque, que es el nuevo artilugio o widget que has añadido:
<b:widget id='HTML13' locked='false' title='Relacionados' type='HTML'><b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <-Añade esta línea
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != ""’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div> <b:include name=’quickedit’/>
</b:if> <-y ésta
</b:includable></b:widget>
Simplemente debes añadir las líneas que están señaladas.
Ya está, hay ciertos valores que puedes modificar para mostrar más o menos posts relacionados. En el primer bloque de código el i<20 y en el tercer bloque de código el max-results=10.
Pueden verlo en funcinamiento en estos 2 blogs: angelcaido666 y hugo miranda
OTRO METODO ACA QUE FUNCIONA Y LO PUEDEN VER EN INGENIERIA LEGAL
viernes, 12 de octubre de 2007
miércoles, 3 de octubre de 2007
Añadir una barra lateral (sidebar) en Blogger
El proceso es bastante sencillo pero requiere tocar varios elementos del código, así que para prevenir cualquier problema, lo mejor es que primero hagas una copia de seguridad de la plantilla. Lo puedes hacer en “Plantilla” -> “Edición HTML”.
Una vez guardado empezaremos a editar la plantilla.
Vamos a suponer que estamos trabajando con una plantilla cuya barra lateral esté a la derecha. Entonces en “Edición HTML”, de nuevo, nos vamos a la sección “Editar plantilla”.
Lo primero que tenemos que hacer es cambiar el nombre a la antigua barra lateral, para poder identificarla correctamente:
Buscamos esto:
lunes, 17 de septiembre de 2007
Cómo bajar vídeos de YouTube
En cualquier caso dispone de herramientas para su descarga, tanto online como de escritorio. Como online tenemos a Videoronk, ClipNabber, YouTubeX o Videodownloader, entre otros. Para escritorio tenemos a YouTube Grabber en Windows o Flash Video Downloader para Mac OS X.
Pero si lo que queremos es bajar los vídeos ya convertidos a otro formato o convertirlos una vez descargados, como herramientas online tenemos a HeyWatch, Zamzar, Media Convert, Mediaconverter y Vixy, entre otras muchas. Evidentemente hay otros servicios pero con los que les he enumerado tiene más que suficiente, aparte de ser los más completos. Como nota adicional, 1dawg de momento está inoperativo.
Como aplicación de escritorio, Mediaconverter también dispone de su propia aplicación para Windows aunque podemos sumar KeepV. Para Mac OS X tenemos a VisualHub, Macvideoconverter, Get Tube o FLV2itunes para la conversión a diferentes formatos, aunque los dos primeros se limitan a la conversión, siendo VisualHub el más potente y completo.
Habrá más herramientas online como de escritorio, algunas más populares que otras, con lo que no vendría mal una recomendación adicional, ¿qué nos recomiendas?
¿Pagarías por un anuncio en tu blog?
La posibilidad de hacer negocio con los blogs y la publicidad, en español, es difícil, o mejor dicho, la posibilidad de hacer negocio con tu blog y la publicidad, en español, es difícil.
Está bien eso de admirar las ganancias que son capaces de generar los blogs en inglés, pero no hay que engañarse, si te guías por ello estás perdido desde el principio. Para empezar, la mayoría de esos blogs que son capaces de ganar dinero a lo bestia, tienen decenas de miles de visitas y su influencia va mucho más allá de las fronteras del idioma.
¿Quieres ganar dinero con tu blog? Perfecto, pues piensa si tu mismo contratarías un espacio publicitario en tu blog. Pero… si voy a poner AdSense… lo cierto es que no importa, si alguien a duras penas pondría publicidad en tu blog, AdSense te va a generar más bien poco.
Plantéate en serio, entonces, qué es atractivo de tu blog, qué pasaría si alguien decidiera poner un anuncio en tu bitácora, ¿sería efectivo?
Con esa idea en mente debes trabajar con la intención de hacer de tu blog un buen soporte publicitario.
¿Quieres que te contraten posts patrocinados? Aumenta tus suscriptores, consigue lectores fieles, haz que tu blog genere conversación.
¿Quieres vender enlaces patrocinados? Trabaja en aumentar tu PageRank, los enlaces entrantes y tus visitas.
¿Quieres que patrocinen tu blog con un banner de moda de 125×125? Multiplica tus visitas, crea contenido, anticipa los intereses de la gente.
Se lo que piensas, pero nadie dijo que fuera fácil, de hecho, tampoco vuelvas cuando tengas 5000 suscriptores, 20000 visitas diarias y un PR 7, estás escribiendo en español, ¿qué esperas?
P.D: con 20000 visitas diarias AdSense puede reportarte unos ingresos jugosos, tampoco hay que ser extremadamente pesimista.
martes, 28 de agosto de 2007
Ultimos Comentarios en el Sidebar
Vamos a Plantilla- Edicion Html
Y buscamos
</head>
Antes de esté pegamos esté otro código:
<script src='http://leonelhack.googlepages.com/leonelhack.js' type='text/javascript'/>
Inmediatamente vamos a:
Plantilla-Añadir Elementos. Abrimos uno con HTML, y pegamos lo siguiente:
<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>
<script src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay"></script>
Ahora vereis en vuestro sidebar los últimos comentarios que os hicieron vuestros amigos
vistio en Futurox
martes, 21 de agosto de 2007
Mejorar la lista de categorías del blog
Desde luego es una de mis tareas pendientes y no se cuándo me voy a poner a ello, sobre todo, porque reorganizar todos los posts me va a llevar bastante. Así que, si estás a punto de crear tu blog o todavía no has escrito demasiados artículos (incluso si lo has hecho como yo) sería bueno que tuvieras en cuenta los siguientes consejos para crear categorías:
1. Las categorías deben ser descriptivas
Normalmente las categorías ayudan a nuestros nuevos visitantes a explorar de una manera más profunda nuestro blog. Si no se lo ponemos fácil y conseguimos que accedan al contenido que más les pueda interesar de una manera rápida es bastante probable que se vayan tan rápido como han llegado.
Las palabras de las categorías no sólo deben ser claras para nuestro lectores, sino que además parece una buena idea que también lo sean para los buscadores y no sería mala idea usar términos de búsqueda.
2. Utilízalas como una tabla de contenidos, no como un índice
Uno de los mayores errores que se suelen cometer al crear categorías es el de hacerlas demasiado específicas. Sin llegar al punto de construir una lista de categorías demasiado generales sí parece una buena idea agrupar temas relacionados en una misma categorización en lugar de hacerlas más concretas.
Imagina el caso de un blog de coches que tiene una sección dedicada a los modelos diesel. Parece más lógico agrupar todos los que reunan esa característica en una categoría denominada “Diesel” que crear distintas categorías en función de sus caballos “Diesel 120cv”, “Diesel 140cv”.
3. Que la lista sea corta
Es un error común crear una categoría nueva cada vez que se escribe un post. Incluso si tienes un blog variado es factible crear una estructura fija de categorías que abarquen todos los temas de los que vas a hablar.
En primer lugar los lectores agradecerán no tener que recorrer una lista de 30 temas hasta encontrar el que les interese. En segundo lugar hay teorías (sin demostrar) que sostienen que parece más favorable en términos de buscadores, disponer de una categoría con 20 posts relacionados que veinte distintas.
4. Incluye tus posts en una sóla categoría
No hay unanimidad respecto a este punto. Por un lado se sostiene que parece más lógico que cada categoría disponga de sus propios posts con la idea de evitar al lector encontrar los mismos artículos en diferentes sitios. Además, existe la posibilidad de que Google crea que se trata de contenido duplicado con el consiguiente perjuicio para nuestro blog.
Por otro lado, también es cierto que puede que determinados posts encanjen perfectamente en distintas categorías, pero no es tan habitual y si mantienes una buena estructura de categorías, tampoco necesario.
5. Piensa antes de crear una nueva categoría
Ya tienes tu lista de categorías perfectamente elaborada, pero un día escribes un post que no sabes donde encajar. La solución suele estar en crear una nueva categoría pero, ¿vas a escribir más posts que puedas agrupar en ella?
Es decir, crear una categoría que solo vaya a estar compuesta por un par de posts no es una buena idea. A los ojos del lector dará la sensación de que, o bien no te interesa mucho el tema o no tienes ni idea. Antes de crearla, por tanto, analiza bien si puedes reubicar el post en otro sitio o si seguirás escribiendo más artículos relacionados.
sábado, 11 de agosto de 2007
Quieres empezar un blog?
1. Conseguir tráfico lleva tiempo
Es entendible pero un poco absurdo pretender que nada más crear tu blog empiecen a leerte cientos de personas, de hecho es probable, que durante la primera semana tu seas su único lector y quizá a partir de ahí empiece a llegar algún visitante más. Pero necesitas que el resto de la blogosfera sepa que has creado un blog, necesitas promocionarlo y con insistencia, no basta con crear contenido, simplemente eso ayudará a que se queden, pero en el primer mes no será lo único que necesites.
2. Hay más trabajo de lo que piensas
A no ser que quieras tener un blog personal, ser bloguer requiere ciertas tareas, no basta con postear y esperar que todo venga por arte de magia. Además debes de optimizar el contenido para las búsqueeas, visitar otros blogs, comentar para que te conozcan…
3. Ganar dinero requiere tiempo
Si quieres generar ingresos con un blog, no pienses que basta con empezar uno. En primer lugar necesitas bastante tráfico y desde luego al empezar es difícil… es decir, no creas que vivir de los blogs, es fácil y menos en la blogosfera hispana, de hecho, la teoría generalizada es que un blog no empieza a ganar dinero hasta pasados los dos años
4. No crees un blog con el contenido de siempre
Hay determinados temas que se repiten una y otra vez en la blogosfera y lo cierto es que muchos de ellos tienen bastante éxito y han sabido rentabilizarse, pero eso no significa que baste elegir los mismos temas para asegurarse un trozo de éxito, de hecho, a no ser que logres diferenciarte, tu blog sólo será uno más entre todos. Busca, compara y descubre que puedes hacer tu de original.
5. Crear un blog es crear contenido
No bases el contenido de tu blog en lo que puedas leer en tus blogs favoritos y menos, reproduzcas sin piedad lo que leas en ellos.
Al empezar pueden servirte como guía pero después debes ser capaz de crear tu contenido.
Etapas del Blogguing
Las 5 etapas que nos propone son:
1. Euforia inicial
Ésta puede que sea la única en la que todos coincidimos. Todo bloguer al empezar su blog se afana en desarrollar o encontrar una plantilla adecuada, busca cualquier widget que puede añadir a su bitácora.
Los primeros posts fluyen sin problemas e incluso puede que alguno logre cierto eco si el bloguer sabe como moverse en la blogosfera.
2. En espera
Una vez que hemos creado nuestro blog el objetivo es conseguir tráfico y lectores. Comprobamos compulsivamente el número de visitantes del blog, los suscritos y los enlaces que empiezan a llegar.
Puede incluso que algún blog más conocido hable de ti, que consigas aparecer en Menéame… recuerdo cuando empecé con este blog que un día al comprobar las estadísticas no entendía como al cuarto día de estar online el número de visitas pasaba de 300. Me alegre todavía más cuando descubrí que la razón era que en bitacoras.com, habían publicado uno de mis primeros artículos en portada.
Pero esta fase también termina y suelen ocurrir dos cosas, que tu blog siga creciendo como la espuma o que permanezcas en un estado estacionario en el que el crecimiento del blog sea mucho más lento.
3.- Frustración
Acabada la euforia inicial y el trabajo posterior muchos bloguers empiezan a pensar que todo el esfuerzo invertido no ha valido para nada. No son capaces de encontrar ese post, esa idea, que suponga un punto de inflexión. Desarrollan buenos artículos, enlazan a otros blogs, esperan y… esperan. Consiguen algún que otro link pero nada que recompense el tiempo y el esfuerzo invertido.
Hacerse notar comienza a parecer una tarea bastante complicada. La ilusión empieza a decaer lentamente aunque alentada por algún pequeño éxito el bloguer se mueve entre la decepción y el optimismo.
En esta fase se intenta desarrollar el blog desde nuevos ángulos en un intento de pegar un empujón a su crecimiento. Se empieza a perder la motivación y en muchos casos se abandona en esta etapa.
4.- Alienación
El bloguer pierde la imagen de una blogosfera amable y se lanza cuesta abajo hacia el abandono. Es una fase en la que se combinan largos períodos sin postear con otros de mucha actividad en un último intento de pegar un giro a la situación
5.- Abandono
El bloguer desmotivado elimina su blog o lo deja abandonado a su suerte. Las cosas no han salido como se esperaba o simplemente se ha perdido el interés.
Por último, yo añadiría una sexta fase por la que estoy seguro han pasado muchos tras la quinta.
6.- Reaparición
Darse por vencido también es difícil, puede que haya fracasado el intento de crear un blog exitoso, pero después de un tiempo desconectado han surgido nuevas ideas y crear un blog de nuevo es tan fácil… la euforia nos desvuelve a la primera etapa.
Blogs para Empresas
- Aportar una voz personal a la comunicación con sus públicos internos y externos. Sobre todas las cosas los blogs son medios personales, autogestionados por sus propios autores y en los que prima la voz personal de alguien que escribe sobre lo que hace, lo que piensa y lo que le pasa. Los blogs de directivos contribuyen a proyectar una identidad personal a la marca corporativa, desligada de la jerga del marketing y las relaciones públicas que predomina en otros canales.
- Mejorar la visibilidad de la marca ante los buscadores. Desde el punto de vista formal, un weblog es un tipo de sitio web con una peculiar estructura (títulos y entradas individuales, enlaces permanentes, fecha y hora de publicación, categorías y separación de contenido y diseño). Si a esta forma de sistematizar la publicación de contenidos se suma la cultura bloguer basada en enlaces cruzados entre sitios como forma de atribución y reconocimiento, se entiende por qué los buscadores entienden y valoran especialmente bien a los weblogs.
- Obtener retroalimentación de sus clientes. Los comentarios, asociados a cada entrada de un weblog, permiten recibir el feedback de los lectores que suele ser una valiosa fuente de información y crítica de lo que se escribe. Un blog corporativo con comentarios abiertos (que pueden ser moderados) es como una encuesta permanente sobre la empresa y sus productos. Sólo hay que atreverse a escuchar las opiniones de la gente.
- Mantener actualizado el sitio web corporativo. La actualización frecuente, idealmente diaria, es otro de los rasgos de identidad de este medio. Un blog es una forma práctica de actualizar un sitio web corporativo o de gestionar su sección de noticias. La transparencia de los gestores de contenido utilizados para mantener weblogs permiten que cualquier persona sin una formación técnica específica pueda publicar en el sitio con sus propios permisos y privilegios.
- Gestionar la comunicación en situaciones de crisis. Cuando la comunicación no puede esperar, ni supeditarse al ritmo o a las prioridades de los medios convencionales, con un weblog una empresa cuenta con un medio propio y puede controlar la comunicación pública en situaciones de crisis sin intermediarios. Recuerde, además, que un blog puede mantenerse desde cualquier dispositivo móvil.
- Participar en la conversación sobre sus productos y servicios. El dictum del Manifiesto Cluetrain acerca de que los mercados son conversaciones, encuentra en la blogosfera su pleno sentido. Los bloguers no sólo hablan en sus sitios, sino que escuchan y comentan en los sitios de los demás. Más allá de los comentarios, los enlaces son otra forma de conversación y ya existen múltiples herramientas (Technorati, BlogPulse, IceRocket) para monitorizar en tiempo real las conversaciones que tienen lugar en la blogosfera.
- Distribuir información corporativa de manera no invasiva. Los gestores de contenidos utilizados para editar y publicar weblogs, generan de forma automatizada fuentes RSS de los contenidos que permiten a los lectores interesados estar al tanto de las novedades que se publican sin necesidad de acudir al sitio para descubrirlas.
- Desarrollar un perfil innovador. Los blogs siguen rodeados de un halo de novedad, de ruptura, de nuevas formas de comunicación, de informalidad y de humor. La blogosfera es la zona más viva y dinámica de la Web, y las empresas que lo entiendan y sean capaces de asumir la cultura del medio, podrán reforzar su perfil innovador.
- Crear una comunidad. Los lectores regulares de un weblog acaban formando una comunidad, que aunque muchas veces no se exprese en los comentarios, constituye una de las fuerzas más atractivas de este medio. En la blogosfera se establecen vínculos entre las personas a través de las palabras y vínculos entre las palabras a través de los enlaces.
- Contar su propia historia. Si la identidad de una empresa es en buena medida su historia, un blog es la mejor herramienta para contarla. Los archivos del medio permiten, además, que los nuevos siempre tengan la posibilidad de acceder y explorar el pasado de la empresa a la que se incorporan.