Son pocas las plantillas para elegir que tiene blogger, generalmente la mayoría busca plantillas en otro lados como Btemplates, pero ahora Blogger in Draft ha añadido una sección para personalizar, editar o crear plantillas a tu gusto, cambiando tamaños y colores fácilmente desde el editor, ya no más dolores de cabeza con el código.
A continuación el video de introducción:
Para usarlo, debes entrar desde Blogger in Draft e ir a Diseño > Diseñador de Plantillas.
Al fin podrás diseñar la plantilla ideal para tu blog sin saber nada de html!
Mostrando entradas con la etiqueta Codigos y Trucos para Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Codigos y Trucos para Blogger. Mostrar todas las entradas
12 marzo 2010
Nuevas plantillas personalizadas en Blogger
31 diciembre 2007
Cuenta regresiva para año nuevo 2008
De aqui me voy a los fuegos artificiales, son las 9:00 PM y aunque un poco tarde para algunos paises, si para ti aun no llega el nuevo año, pon una cuenta regresiva!
Entra aqui y selecciona el primer contador, aceptas las políticas, eliges el color y tu Zona horaria GMT, en title pones algo asi como: Para el 2008, para año nuevo. Y en mensaje: Feliz Año nuevo!
Para agregarlo a tu web o blog puedes usar cualquier código, para myspace usa el segundo. Creo que hi5 ya no los acepta.
Feliz año nuevo!
25 diciembre 2007
Nieve con Javascript para blogger
A diferencia del efecto de nieve anterior, este no sirve para myspace o hi5, ya que no aceptan javascript.
Pero si funciona en blogger o en cualquier tipo de pagina web.
Crea el efecto de nieve de diferentes tamaños callendo en forma zigzageante, puedes ver un ejemplo aqui.
En blogger debes crear un nuevo elemento de pagina HTML/Javascript y pegar el código ahi, para despues guardar cambios.
Para cualquier otro tipo de sitios web, lo pegas antes de </body> en edicion HTML.
Codigo:
<script type="text/javascript"
src="http://inacho07.googlepages.com/snow.js"> </script>
12 diciembre 2007
Cuenta los días para navidad
Pon este arbolito de navidad en tu myspace, hi5 o blogger para saber cuantos dias faltan para navidad!
No funciona con Hi5, aunque los creadores del widget dicen que si, Hi5 dice que no y no lo permite :(
Solo pega el siguiente codigo en cualquier seccion de tu space:
Feliz Navidad a todos! >> Leer Todo
17 noviembre 2007
Caja de busqueda a tu blog en blogger
Agrega una caja de busqueda al sidebar de tu blog en blogger haciendo clic en el boton, muy simple :).
28 octubre 2007
Expandir post en blogger
Otra alternativa a la entradas muy extensas en blogger. Con el truco anterior de leer más habian algunos problemas, por ejemplo, que en todas las entradas aparece el enlace a "seguir leyendo o leer más" aunque no hubiera nada mas que leer, por lo tanto las entradas antiguas que no tenian la modificacion del post con el codigo, tendrian un enlace innecesario.
Con este truco podrás esconder parte del texto en algunas entradas que sean muy extensas sin tener que volver a cargar la página. Puedes ver un ejemplo aquí.
Lo primero que haremos es ir a plantilla > edicion html y "expadir plantillas de artulugios".
[Actualizado] Habia un error en el siguiente codigo, disculpas! ahora esta bien :)
Antes de </head> pegamos el siguiente código:
<script src='http://chileinicia.googlepages.com/functiontoggleIt.js' type='text/javascript'></script>
Ahora buscarémos el siguiente código:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Lo seleccionamos todo y lo reemplazamos por este:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SEGUIR LEYENDO [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>MINIMIZAR [x]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Lo que esta en rojo son los texto que aparecerán para expandir y contraer, puedes cambiarlos por el que quieras, o si quieres agregar una imagen, sustituyelos por el codigo para agregar una imagen:
<img src="http://direcciondeimagen.gif"/>
Ahora, cuando desees que en una entrada aparezca el "expandir", deberás "encerrar" el texto que no aparecerá entre estos codigos en la edicion de HTML del post:
Primer texto, el que si se ve.
<span id="fullpost">
Texto escondido, el que aparecerá al hacer clic en Expandir
</span>
Eso es todo, cualquier duda, pregunten ^^
05 octubre 2007
Tag clouds, Nube de etiquetas en blogger
Los tag clouds muestran tus etiquetas visualmente bonitas y ordenadas por tamaño según la cantidad de entradas en cada una, en blogger no esta por defecto como en wordpress, por lo que necesitaremos uno más de los famosos hacks.
Para agregarla, vamos a Plantilla -> Edicion HTML (no expandas artilugios)
El codigo se divide en 3, el primero lo pegamos antes de "]]></b:skin>"
Codigo 1:
/* Label Tag Cloud */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
El siguiente lo pegas despues "]]></b:skin>" y antes de "</head>"
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://TU-BLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
En http://TU-BLOG.blogspot.com pones la direccion de tu blog (¬¬)
Ahora, busca lo siguiente (Control + F): <b:widget id='Label1' locked='false'
El tag completo es algo asi: <b:widget id='Label1' locked='false' title='Labels' type='Label'/> pero el title tal vez sea distinto en tu caso.
Esa misma linea (toda) la debes reemplazar por el siguiente codigo:
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Para terminar, ve a Plantilla -> Elementos de pagina -> añadir nuevo elemento -> etiquetas.
Eso es todo, ahora tendrás una nube de etiquetas en tu blog ^^
ACTUALIZACIÓN:
Crear facilmente nubes de etiquetas o label clouds, con estos sistemas:
TagCloud o ZoomClouds
26 agosto 2007
Como subir videos a blogger
Ahora en blogger puedes subir tus propios videos desde tu computador a internet para ser publicados en tu blog con la nueva herramienta que se incorpora en la edicion de entradas de blogger.
Solo haz clic en el icono de video en la barra de herramientas, luego a examinar" para busca el video en tu disco duro, agregas el titulo del video, aceptas los terminos y das clic a Subir video.
Los formatos de video que puedes subir son: AVI, MPEG, QuickTime, Real y Windows Media con un tamaño máximo de 100 mb.
Otra herramientas que nos hace mas faciles las tareas a la hora de subir videos.
18 agosto 2007
Adorna tu blog con un Sticker
Actualización: El servicio de Blog Sticker ya NO funciona.
Gracias a ETOILE-SAMA por avisar.
En blogsticker puedes elegir entre 219 stickers para adornar esa esquina de tu blog abandonada y solitaria. Estan separados en diferentes categorias: Banderas, peliculas & tv, musica, deporte, etc... y cada una con subcategorias, muchos diseños y para todos los gustos. Aquí algunos ejemplos:
Si no sabes como agregarlo, te lo explico ^^
Primero te registras desde aqui.
Luego de poner tus datos y confirmar tu email, vas a la pagina principal y te logeas con tu username y password.
Ahora debes agregar tu blog desde donde dice "claim a new blog".
Pones la direccion de tu blog y le das a check url.
Ahi tienes 3 formas de confirmar que el blog es tuyo, la más facil es la C: add a metatag.
Copias el código, vas al panel de tu blog (Si es blogger), plantilla y Edicion HTML. Buscas </head> (Control + F) y pegas el codigo justo antes (para que sea mas facil de ubicar).
[ Codigo ]
</head>
Ahora en blogsticker, haces clic en "Check metatag".
Luego te dan otro codigo que lo puedes pegar al abajo o arriba del anterior, antes de </head> tambien, que es del tipo:
<script src="http://www.blogsticker.net/XXXX.js" type="text/javascript"></script>
Guardas los cambios.
Con el blog confirmado y el código añadido, ahora solo basta ir a buscar el sticker que más te guste y luego seleccionar el blog donde deseas ponerlo, guardar y listo ^^
El resultado: Tu blog más personalizado con un sticker muy cool.
Adiosin!
14 agosto 2007
Imágen en cabecera en lugar del título en Blogger
Con el nuevo blogger es muy simple cambiar el titulo por una imagen o logo, aunque algunos todavia no saben como y lo hacen mediante códigos, que es mucho más dificil para quien no los entiende.
Para poner una imagen en lugar del titulo, muy simple.
Desde el panel de blogger vamos a "Diseño", en Plantilla -> "Elementos de la página".
Ahora lo unico que hay que hacer es editar el header, donde sale el titulo de tu blog.
En la siguiente ventana das clic a "Examinar" y buscas el Logo en tu pc, luego guardas los cambios.
Ya tienes el logo en el header, pero hay que ponerlo sobre el texto, asi que vuelves a hacer clic a "Editar" y ahora seleccionas: "En lugar del título y la descripción"
Guardas los cambios y Listo!
Si el logo es mas pequeño o mas grande que tu header deberás ir probando cambiandole el tamaño hasta llegar al que se ajuste a tu blog.
saludos!
31 julio 2007
Ultimos comentarios en blogger
Puedes agregar los comentarios recientes a tu blog gracias al elemento "feed" de sindicación en blogger de una forma muy sencilla.
Para agregar los últimos comentarios a tu blog debes seguir los siguientes pasos:
1. En el panel de tu blog vas a la pestaña "Diseño".
2. Añades un Nuevo "elemento de Pagina".
3. Seleccionas "Feed" y haces clic en "Añadir al blog".
4. Debes agregar la url del feed de comentarios de tu blog, para eso ingresas la siguiente dirección:
http://NOMBREDELBLOG.blogspot.com/feeds/comments/default
En NOMBREDELBLOG pones el nombre de tu blog.
5. Le das a Continuar y Configuras el título del elemento, la cantidad de comentarios y eliges si deseas mostrar la fecha y el autor del comentario.
6. Guardas los cambios y ya tienes los últimos comentarios en tu blog.
21 junio 2007
"Leer más" o "Seguir leyendo" en Blogger
Si tienes entradas muy extensas en tu blog y solo quieres mostar una parte de ellas en la página principal, Aqui tienes el truco perfecto. Asi tus lectores no tendrán que bajar mil metros para encontrar el articulo que deseen. Lo primero que debemos hacer es modificar la plantilla, “Plantilla -> “Edición de HTML”, como siempre antes de realizar cualquier cambio realiza una copia de seguridad. Debes “Expandir plantillas de artilugios” y localizar el texto siguiente: Una vez localizado incluye debajo el siguiente código: Una vez hecho sólo tienes que localizar el siguiente texto: <data:post.body> y añadir justo después: Para dividir los posts hay que añadir una etiqueta en las entradas que define cuál quieres que sea el extracto de la entrada que se muestre antes del “Leer más”. Para ello sólo tienes que escribir el texto inicial y el resto encerrarlo dentro de: Texto inicial Leer más… Y al pinchar aparecería, “Texto Inicial” seguido de “Texto secundario”. Existe también la posibilidad de, que por defecto y para no tener ni que acordarte ni que escribirlo una y otra vez, hacer que la etiqueta aparezca automáticamente cada vez que quieras crear una entrada. Simplemente vas a “Opciones -> Formato” y en en el cuadro de texto de “Plantillas de entrada” añades: texto inicial <span class=”fullpost”> texto secundario </span> y guardas los cambios. Ahora cada vez que abras el editor aparecerá automáticamente la etiqueta.<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<a expr:href='data:post.url'>Leer más...</a>
</b:if>
El resultado final debería ser el siguiente:
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Leer más…</a>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
En rojo está lo que hemos añadido. Ahora sólo tienes que guardar la plantilla.
De manera que, si en el área de creación de entradas de Blogger escribieras lo siguiente: Texto inicial
<span class="fullpost">
Texto secundario
</span>
En tu blog aparecería lo siguiente:
by Hackosphere
Saludos!
17 junio 2007
Quitar, sacar barra de navegacion (Navbar) en Blogger
La navbar es la barra de navegacion que aparece arriba de tu blog en blogger, y puedes quitarla de una forma muy simple.
En el panel de blogger vas a a la "Plantilla" de tu blog, luego a "Edicion HTML" y pegas este codigo antes de </head> (Buscar = control + f)
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
Quedaría asi:
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style></head>
Listo, Guardar Cambios y la navbar a desaparecido!
