22 diciembre 2010
Chuleta para Blogger
25 junio 2009
Widget con Opciones de Navegación
Hace tiempo tenia la necesidad de poner opciones de navegación al blog, como por ejemplo, el de aumentar y disminuir el tamaño del texto y otros que son de mucha utilidad en el blog. Paseandome por La Blogueria me encontré una entrada donde nos daba un idea de como hacer un widget con lo dicho anteriormente, a mi parecer es muy sencillo.
Los primero es ver que le puedes colocar al widget. Aquí le dejo una serie de enlaces o pasos que servirán para hacer el widget.
1. Un buscador interno.
2. Abriendo los enlaces en otra ventana.
3. Un Traductor multilingüe.
4. Aumentar y disminuir el tamaño del texto.
5. Las entradas al azar.
Puedes obviar pasos (si tu quieres), recuerda que es tu decisión y también le puedes agregar los que a ti te parezca importante.
Si has cumplido con todos los pasos el widget quedara más o menos así:
<div style="border: 6px outset #778899; padding: 6px; background: #FFFFFF; none repeat scroll 0% 50%; width: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: black;">
<center>
<style type="text/css">
#buscador {
background: url();
padding: 5px;
float: center;
overflow:hidden;
margin: 0 auto; }
</style>
<form id="buscador" action="/search" method="get">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjH10CKvOk66nHzOu4fL5BGsH_Rf81DdPfVUvF35YPOffAd2gIHnrZ_onDVmpGsj9UtEyU4svPEGNY4A8LmXAZbBPEn_t5D9vCDLzzQ8f3ARGhZdphtuDmXHVO7LjAQOUZUGv2b3hM0w7/s320/searchiconry7.png"/><input this.value="onblur=" )="buscador..." onfocus="if (this.value == " ; q value="Buscador..." if type="text" (this.value="name"/>
</form>
<br/>
<div class="linkprefs">
<p style="display: block;">
<input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox"/>
<label for="linkprefs" title="Opciones de navegacion">Abrir enlaces externos en nueva ventana</label></p>
<span></span>
<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>
</div>
<br/>
<h4>Traductor</h4>
<img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 90%; width: 140px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://NOMBRE_DEL_BLOG.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 90%; width: 70px;" value="Traduce" type="submit"/>
</form>
<br/>
<h4>Entradas al azar</h4>
<div id="myLuckyPost"></div>
<script type="text/javascript">
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].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>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjH10CKvOk66nHzOu4fL5BGsH_Rf81DdPfVUvF35YPOffAd2gIHnrZ_onDVmpGsj9UtEyU4svPEGNY4A8LmXAZbBPEn_t5D9vCDLzzQ8f3ARGhZdphtuDmXHVO7LjAQOUZUGv2b3hM0w7/s320/searchiconry7.png"/><a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entradas al azar</a>
<br/><br/>
<h4>Tamaño del texto</h4>
<p><img src="http://vbmusica.googlepages.com/fontMas.gif"/><a href="javascript:ts('body',1)"> AUMENTAR </a></p>
<p><img src="http://vbmusica.googlepages.com/fontMenos.gif"/><a href="javascript:ts('body',-1)"> DISMINUIR </a></p></center></div>
Puedes modificar el tamaño del cuadro al comienzo del código width: 200px;, también hay cosas que puedes modificar a tu gusto. Puedes copiar y pegar el código en Real-time HTML y vas viendo como va quedando las modificaciones que hagas. En el código hay link de imágenes que están temporalmente alojadas en mi alojadores.
Fuente La Blogueria
03 abril 2009
Fecha tipo calendario
Hace día me preguntaba 3705 sobre como poner en las entradas la fecha tipo calendario. Hoy le explicare como hacerlo y además este se vera en todas las entradas así las haya publicado el mismo día. Es muy sencillo, pero recuerda siempre probar en un blog de prueba.
- Lo Primero:
- Segundo:
<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
d = ultimaFecha;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
ultimaFecha = d;
}
//]]>
</script>
- Tercero:
Ahora buscaremos el siguiente código en la plantilla (CTRL+F) (Si no lo encuentras búscalos por este también: <data:post.dateHeader/>):
<h2 class='date-header'><data:post.dateHeader/></h2>
Una vez localizado lo remplazaremos por el siguiente:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('');</script>
</div>
- Cuarto:
/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}
.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}
.fecha_anio {
display: block;
font-size: 10px;
}
.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}
El código CSS hay ciertas cosas que puedes modificar como la posición (Float) del calendario, el código original esta a la Izquierda(Left) y lo puedes cambiar por Derecho(Right). Si quieres cambiar el tamaño del texto tienes que hacerlo en font-size. Puedes cambiar la imagen en background y si utiliza alguna imagen diferente a la que te ofrezco aquí, tendrás que cambiar algunos valores como el padding, margin y font-size .
Pack de iconos de calendario Descargar
Fuentes: El Escaparate de Rosa <> Vagabundia
27 marzo 2009
Los Sidebar
Vamos a empezar hablar sobre los sidebar o columna, como todos saben es la parte lateral del blog, bien sea a la derecha o la izquierda. Es una parte fundamental en blog, ya que ahí podrás poner todo lo relacionado con tu blog (Archivos, enlaces, imágenes, videos, script, texto, reloj, calendario, e/o).
Vamos a identificar la parte de códigos (HTML/CSS) que le corresponde a los sidebar. "Todo lo explicado, esta basado en la plantilla mínima"
- Lo primero: Parte CSS
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Width (ancho) Esta parte es muy importante ya que aquí le daremos el tamaño al sidebar.
- Segundo: Parte CSS
Lo encontraremos en el /* Sidebar Content.
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
Aquí haremos cambios en de estilo en el sidebar, como por ejemplo: cambiarle el color, colocarle margenes y el estilo de las lista en el sidebar. Es algo muy fácil de modificar te invito a visitar estos tutoriales, para así entender más de sobre los CSS.
- Tercero: Parte HTML
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
</b:section>
Por lo general así encontraras estas secciones donde cada sección comenzara por la etiqueta <b:section> y terminara con la etiqueta </b:section> y dentro de la sección veremos las etiquetas widget (artilugios) que son lo elementos que le agregas al blog.
Según la página de ayuda de Blogger tienen que ser únicos y adaptarlos a los siguientes atributos:
- id - (obligatorio) un nombre exclusivo, que consta únicamente de letras y números.
- class - (opcional) algunos nombres de clase habituales son "navbar", "header", "main", "sidebar" y "footer." Si cambias las plantillas más adelante, estos nombres ayudarán a Blogger a determinar la mejor forma de transferir el contenido. Sin embargo, puedes utilizar otros nombres si lo prefieres.
- maxwidgets- (opcional) 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.
- showaddelement - (opcional) puede ser "yes" o "no", donde "yes" es la opción predeterminada. Determina si la pestaña "Elementos de página" mostrará el vínculo "Añadir un elemento de página" en esta sección.
- growth - (opcional) puede ser "horizontal" o "vertical", donde "vertical" es la opción predeterminada. Establece si los artilugios de esta sección se ordenan uno al lado de otro o uno encima del otro.
Cada artilugios (widget) también tiene unos atributos a seguir:
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
- id - (obligatorio) consta únicamente de letras y números, y cada uno de los ID de la plantilla deben ser exclusivos. El ID de un artilugio sólo se puede modificar eliminando el artilugio en cuestión y creando uno nuevo.
- type - (obligatorio) indica el tipo de artilugio, el cual debe ser uno de los tipos válidos de la lista que se especifica más abajo.
- locked - (opcional) puede ser "yes" o "no", donde "no" es la opción predeterminada. Un artilugio con este atributo no se puede mover ni suprimir de la pestaña "Elementos de página".
- title - (opcional) el título que se muestra del artilugio. Si no se especifica ninguno, se empleará un título predeterminado, como "List1".
- pageType - (opcional) puede ser "all", "archive", "main" o "item", donde "all" es la opción predeterminada. El artilugio se mostrará únicamente en las páginas del blog que se hayan establecido para ello. (Todos los artilugios se muestran en la pestaña "Elementos de página", independientemente de su atributo pageType).
Al final lo verán de esta estructura, donde <b:section></b:section> van dentro de la etiqueta <div id='sidebar-wrapper'> </div> :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
</b:section>
</div>
Dentro de las etiquetas widget hay unos ID existente para diferenciar cada artilugios:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
Referencia en Ayuda de Blogger
Seguiremos explicando más en el próxima entrada. :)
18 marzo 2009
Entradas expandibles [+/-]
Hace tiempo he querido hablar sobre este truco que al principio era un dolor de cabeza colocarlo y sobre todo encontrarlo, ya que ni siquiera cuando lo encontraba me tomaba la molestia en guardarlo a mis marcadores. Pero me decidí explicarlo lo más claro posible y hacerlo. Es muy accesible, te permite mejor visualización a la hora de buscar algo. Recuerda hacer una copia de tu platilla y probar primero en un blog de prueba.
- Lo primero:
Código[+/-]
<script type='text/javascript'>
// <![CDATA[
//ENTRADAS EN DESPLEGABLE POR ETIQUETAS
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
if (entry.content) {
comment = entry.content.$t;
} else if (entry.summary) {
comment = entry.summary.$t;
}
var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}
document.write('Widget sponsored by:<br/><a href="http://bvibes.com"><img src="http://fbvibes.com/templates/yget/images/vibes_logo.png"/></a><br/>');
}
//]]>
</script>- Segundo:
Ahora vamos a buscar todo lo que aparecerá en negrita y le añadimos los que esta en rojo tal como lo verán aquí:
El código a continuación fue tomado de Gem@ Blog
Código[+/-]
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='"javascript:toggleIt("" + data:post.id + "");"' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
- Para verlo en funcionamiento presiona clic sobre una de las etiquetas o presionas donde dice entradas antiguas o siguiente.
- Referencia Gem@ Blog
- Cualquier cosa, no dudes en preguntarme.
Actualizado el 15/03/2001
13 marzo 2009
Nube de Etiquetas III - Blogumus
En Primer lugar nos vamos a Diseño - Edición HTML y sin expandir la plantilla buscaremos(Ctrl+F) esta linea de código en la plantilla.
<b:section class='sidebar' id='sidebar' preferred='yes'>
Y justo a esta linea colocaremos los siguiente:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
¿Qué podemos cambiar?
La altura y anchura:
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
Aquí tienes que adaptarlo según el tamaño de tu sidebar.Color de Fondo:
<param name="bgcolor" value="#ffffff" />
Color del texto:
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
Tamaño de las Etiquetas & Enlaces:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>
Puede ver el tamaño en vista previa.
Aclaraciones:
- Se puede ver en vista previa el widget en funcionamiento
- Después de la instalación puedes ir a Diseño - Elementos de Páginas y cambias la posición de widget
- Y si quieres algo diferente, Vagabundia nos muestra otra forma de navegar con etiquetas
- Este Widget es original de Amanda de Blogger Buster
- Hay que recordar que este es el código alternativo, quiere decir que se modifico el código original que se dio al principio por su mala visualización, por lo tanto este no debe tener ningún problema en visualizarse en IE. Este fue el primero y este fue el segundo(El que publique aquí). Pero hice mis pruebas y fueron negativa solo sirvio una solo vez, luego borre el historial y volvio a servir. Esto servira el 100% utilizando Firefox
12 marzo 2009
Nube de Etiquetas II
- Wordle Genera una nube en imagen y nos permite borrar las etiquetas que no queremos que aparezcan. A pesar de ser muy dinámico, no genera es la imagen.
- Wowzio Un sitio muy interesante y mi favorito, no hace falta registrarse y nos ofreces muchos servicios y en espacial el generador de etiquetas. Solo se coloca la URL de nuestro Feed y listo.
- Quintura Con solo colocar el URL del Feed y nos mostrara palabras de nuestro blog, y si presionas sobre ellas te mostrara otra series de palabras. Es muy interesante.
- Tag Cloud Generator Este nos genera las nubes a partir de las URL de nuestras etiquetas. Solo coloca el URL de todas tus etiquetas, lo personalizas a tu gusto y genera el código HTML. También te ofrece la facilidad, que con solo colocar el URL de tu blog te generará las etiquetas y después eliges cual deseas dejar. Este es super sencillo. Lo puede utilizar también para generar enlaces en forma de nube.
Resaltando con CSS
Ejemplos:
Este es un ejemplo de como puede ser útil en tu blog
Visto en Xyberneticos
10 marzo 2009
Nube de Etiquetas
Vamos a la plantilla Diseño - Edición HTML y sin expandir la plantilla nos vamos a ]]></b:skin> y colocaremos esto justo ante:
/* Label Cloud Styles
----------------------------------------------- */
#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}
Luego no vamos </head> y justo ante se colocará esto:
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
En la parte que dice YOURBLOG lo cambiaremos por el nombre del blog.
Ahora la parte final y buscamos esta linea de código:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>Y los reemplazaremos por esto:
<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 -----------------
// Cloud function s() ripped from del.icio.us
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 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])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
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 = '/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>
Más información en Phydeaux3 y en este blog
Es muy sencillo, si deseas saber más sobre esto, no dudes en comentar.
13 febrero 2009
Entradas de Ayuda para el blog (Recopilación)
- 3 Columnas en mínima black
- Accesos al panel de blogger desde el blog
- Añadir 3 columnas en la sección del crosscol
- Añadir 3 columnas en la sección del footer
- Añadir a Favoritos
- Añade Marcadores Sociales
- Banner en el encabezado de mínima black
- Bordes redondeados solo con css
- Botón ir arriba
- Cajas de Texto de Gema Blog
- Cambiar aleatoriamente la imagen del titulo
- Cambiar la plantilla sin perder los widgets
- Cambiar tamaño columnas plantilla mínima
- Comentarios en una Imagen
- Como añadir un favicón a tu blog o página web
- Código No-Follow
- Crear Widget para que agreguen enlace a tu blog
- Decorando Enlaces
- Desplegar contenido oculto (Bloqueas Animados)
- Dividir secciones en la plantilla
- e-referrer expandible
- Efecto opacidad en la Plantilla
- Entradas Aleatorias
- Entradas Relacionadas por Categorías
- Expandir textos o imágenes
- Faviconera Adaptable
- Fecha tipo Calendario en tus entradas
- Ideas para aumentar tus visitas (promoción)
- Imagen del perfil en los comentarios
- Imágenes que se agrandan
- Menú circular
- Menú de enlaces con imágenes previas
- Menú despegable
- Menú despegable con color
- Menú expansible en el Sidebar
- Modificar interlineado
- Mostrar las entradas de cada etiqueta en forma de menú expandible
- Mostrar los últimos post y comentarios en pestañas
- Mostrar títulos de todas o últimas entradas
- Navbar mostrar u ocultar
- Navbar fantasma
- Nube de Etiquetas en el nuevo Blogger
- Nube de Etiquetas en movimiento (new)
- Paginación en Blogger
- Personalizar los comentarios
- Personalizar los títulos del sidebar
- Publica con la primera letra en grande
- Recuperar el Lápiz de edición
- Sacar el titulo y la descripción del blog
- Scrollbars en cualquier parte del Blog
- Texto con imagen al pasar el ratón
- Truco leer mas
- Tutorial JQuery
- Últimos post en la sidebar
06 febrero 2009
Tutoriales recomendados
Iván de Zona Cerebral creo estos tutoriales y servirán mucho para los que quieren aprender a diseñar o conocer más sobres las plantillas:
Como crear una plantilla para Blogger - Primera parte: Composición y estructura.
Como crear una plantilla para Blogger - Segunda parte: Temática y estilo.
Crea tu propia plantilla para Blogger - Tercera parte: Codificación.
Como crear una plantilla para blogger - Cuarta parte: Distribución.
Arzet de Ateneu Popular crearon estos otros turoriales, aquí aprenderás de manera muy sencilla sobre los CSS:
Maestro CSS, destripando estilos. Cap. 1 - Resetea tu CSS
Maestro CSS, destripando estilos. Cap. 2 - La estructura
Maestro CSS, destripando estilos. Cap. 3 - La estructura (y2)
Maestro CSS, destripando estilos. Cap. 4 - Selectores y demás
Maestro CSS, destripando estilos. Cap. 5 - Selectores y demás (y2)
Maestro CSS, destripando estilos. Cap. 6 - Propiedades (de la A a la Z)
Maestro CSS, destripando estilos. Cap. 7: Propiedades de posicionamiento (position, top, bottom, left, right, float)
Maestro CSS, destripando estilos. Cap. 8: Propiedades de posicionamiento (clear)
Maestro CSS, destripando estilos. Cap. 9: Propiedades de visualización (display)
Maestro CSS, destripando estilos. Cap. 10: Propiedades de visualización (overflow, visibility,clip)
Maestro CSS, destripando estilos. Cap. 11: Propiedades de visualización (white space, z-index)
Maestro CSS, destripando estilos. Cap. 12: Propiedades de capa(height, width, max-height, max-width, min-height, min-width)
Además esta Chuleta CSS con conceptos básico, la recomiendo.
En esta página LibrosWeb.es comparten unos libros completamente gratis sobre XHTML, CSS, Javascript, PHP y Ajax.
23 enero 2009
Colocando un Widebar en el blog
H
ace tiempo he estado probando el Widebar con pestañas, por lo general se utilizan para poner los últimos comentarios, post más comentados y las entradas más recientes. Pero puedes utilizarlo para lo que quieras, he visto muchas opciones para poner el widebar en el blog, pero esta me parece la más accesible.Para realizar este truco recuerda leer bien la entrada, si es posible probar en un blog de prueba, siempre guarda una copia de seguridad del blog.
Lo primero que todo nos descargaremos este archivo:
Una vez descargado lo subimos a nuestro propio alojador, luego nos vamos a la diseño - edición de HTML, y lo colocamos justo después del </head> y añadimos lo siguiente:
<script type="text/javascript" src="tabber.js"></script> Recuerda que donde dice tabber.js, ahí colocaremos el URL que nos proporcione el alojador.
Se guardan los cambios y ahora agregaremos el estilo CSS al widebar, justo ante del ]]></b:skin> colocaremos lo siguientes:
/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{width: 400px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}
Ahora modificaremos en el estilo este valor 400px, este es donde se define el ancho del widebar, pero ojo tienes que poner el mismo tamaño que tiene en el #sidebar-wrapper de la plantilla. Los colores los puedes modificar a tu gusto.
Guardamos los cambios, expandimos la plantilla en artilugios y buscamos esto:
<div id='sidebar-wrapper'>
Luego justo ante de eso colocaremos lo siguiente:
<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div><!-- Fim da tabsidebar-wrapper-->
Volvemos a guardar los cambios y nos vamos ahora a la plantilla de Diseño. Y veremos tal como aparece en esta imagen (Imagen tomada en el Gem@ Blog), lo que hacemos es hacer clic en un número y le damos añadir un gadget, repetimos la operación con los dos número restante.
Así lo podrás personalizar el estilo CSS: (Texto tomado de Gem@ Blog)
Añadir color de fondo a pestañas
Comenzaremos con el color de las solapas o pestañas, todos sabemos que para modificar un fondo lo hacemos en background así que buscamos en nuestro código:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Modificando background: #EEE; por otro color estamos modificando el color de las pestañas 2 y 3
Para cambiar el color de la pestaña 1 lo haremos en:
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
Color de fondo en contenido
Vamos a darle color a ese fondo que es la continuación de las pestañas, donde añadimos el contenido y para ello buscamos:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
De esta forma cambiamos el color de fondo que precede a las pestañas 1, 2 y 3
Añadir imagen de fondo a contenido
Ahora vamos ir un poco más lejos y los atrevidos pueden añadir una "imagen de fondo" en lugar de color.
Sustituimos background: #FFF; por background:url('aquí la url de tu imagen de fondo');
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
Quedaría algo así:
.tabberlive .tabbertab {background:url('aquí la url de tu imagen de fondo'); padding:5px;border:1px solid #CCC;border-top:0;}
Color del texto
Si modificamos el color de las pestañas puede que el texto pase desapercibido o no resalte lo suficiente para ser legible así que cambiamos el color del texto en:
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
En esas tres líneas cambiaremos color:#369; por el color escogido.
Bordes
Ahora vamos con los bordes, ya sabemos que en border podemos modificar el borde.
Donde solid es el tipo de borde y con px (pixels) determina el grosor del borde. Al mismo tiempo cambiaremos el color en #453135;
Borde superior de la caja:
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #453135;}
Borde que rodea las pestañas:
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
Borde que rodea el contenido de las pestañas:
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
Efecto Hover
Las pestañas viene con efecto hover, dicho efecto nos permite definir su aspecto, nos daremos cuenta porque al pasar el puntero sobre las pestañas cambian de color.
Efecto hover de la pestaña 1 modificamos el color en:
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
Efecto hover de las pestañas 2 y 3
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
Gem@ Blog 1 | 2
Usuário Compulsivo | Plantilla con el truco aquí
Diego Cabai
08 mayo 2008
Marcadores Sociales con Opacidad
1. Expandir la plantillas en artilugios, luego nos vamos a la parte de los CSS que es lo mismo ante del ]]></b:skin> y agregaremos esto:
/* Marcadores sociales
--------------------------- */
.marcadores ul{ font-size:100%; display:inline; margin:0pt !important; padding:0pt !important}
.marcadores li{ background:transparent none repeat scroll 0%; display:inline; list-style-type:none; margin:0pt; padding:2px}
.marcadores img{ border:0pt none; float:none; margin:0pt; padding:0pt}
.marcadores-sociales{ opacity:0.6; filter: alpha(opacity=60);}
.marcadores-sociales:hover{ opacity:2; filter: alpha(opacity=200);}
2. Ya expandida en artilugios la plantilla localizaremos lo siguiente:
<p class='post-footer-line post-footer-line-3'/>
3. Y justo encima colocaremos los códigos de la serie de botones de los marcadores sociales
<!--Marcadores sociales -->
<div class='marcadores'>
Enviar a
<ul>
<li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Meneame'><img alt='Agregar a Meneame' class='marcadores-sociales' src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a></li>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Technorati'><img alt='Agregar a Technorati' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODcbltUKI/AAAAAAAACn0/weLnLJlJY7k/s200/technorathy.jpg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img alt='Agregar a Del.icio.us' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OD8bltUOI/AAAAAAAACoU/da4tqMev6zA/s200/deliciogl4.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a DiggIt!'><img alt='Agregar a DiggIt!' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OEMbltUPI/AAAAAAAACoc/Nc7aitpOiZw/s200/diggjf4.gif'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Yahoo!'><img alt='Agregar a Yahoo!' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OFJbltUUI/AAAAAAAACpE/u3XUXpq-cAI/s200/yahooyb7.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Google'><img alt='Agregar a Google' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0OER7ltUQI/AAAAAAAACok/oIqBV3hvsTo/s200/googleoq9.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Furl'><img alt='Agregar a Furl' class='marcadores-sociales' src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/R0OF3LltUXI/AAAAAAAACpc/Ujlrak5C8k0/s200/furlee5.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Reddit'><img alt='Agregar a Reddit' class='marcadores-sociales' src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/R0OF-LltUYI/AAAAAAAACpk/UKSeg7d1aqE/s200/redditse1.png'/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Magnolia'><img alt='Agregar a Magnolia' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OGIbltUZI/AAAAAAAACps/4O4O6uFkcT8/s200/magnoliaho5.png'/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blinklist'><img alt='Agregar a Blinklist' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODsbltUNI/AAAAAAAACoM/1kkiZl7g3P4/s200/blinklistspk5.png'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Blogmarks'><img alt='Agregar a Blogmarks' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODjbltULI/AAAAAAAACn8/cPI6nrIzbWo/s200/blogmarksus8.png'/></a></li>
<li><a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Fresqui'><img alt='Agregar a Fresqui' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0RQUrltUcI/AAAAAAAACqE/6tHaBcKcyRs/s200/freski.PNG'/></a></li>
<li><a expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Promoting Blogs'><img alt='Agregar a Promoting Blogs' class='marcadores-sociales' src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/R0OEZ7ltURI/AAAAAAAACos/PoC_Hn_rPI0/s200/pb16x16it8.png'/></a></li>
<li><a expr:href='"http://www.mister-wong.es/index.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Mister Wong'> <img alt='Agregar a Mister Wong' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0ODnbltUMI/AAAAAAAACoE/1ohtyPM3zD4/s200/18mrwongua3.gif'/></a></li>
<li><a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Webeame'> <img alt='Agregar a Webeame' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OE0bltUTI/AAAAAAAACo8/VhIugHAA10Y/s200/nogravatar220aj1.jpg'/></a></li><li><a expr:href='"http://www.wikio.es/vote?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a wikio'><img border='0' class='marcadores-sociales' src='http://4.bp.blogspot.com/_8PJ-pgoBhWQ/R0OFebltUVI/AAAAAAAACpM/zYz0A1XfHMw/s200/wikio2.gif'/></a></li>
<li><a expr:href='"http://www.enchilame.com/login.php?return=/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Enchilame'><img border='0' class='marcadores-sociales' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RYRbltUdI/AAAAAAAACqM/tMdnCA9AWLg/s200/enchilame.jpg'/></a></li>
<li><a expr:href='"http://barrapunto.com/submit.pl?story=&subj=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Agregar a Barrapunto'><img border='0' class='marcadores-sociales' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RYgbltUfI/AAAAAAAACqc/gBnwQ_mpddc/s200/Nombre3.jpg'/></a></li>
</ul>
</div>
<!--Marcadores sociales -->
11 febrero 2008
La primera letra del post grande
Vamos a Plantilla/ Edición de HTML, y estando en Editar plantilla, pegamos el siguiente código antes del ]]></b:skin> (para encontrarlo fácil en la plantilla, con Ctrl+F y Buscar siguiente):
.dropcaps {
float:left;
color:#ffffff;
font-size:70px;
line-height:50px;
padding-top:1px;
padding-right:5px;
}
Y que quede así como en esta imagen:

Al código pueden modificarle el color el tamaño de fuente(font size)y la altura de la letra(line height).
Luego abrimos en Configuración/ Formato y en Plantilla de entrada pegamos éste código y Guardar configuración: "Vean la imagen"
<span class="dropcaps">A</span>

Asi que cuando vayan a crear una entrada te aparecera el código y solo tienes que cambiar la letra "A" por otra.


